Test with a Chrome Extension

Introduction #

The Noem.ai Chrome Extension allows you to inject your chatbot onto any website you control, making it easy to preview and test the chatbot’s behavior and appearance before going live. By loading the extension in developer mode, you can simulate real interactions directly in your browser without editing your site’s source code.

This guide explains how to install, configure, and use the Chrome Extension for testing purposes.

Step 1: Install the Extension #

1. Download the Extension
   • Obtain the latest Noem.ai Chrome Extension package: [Download here].
2. Unzip the File
   • Extract the downloaded ZIP archive into a permanent folder.
   • Suggested folders: Desktop, Documents, or a dedicated “Noem Extension” folder.
   • Do not move or delete this folder after installation, as Chrome depends on the manifest file (manifest.json).
3. Open Chrome Extensions Manager
   • In the Chrome browser, go to: chrome://extensions/

1. Enable Developer Mode
   • In the top-right corner of the Extensions page, toggle Developer mode to ON.
2. Load the Extension
   • Click Load unpacked.
   • Select the folder where you extracted the extension files (the one containing manifest.json).
3. Confirm Installation
   • The Noem.ai extension will now appear in your Chrome extensions list.
   • For easier access, click the puzzle icon in Chrome’s toolbar and Pin the extension.

Step 2: Configure the Extension #

1. Navigate to Your Website
   • Open the site where you want to test your chatbot.
   • Ensure this domain is included in your Deploy → Approved Domains in Noem.ai.
2. Open the Extension Popup
   • Click the Noem.ai extension icon in your Chrome toolbar.
   • A configuration popup window will appear.
3. Enter Your API Key
   • Copy your Project API Key from Noem.ai.
   • Paste it into the API Key input field inside the popup.
4. Save and Inject
   • Click Save and Inject.
   • The chatbot will appear on your website, ready for testing.

Using the Extension #

Once the extension is installed and configured:

• Live Testing:
  • Test how the chatbot looks and behaves on your site without making permanent code changes.
• Rapid Iteration:
  • Quickly adjust chatbot instructions or configuration in Noem.ai and refresh the page to see updates.
• Multi-domain Testing:
  • If you plan to test on different sites, add each domain to the Approved Domains list in Noem.ai before injecting the bot.

Troubleshooting #

• Bot Does Not Load
  • Ensure your testing domain is included in Deploy → Approved Domains.
  • Refresh the page after saving your API key in the extension popup.
• Extension Icon Missing
  • Click Chrome’s puzzle icon → locate Noem.ai Extension → click the Pin icon.
  • If still missing, open chrome://extensions/ and verify that the extension is enabled.
• API Key Not Working
  • Verify you are using the correct Project API Key from your Noem.ai dashboard.
  • Reopen the popup, update the key, and click Save and Inject.
• Extension Fails After Moving Files
  • If the folder containing the extension is moved, renamed, or deleted, Chrome cannot locate manifest.json.
  • Solution: Remove the extension in chrome://extensions/, then reload the unpacked extension from the correct folder.
• Injection Works but No Chatbot Visible
  • Check your browser console (Ctrl+Shift+J) for errors.
  • Ensure no conflicting extensions (like script blockers) are preventing the chatbot from loading.