Widget Embedding

Add your AI chatbot to any website in seconds with our simple embed code.

Quick Start

Add this code before the closing </body> tag:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID" 
  async
></script>

That's it! Your chatbot is now live on your website.

Finding Your Chatbot ID

Go to your chatbot's settings
Navigate to the Embed tab
Copy the embed code (includes your ID)

Or find the ID in your dashboard URL: /dashboard/company/chatbots/[CHATBOT_ID]

Widget Options

Customize the widget with data attributes:

Basic Options

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-position="bottom-right"
  data-language="en"
  async
></script>

Attribute	Values	Default
`data-position`	`bottom-right`, `bottom-left`	`bottom-right`
`data-language`	Any language code	Auto-detect
`data-open`	`true`, `false`	`false`

Color Overrides

Override dashboard settings with inline colors:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

FAQ Widget

Display FAQs as an accordion on any page:

<div id="chatreact-faq"></div>
<script 
  src="https://www.chatreact.ai/embed/faq-widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

The FAQ widget shows published FAQs from your chatbot.

Platform-Specific Guides

WordPress

Install any "Header/Footer Scripts" plugin
Add the embed code to the footer section
Save and publish

Shopify

Recommended: ChatReact Shopify App

Install the ChatReact app from the Shopify App Store for the easiest integration:

Install the ChatReact app in your Shopify admin
Enter your Chatbot ID in the app settings
The chat widget automatically appears on your storefront
Manage widget assignments per page, or enable it everywhere

The app also supports Form and FAQ widgets as App Blocks in the Theme Editor.

Alternative: Manual Embed

Go to Online Store → Themes → Edit Code
Open theme.liquid
Add code before </body>
Save

Webflow

Go to Project Settings → Custom Code
Add to Footer Code
Publish site

Next.js / React

Use the Script component:

import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script 
        src="https://www.chatreact.ai/embed/widget.js"
        data-chatbot-id="YOUR_CHATBOT_ID"
        strategy="lazyOnload"
      />
    </>
  );
}

Vue.js

Add to your main App.vue or layout:

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://www.chatreact.ai/embed/widget.js';
  script.dataset.chatbotId = 'YOUR_CHATBOT_ID';
  script.async = true;
  document.body.appendChild(script);
});
</script>

JavaScript API

Interact with the widget programmatically:

// Open the chat
ChatReact.open();

// Close the chat
ChatReact.close();

// Toggle open/closed
ChatReact.toggle();

// Send a message
ChatReact.sendMessage('Hello!');

// Set user data
ChatReact.setUser({
  name: 'John Doe',
  email: '[email protected]'
});

Testing

Preview Mode

Before embedding live:

Use the Preview feature in your dashboard
Test different scenarios
Verify responses are accurate

Local Development

For local testing, use localhost URLs:

<script 
  src="http://localhost:3000/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID" 
  async
></script>

Troubleshooting

Widget Not Appearing

Check browser console for errors
Verify chatbot ID is correct
Ensure chatbot is active (not disabled)
Check if ad blockers are interfering

Styling Conflicts

If your site's CSS conflicts:

Widget uses shadow DOM for isolation
Check z-index values
Ensure no !important overrides

Performance

The widget is designed for minimal impact:

Lazy loaded
< 50KB total size
Non-blocking
Cached aggressively