Setting Up Your Own Chatbot – Deployment

Use these instructions to publish your Noem AI chatbot on the digital property of your choice, from a traditional website embed to WhatsApp or Slack. All deployment options start in Deploy › Deploy Tab inside your project.

What Is the “Install” Tab? #

The Install tab gathers every publish option for your bot—website script, CMS plugins, messaging-app webhooks, and a turnkey hosted page, plus a master list of Approved Domains that restrict where your API key is allowed to run.

Benefits of No-Code Deployment #

1. Fast go-live – Drop one script or plugin and you’re live in minutes.
2. Central control – Enable/disable targets or rotate keys from a single console.
3. Brand consistency – One bot definition powers web, mobile, and chat apps.
4. Security – Requests are accepted only from domains you approve.

Prerequisites #

• An active Noem AI chatbot project and its API Key.
• Administrator access to your web property (website CMS, DNS, Facebook Developers, Slack API, etc.).
• Optional: User-profile data if you want personalized responses.

Step-by-Step Guide #

1 Open the Install Tab #

1. Sign in to Noem AI › My Projects.
2. Click your chatbot, then select Install in the Right-hand navigation.

2 AI Chatbot API KEY #

An AI Chatbot API Key is a unique identifier that securely links your deployed chatbot to your Noem AI account. It acts like a digital access token that authorizes your website, app, or integration (such as WordPress or Shopify) to communicate with your specific bot. By entering this key into your plugin or embed configuration, Noem AI can verify your ownership, route conversations to the correct chatbot, and ensure that only approved domains or platforms can access your bot’s functionality.

3 Add Approved Domains #

Your bot will execute only on the domains listed here.

1. In Approved Domains, click Add Domain.
2. Enter each root or sub-domain (e.g., example.com, chat.example.com).
3. Click Save.

Tip – Wildcards are not supported; add every sub-domain explicitly.

3 Choose a Deployment Target #

Website (HTML/JS) #

Embed the bot on any HTML page.

htmlCopyEdit<!-- Include Noem AI chatbot -->
<script src="https://app.noem.ai/js/ChatBot.js"></script>
<script>
  /* (optional) current user profile */
  const currentUser = {
    userId: null,           // id or email
    displayName: 'user',
    profilePic: null,
    email: null
    // …any other user traits
  };

  /* (optional) UI / behaviour overrides */
  const nbOptions = {
    inputMessagePlaceHolderText: 'Type your message here…',
    disableCSS: false,
    disableFabButton: false
  };

  /* Instantiate and initialise */
  const bot = new ChatBot('YOUR_API_KEY', currentUser, null, nbOptions);

  /* (optional) telemetry hooks */
  // bot.onMessageSent     = msg => { … }
  // bot.onMessageReceived = msg => { … }

  /* (optional) bot-to-client events */
  bot.onEventTriggered = (event, data) => console.log(event, data);

  bot.init();
</script>

Replace YOUR_API_KEY with the key shown in Deploy › API Key.

WordPress #

1. Download the plugin ZIP: noem-bot.zip.
2. In WordPress Admin: Plugins › Add New › Upload Plugin.
3. Select the ZIP › Install Now › Activate Plugin.
4. In Noem Bot menu, paste your API Key and Save.
5. Add your site (mysite.com) to Approved Domains in Noem AI.

Check this Article for more information: Install Your Noem AI Chatbot on WordPress

Wix #

1. Sign in to Wix Studio and open your site.
2. Settings › Custom Code › Add Custom Code.
3. Paste the Website script (above).
4. Name: NOEM-AI. Place Code in: Body – end.
5. Add your domain to Approved Domains.

Check this Article for more information: Install Your Noem AI Chatbot on WIX

Squarespace #

1. In Squarespace: Settings › Developer Tools › Code Injection.
2. Paste the Website script into Footer.
3. Save and publish.
4. Add your domain to Approved Domains.

Check this Article for more information: Install Your Noem AI Chatbot on SQUARESPACE

Any Website #

1. Open your Noem AI Dashboard → go to Deploy → Website Integration.
2. Copy the chatbot code snippet provided.
3. Paste the code into your website’s HTML file, just before the closing </body> tag.
4. Update the code with your own Chatbot API Key and optional user object. <script src="https://app.noem.ai/js/ChatBot.js"></script> <script> document.addEventListener("DOMContentLoaded", ()=> { let currentUser = { email: null, displayName: 'Guest', userProfileUrl: '' }; const bot = new ChatBot('YOUR_CHATBOT_API_KEY', currentUser); bot.init(); }); </script>
5. Save your changes and publish your website.
6. In Noem AI → Deploy → Approved Domains, add your website domain (e.g., mysite.com) and click Save.
7. Open your website in a browser and refresh — the Noem AI chatbot should now appear on your site.

Check this Article for more information: Install Your Noem AI Chatbot on Any Website

Hosted Chatbot Page #

No site? Publish a branded, HTTPS-hosted page in minutes.
See Publish a Hosted Chatbot Page for the full workflow.

WhatsApp Business #

