ChatEaver Embed Code Specification
The ChatEaver website widget is a lightweight, standalone JavaScript bundle that boots on your website via a standard script tag contract. The script initializes the `ChateaverChatWidget` global object and opens an asynchronous connection to your workspace.
Installation Snippet (Standard HTML)
Paste this snippet immediately before the closing `</body>` tag of your HTML document:
<script src="/sdk/chat-widget.js" data-workspace-key="YOUR_WORKSPACE_KEY" async></script>Installation on Popular Web Platforms
Platform | Installation Method | Step Summary |
|---|---|---|
Plain HTML / Static Site | Direct Script Embed | Paste script before </body> in index.html. |
React / Next.js | useEffect Hook or Next <Script> | Dynamically append script tag in layout component. |
WordPress | Header and Footer Scripts Plugin | Paste script in Footer Scripts setting box. |
Webflow | Custom Code (Site Settings) | Paste script into Footer Code section in Site Settings. |
Shopify | Theme Liquid Editing | Paste script above </body> in theme.liquid file. |
React / Next.js Component Example
import { useEffect } from 'react';
export function ChatWidget() {
useEffect(() => {
const script = document.createElement('script');
script.src = '/sdk/chat-widget.js';
script.setAttribute('data-workspace-key', 'YOUR_WORKSPACE_KEY');
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
return null;
}Step-by-Step Installation Steps
Step 1: Open Dashboard > Widget Manager (/dashboard/widget).
Step 2: Copy your unique Embed Script or Workspace Key.
Step 3: Open your website's template or code editor.
Step 4: Paste the script tag into your site's global footer or layout component.
Step 5: Publish changes and reload your live website page.
Step 6: Confirm the floating ChatEaver chat bubble appears in the bottom right corner.