Chatmode Embeds allow you to integrate AI chat capabilities directly into your website or application. With embeds, you can provide your users with an interactive AI assistant without requiring them to leave your site.

​
What are Embeds?

Embeds are customizable chat widgets that connect to your Chatmode agents and environments. They:
  • Appear on your website as a chat bubble or embedded interface
  • Connect to your configured agents through environments
  • Allow real-time conversations with your AI
  • Support customization to match your brand
  • Work across desktop and mobile devices

​
Types of Embeds

Chatmode offers different ways to embed the chat interface: The standard method uses a small JavaScript snippet to add a floating chat bubble to the corner of your website. It:
  • Is easy to implement via a copy-paste script tag.
  • Appears as a clickable bubble (customizable icon).
  • Opens a modal window containing the full conversation interface.
  • Is designed to work well across all device types.

​
Inline Embed (via Iframe)

For embedding the chat directly into a specific part of your page layout (less common), you can use an <iframe> pointing to the chat page URL (/chats/[environmentId]). This requires manual styling to position the iframe correctly within your page content.

​
Key Features

Chatmode Embeds offer several features (frontend implementation may vary):

​
Conversation Persistence

  • User conversations are saved between sessions
  • Chat history is available when users return
  • Contextual information is maintained for better responses

​
Multi-language Support

  • Interface translation based on user preference (if configured)
  • Support for agents trained in multiple languages

​
Analytics and Tracking

  • Basic usage metrics (e.g., conversation count) may be available.
  • Monitor agent performance and conversation history.

​
Getting Started with Embeds

​
Prerequisites

Before creating an embed, you need:
  1. A Chatmode account with an active subscription
  2. At least one agent configured
  3. An environment of type EMBED

​
Basic Implementation (Floating Bubble)

  1. Create and configure an EMBED type environment in Chatmode.
  2. Navigate to the Environment’s settings/details page.
  3. Find the Implementation / Share section and locate the “Bubble Code” snippet.
  4. Copy the provided script tag.
  5. Paste the script tag into your website’s HTML (e.g., before the closing </body> tag).
The code snippet you copy from the UI will look similar to this (use the exact code from the UI): 
<script type="module">
  import Chatmode from "https://cdn.jsdelivr.net/npm/@chatmode/embed/+esm";

  Chatmode.initBubble({
    // organizationId: "YOUR_ORG_ID", // Pre-filled
    environmentId: "YOUR_ENVIRONMENT_ID", // Pre-filled
    theme: "automatic", // Optional
    // ... other options might be pre-filled ...
  });
</script>

​
Testing Your Embed

After implementation:
  1. Visit your website in incognito/private mode
  2. Verify that the chat widget appears correctly
  3. Test interactions to ensure the agent responds appropriately
  4. Check the appearance on different devices and screen sizes

​
Common Use Cases

Embeds can be used in various scenarios:

​
Customer Support

  • Provide 24/7 automated support
  • Answer common questions instantly
  • Reduce support ticket volume

​
Lead Generation

  • Engage website visitors proactively
  • Qualify leads through conversation
  • Collect contact information (if configured in the agent prompt/flow)

​
Product Guidance

  • Help users navigate your product
  • Provide personalized recommendations
  • Explain features and benefits
  • Guide users through complex processes

​
Knowledge Base

  • Answer questions about your content
  • Provide instant access to information
  • Reduce time spent searching documentation
  • Deliver contextual help based on the current page

​
Best Practices

For optimal results with embeds:
  1. Start with Clear Goals: Define what you want the embed to achieve
  2. Focus on User Experience: Make the chat interface intuitive and helpful
  3. Match Your Brand: Customize the appearance to fit your website design
  4. Test Thoroughly: Verify functionality across different scenarios
  5. Iterate Based on Feedback: Monitor usage and refine over time

​
Next Steps

To learn more about implementing and customizing embeds: