This guide walks you through the process of creating and configuring a Chatmode embed for your website or application.

​
Prerequisites

Before creating an embed, ensure you have:

  • A Chatmode account with an active subscription
  • At least one agent already configured
  • Access to your website’s code or content management system

​
Step 1: Create an Embed Environment

First, you need to create an EMBED environment that will host your embed:

  1. Log in to your Chatmode dashboard
  2. Navigate to Environments in the sidebar
  3. Click Create Environment
  4. Select EMBED as the environment type
  5. Enter a descriptive name for your environment (e.g., “Main Website Chat”)
  6. Select the agent that will power this embed
  7. Choose your preferred language
  8. Click Next to proceed to configuration

​
Step 2: Configure General Settings

Configure the general behavior and appearance of your embed via the Environment settings:

  • Display Name / Display Picture / Icon / Primary Color / Initial Message: Configure these core visual/text elements (as described in the Customization guide).

Ensure you configure the necessary settings like Display Name and Initial Message to provide a good user experience.

​
Step 3: Customize Appearance

Tailor the look and feel of the chat interface hosted within the embed:

  1. Colors and Branding (Applied to the /chats/[id] page):

    • Primary color for buttons and accents
    • Header color
    • Text colors
    • Upload your logo for the chat header (via Display Picture setting)
    • Display Name for the header

  2. Layout Options (Controlled by your <iframe> styling):

    • Position (bottom-right, inline, etc.) - achieved via CSS on the iframe
    • Dimensions (width, height) - set on the iframe element

  3. Text Customization (Applied to the /chats/[id] page):

    • Initial Message displayed by the agent.

​
Step 4: Advanced Configuration

Currently, advanced configuration options beyond the general settings are limited for the standard embed.

​
Step 5: Get Your Embed Code

Once your EMBED environment configuration is complete and saved:

  1. Navigate to the Environment details page (if you aren’t already there).
  2. Find the Implementation / Share section.
  3. Locate the “Bubble Code” snippet, which provides the standard floating widget.
  4. Click the Copy button next to the Bubble Code.

(Alternatively, if you need to embed the chat inline within your page content, you can copy the “Iframe Code” snippet instead, which provides just the basic <iframe> tag structure.)

​
Step 6: Implement on Your Website

  1. Access your website’s code or content management system.
  2. Paste the copied “Bubble Code” script tag just before the closing </body> tag of your HTML.
  3. This script will handle adding the floating bubble and loading the chat modal when clicked.

(If you copied the “Iframe Code” for inline embedding, paste the <iframe> tag where you want it in your HTML structure and apply appropriate CSS for sizing and layout.)

​
Step 7: Test Your Embed

After implementation, thoroughly test your embed:

  1. Visit your website in different browsers
  2. Check functionality on mobile devices
  3. Test the chat flow with sample questions
  4. Verify that user inputs are handled correctly
  5. Confirm that appearance settings are applied properly

​
Next Steps

After implementing the embed snippet:

  1. Test the chat bubble and conversation flow thoroughly.
  2. If needed, adjust the Environment settings in Chatmode (like Display Name, Picture, Initial Message) and save.