Website Chat Widget

Widget Overview

The Operator Website Widget provides a responsive floating chat bubble and appointment booking interface for visitors. It runs as a lightweight client script loaded from /widget.js.

Features include: - Streaming real-time AI responses. - Interactive service selectors and appointment slot pickers. - Starter prompt chips (e.g., *"What are your business hours?"*). - Proactive engagement triggers based on time on page or scroll depth.

Embed Script Tag

To embed the widget on any website, paste this single script tag right before the closing </body> tag:

<script src="https://app.operator.ai/widget.js" data-org-id="YOUR_ORGANIZATION_ID"></script>

You can copy your organization-specific script tag directly from Website Widget > Installation (/widget).

Theme & Branding Customization

Under Website Widget > Appearance (/widget), customize: - Theme Mode: Light, Dark, or System Match. - Brand Colors: Preset palette (*Modern Purple*, *Emerald Health*, *Ocean Blue*, *Sunset Rose*) or custom hex code. - Launcher Icon & Position: Message bubble, robot, phone, or calendar; placed bottom-right or bottom-left with custom padding offsets. - Branding Elements: Company name, tagline, welcome greeting, avatar image, and header logo.

Platform Installation Guides

Custom HTML / React / Next.js Paste the script tag directly before the closing `</body>` tag in your `index.html` or root layout file.

WordPress 1. In your WordPress admin, install and activate the free **WPCode** plugin (Insert Headers and Footers). 2. Go to **Code Snippets > Header & Footer**. 3. Paste the script tag into the **Footer** box and click **Save Changes**.

Shopify 1. In Shopify Admin, navigate to **Online Store > Themes**. 2. Click **··· > Edit code** on your active theme. 3. Open `layout/theme.liquid`, scroll to the bottom, paste the script directly above `</body>`, and click **Save**.

Wix 1. In Wix Dashboard, go to **Settings > Custom Code** (under Advanced). 2. Click **+ Add Custom Code**. 3. Paste the snippet, set name to *"Operator Receptionist"*, select **Body - end** and **All Pages**, then click **Apply**.

Squarespace & Webflow - **Squarespace:** Go to **Settings > Developer Tools > Code Injection > Footer**, paste snippet, and save. - **Webflow:** Go to **Project Settings > Custom Code > Footer Code**, paste snippet, and publish.

Domain Whitelisting & DNS Verification

Under Website Widget > Domains, add your production domain to prevent unauthorized websites from loading your widget. - You can optionally verify ownership by adding a DNS TXT record: operator-verify=YOUR_TOKEN - Once verified, only requests matching your whitelisted origin can initiate widget sessions.