Install Your Noem AI Chatbot on Any Website

Overview
You can embed your Noem AI chatbot on any custom website by adding a simple JavaScript code snippet to your site’s HTML. This gives you complete control over placement and styling while maintaining a secure connection to your Noem AI account. Once installed, your chatbot will appear on your pages automatically, ready to interact with visitors.

Applies to: All plans with Deployment access
Platform: Any website or web application supporting HTML/JavaScript

Why Add Noem AI to Your Websit

• Flexible integration: Works with any platform—custom sites, CMSs, or web apps.
• Lightweight and fast: Loads asynchronously without slowing your site.
• Secure connection: Uses your unique chatbot API key for authentication.
• Universal support: Compatible with HTML, React, Angular, Vue, and most frameworks.

Prerequisites
Before adding your chatbot, ensure you have:

• A published chatbot in your Noem AI workspace.
• Access to your website’s HTML or template files.
• Your chatbot’s API key (found in Noem AI → Deploy → Website Integration).
• Your domain (for example, mysite.com) added to the Approved Domains list in Noem AI.

Installation Steps

1. Open your Noem AI Dashboard and go to Deploy → Website Integration.
2. Copy the chatbot integration snippet provided.
3. Paste the snippet into your website’s HTML file just before the closing </body> tag (or in a footer include file).
4. Update the API key with your chatbot’s unique key and customize the currentUser object if needed.

Example code:

<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>

Replace YOUR_CHATBOT_API_KEY with your actual API key from Noem AI.

💡 Tip: You can dynamically populate the currentUser object with data from your site (e.g., logged-in user’s name or email).

Approve Your Domain

1. Go back to your Noem AI Dashboard.
2. Open the Deploy tab and scroll down to Approved Domains.
3. Add your site’s domain (for example, mysite.com).
4. Click Save.

Your chatbot will only load on approved domains for security and access control.

Testing Your Chatbot

1. Open your website in a browser.
2. Refresh the page and check the bottom corner for the chatbot widget.
3. Start a conversation to confirm it’s active and responding.

If it doesn’t appear right away, clear your browser cache and reload the page.

Troubleshooting

Best Practices

• Place the chatbot script at the end of the body to avoid delaying page load.
• Keep your Approved Domains list updated.
• Customize the currentUser object for a personalized experience (e.g., logged-in user details).
• Test across browsers and devices to ensure consistent performance.
• Store your API key securely and rotate it periodically for security.

Next Steps

• Adjust widget colors, icons, and greetings in Noem AI → Deployment Settings.
• Add integrations like Zendesk, Shopify, or Twilio to expand chatbot capabilities.
• Monitor usage and engagement in Noem AI → Analytics.

Related Articles

• Install Your Noem AI Chatbot on WordPress
• Install Your Noem AI Chatbot on Wix
• Install Your Noem AI Chatbot on Squarespace
• Publish a Hosted Chatbot Page