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

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

Customizing the Widget

The widget's look and behavior are configured in your dashboard — not in the embed code. Go to Dashboard → Chatbots → [your chatbot] → Widget to adjust:

• Position — bottom-right, bottom-left, or inline
• Colors — primary, background and text colors, plus border radius
• Size — widget width and height

To open the chat automatically after a configurable delay, enable Auto-Open in the Behavior tab of the same settings page.

Changes apply to your website automatically — no need to update the embed code. See the Widget Customization guide for all available options.

The widget language is detected automatically from each visitor's browser, based on the languages you enable in your chatbot's Languages tab.

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"
  async
></script>

The FAQ widget shows published FAQs from your chatbot. Colors and styling (primary, background and text colors, border radius) are configured in Dashboard → FAQs → Settings.

FAQ Widget Options

Category Filter Example

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

Mobile Optimization

The chat widget is fully optimized for mobile devices:

• Full-width layout on small screens
• Slide-up animation when opening
• iOS keyboard handling (widget adjusts to on-screen keyboard)
• Safe-area support for iPhone notch and home indicator
• Larger touch targets for better usability
• Input font size prevents iOS auto-zoom

Platform-Specific Guides

WordPress

Recommended: Use the official ChatReact WordPress Plugin for the easiest integration with Gutenberg blocks, Elementor widgets, and shortcodes.

Alternative: Manual embed via a "Header/Footer Scripts" plugin:

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

Shopify

Recommended: ChatReact Shopify App

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

1. Install the ChatReact app in your Shopify admin
2. Enter your Chatbot ID in the app settings
3. The chat widget automatically appears on your storefront
4. 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

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

Webflow

1. Go to Project Settings → Custom Code
2. Add to Footer Code
3. 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();

// Start a fresh conversation
ChatReact.newChat();

// Remove the widget from the page entirely
// (useful in single-page apps, e.g. on route changes)
ChatReact.destroy();

Testing

Preview Mode

Before embedding live:

1. Use the Preview feature in your dashboard
2. Test different scenarios
3. Verify responses are accurate

Troubleshooting

Widget Not Appearing

1. Check browser console for errors
2. Verify chatbot ID is correct
3. Ensure chatbot is active (not disabled)
4. Check if ad blockers are interfering
5. Check your plan usage — the widget pauses when your plan's monthly limit is reached

Caching & Optimization Plugins

Some caching or script-optimization plugins rewrite script URLs, which can stop the widget from loading. If that happens, add an explicit API URL to the script tag:

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

The same attribute works on the FAQ and form widget scripts.

Styling Conflicts

If your site's CSS conflicts:

• The widget scopes its styles to its own container and uses high-priority rules to resist conflicts
• Check z-index values of elements overlapping the widget
• Avoid broad !important rules in your site CSS that target generic elements

Performance

The widget is designed for minimal impact:

• Loads asynchronously — never blocks your page render
• Lightweight: roughly 30 KB compressed transfer

Next Steps

• Widget Customization →
• WordPress Plugin →
• Shopify Integration →
• FAQ Management →
• Smart Contact Forms → — embed standalone forms with the form widget