Embed the Chatbot on Your Website | SoundMinds.ai Guides

1 Prerequisites

Before embedding the chatbot widget on your website, make sure you have:

A SoundMinds.ai account (see our Signup Guide)
Created a chatbot (see Create Your First Chatbot guide)
At least one Q&A pair with embeddings generated

Tip: If you haven't created a chatbot yet, follow our Create Your First Chatbot guide first.

2 Get your embed code

To get the embed code for your chatbot:

Navigate to your chatbot's Settings > Integrations tab
Find the Web Integration section
Click the "Copy Embed Code" button
The code will be copied to your clipboard with your chatbot ID pre-filled

Tip: Keep this page open - you'll need to paste the embed code in the next steps.

3 Understand the embed code

The embed code consists of two parts: a configuration script and the widget loader. Here's what each part does:

<!-- SoundMinds AI Chatbot Widget -->
<script>
  window.soundmindsConfig = {
    chatbotId: "your-chatbot-id",  // Your unique chatbot identifier
    position: "bottom-right",       // Widget position (bottom-right, bottom-left, top-right, top-left)
    apiUrl: "https://api.soundminds.ai",        // API endpoint
    embedUrl: "https://console.soundminds.ai"   // Widget hosting URL
  };
</script>
<script src="https://console.soundminds.ai/embed/widget.js" async></script>

Configuration Options

Required parameter:

chatbotId: Your unique chatbot identifier - automatically filled when you copy from dashboard

Optional parameters:

position: Where the widget appears - bottom-right (default), bottom-left, top-right, top-left
apiUrl: The API server URL - don't change this unless instructed
embedUrl: The widget hosting URL - don't change this unless instructed

Additional optional overrides:

primaryColor: Custom color for the widget theme
widgetWidth: Custom width for the chat window
widgetHeight: Custom height for the chat window
buttonSize: Size of the chat button
borderRadius: Corner rounding for the widget
fontFamily: Custom font family for the widget

4 Add the code to your website

Paste the embed code just before the closing </body> tag in your HTML. The widget loads asynchronously and won't slow down your page.

Basic HTML example:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Welcome to my website</h1>
  <p>Your content here...</p>

  <!-- SoundMinds AI Chatbot Widget -->
  <script>
    window.soundmindsConfig = {
      chatbotId: "your-chatbot-id",
      position: "bottom-right",
      apiUrl: "https://api.soundminds.ai",
      embedUrl: "https://console.soundminds.ai"
    };
  </script>
  <script src="https://console.soundminds.ai/embed/widget.js" async></script>
</body>
</html>

Note: The async attribute ensures the widget loads without blocking your page content.

5 Widget positions

You can choose where the chatbot widget appears on your page by changing the position parameter:

bottom-right (default): Most common, appears in bottom-right corner
bottom-left: Appears in bottom-left corner
top-right: Appears in top-right corner (less common)
top-left: Appears in top-left corner (less common)

Tip: Most users keep the default bottom-right position as it's the most familiar location for chat widgets.

6 Test the widget

After adding the embed code:

Save and publish your website changes
Refresh the page in your browser
You should see a chat button in the configured position
Click the button to open the chat widget
Test with a question from your knowledge base

Warning: If domain restrictions are enabled and your domain isn't whitelisted, the widget won't load. See Step 7 for configuration details.

7 Configure domain restrictions (optional)

By default, domain restrictions are disabled - any website can embed your chatbot. This is a security feature to prevent unauthorized embedding.

How to enable domain restrictions:

Go to Settings > Integrations > Domain Restrictions
Toggle "Restrict to Specific Domains"
Add your domain (e.g., example.com or *.example.com for subdomains)
Click Save

Tip: When enabled, only whitelisted domains can load your chatbot. This prevents unauthorized use of your chatbot on other websites.

8 Troubleshoot common issues

If you're experiencing problems with the widget, here are some common issues and solutions:

Widget doesn't appear

Check your browser console for errors (press F12)
Verify the embed code is placed before </body>
Make sure chatbotId is correct
Check if domain restrictions are enabled and your domain is whitelisted

Widget appears but doesn't respond

Verify your chatbot has Q&A pairs with embeddings generated
Check that your chatbot status is "Active"
Test in the Knowledge Base > Test tab first

Styling conflicts

The widget uses high z-index (999999) to stay on top
If hidden by other elements, check for conflicting z-index values
The widget is self-contained and shouldn't affect your site's styles

CORS errors

Ensure you're using the correct apiUrl and embedUrl
If testing locally, note that localhost is allowed by default when domain restrictions are disabled

9 Platform-specific instructions

Here are quick instructions for adding the embed code to popular website platforms:

WordPress

Use a plugin like "Insert Headers and Footers" or add directly to your theme:

Go to Appearance > Theme Editor
Find footer.php
Add the embed code before </body>

Shopify

Go to Online Store > Themes > Edit code
Find theme.liquid
Add the embed code before </body>

Squarespace

Go to Settings > Advanced > Code Injection
Add the embed code to the Footer section

Wix

Use Wix's Custom Code feature in Settings
Add to Body - end

React/Next.js

You can add the embed code directly to _document.js or use a component:

The widget initializes on DOM ready automatically
Place the scripts before the closing </body> tag in your document

Note: For frameworks like React, you may want to create a custom component that loads the widget script dynamically.