1. Go to Meta Developers › create or open your WhatsApp App.
2. Add a phone number.
3. Configuration › Webhook – paste the Callback URL and Verify Token shown in Noem AI, then Verify and Save.
4. Click Manage › subscribe to event messages.
5. In API Setup, copy Access Token and Phone Number ID into Noem AI.
6. Send a WhatsApp message to the From number to test.
   Token is valid for 23 h in sandbox; follow the Permanent Token guide.

Slack #

1. Go to https://api.slack.com/apps › Create New App › From Scratch.
2. Give it a name and pick a workspace.
3. Event Subscriptions – toggle On and enter the Request URL provided by Noem AI.
4. Under Subscribe to bot events add message.im.
5. Save Changes.
6. App Home – enable Message Tab and user posts.
7. OAuth & Permissions – copy Bot User OAuth Token into Noem AI.
   Add scopes chat:write and chat:write.public.
8. Install App to Workspace.
9. Refresh Slack; the bot should appear with its configured name and avatar.

Check this Article for more information: Install Your Noem AI Chatbot on Slack

Twilio SMS #

1. Buy a new number in Twilio.
2. Complete A2P 10DLC or other regional compliance.
3. Twilio Console › Develop › Phone Numbers › Active Numbers › select your number.
4. Configure › Messaging Configuration – set Webhook URL (shown in Noem AI) and method HTTP POST.
5. Save, then add your site (or Twilio SMS domain) to Approved Domains.
6. Send an SMS to your Twilio number; the bot should respond.

Integrate Your Noem AI Chatbot with Twilio

Google Tag Manager Integration #

The web embed automatically pushes events to GTM if GTM is already present.

To customise, override the hooks:

jsCopyEditbot.onMessageSent     = msg => dataLayer.push({ event:'customEvent', eventCategory:'Chatbot', eventAction:'messageSent', detail:msg });
bot.onMessageReceived = msg => dataLayer.push({ event:'customEvent', eventCategory:'Chatbot', eventAction:'messageReceived', detail:msg });

(Works with the Website / JS integration only.)

 Test with a Chrome Extension #

Download the Noem AI Chrome Extension

• Click Download Extension from your Noem AI Deploy tab.
• Save the .zip file to a permanent folder (for example, Desktop, Documents, or root directory).
• Do not delete or move this folder after installation.

Unzip the Extension File

• Right-click the downloaded ZIP file.
• Select Extract All and choose your destination folder.

Open the Chrome Extensions Page

• In Chrome, go to: chrome://extensions/

Enable Developer Mode

• In the top right corner, toggle Developer mode to On.

Load the Unpacked Extension

• Click Load unpacked in the top left corner.
• Select the folder containing the extracted extension files (the one with manifest.json).
• The Noem AI extension will now appear in your Chrome toolbar.

Check this Article for more information: Test Your Noem AI Chatbot with the Chrome Extension

Embed Your Noem AI Chatbot in a Specific Section of Your Website #

1. Identify the section of your webpage where you want to embed the chatbot.
   For example, create a <div> container with a unique ID: <div id="chatbot-container"></div>
2. Copy and paste the following script into your site’s HTML, just before the closing </body> tag: <script> document.addEventListener('DOMContentLoaded', ()=>{ let options = { // Replace ELEMENT_ID with the id of the div where you want to embed the chatbot chatContainerOverride: 'chatbot-container' }; let currentUserProfile = { // Optionally pass user profile info if available displayName: 'Guest User', // user's name email: '', // user's email profilePic: '' // URL of user's profile picture }; this.chatbot = new window.Chatbot("YOUR_CHATBOT_API_KEY", currentUserProfile, null, options); this.chatbot.init(); }); </script> Replace YOUR_CHATBOT_API_KEY with your bot’s actual API key (found under Noem AI → Deploy → API Key).
3. Save and publish your changes.
4. Reload your site.

Lear more here: Embed Your Noem AI Chatbot in a Specific Section of Your Website

Deployment Settings Reference #

API Key: A unique key that authorizes the bot. Keep this key secret to maintain security.

Approved Domains: The list of domains allowed to initialize the chatbot script.

Callback URL / Verify Token: Required for setting up webhooks with platforms like WhatsApp and Slack.

Webhook URL (Twilio): The endpoint that Twilio will call when it receives an incoming SMS.

nbOptions: UI customization options, such as placeholder text, custom CSS, and floating action button (FAB) settings.

Managing Updates #

• Rotate API Key – Deploy › Generate New Key, update every target.
• Add domains – update Approved Domains then Save & Publish.
• Shopify / WP plugin updates – update via each platform’s app/plugin manager.
• Twilio token or webhook change – edit number configuration in Twilio.

Real-World Use-Cases #

• E-commerce (Shopify) – product FAQ and upsell inside every product page.
• Customer-care hotline (Twilio SMS) – answer order-status requests over text.
• Marketing microsite (Hosted Page) – QR-code campaigns with zero hosting costs.
• Website lead capture (HTML / JS) – personalise greetings with current user data.
• Internal helpdesk (Slack) – HR policies and IT troubleshooting in-workspace.

Ready to Launch? #

Pick your deployment path, paste your API key or webhook, add your domain(s), and click Publish. Your Noem AI chatbot will be live, on web, mobile, SMS, or chat apps in minutes, with no server code required.