3 min read

Embed Widget

Add a live AI demo widget to your website so visitors can experience your voice agent firsthand. Customize the look, grab the embed code, and drop it onto any page.

1. What the Embed Widget Does

The embed widget is a small, floating button that appears on your website. When a visitor clicks it, they can start a live demo call with your AI voice agent right from their browser.

Key Features

Live AI voice conversation in the browser

Customizable colors and greeting message

Mobile-responsive floating button

Works on any website (HTML, WordPress, etc.)

Use Cases

• Landing pages: Let prospects try before they buy

• Sales pages: Demonstrate your AI's capabilities

• Support pages: Offer AI-powered assistance

• Portfolio: Showcase your AI calling service

📸 Screenshot: Widget on a Website

Shows the floating widget button in the bottom-right corner of a sample website

2. Customizing Appearance

Match the widget to your brand by customizing its color, size, and greeting message.

Color

• Choose a primary color using the color picker

• Or enter a hex code to match your brand exactly

• The button, header, and accents all update

Size

• Small: Compact button, minimal screen space

• Medium: Standard size (recommended)

• Large: Prominent button, harder to miss

Greeting

• Set a custom greeting message

• Shown when the widget opens

• Example: "Hi! Want to try our AI agent?"

Quick Tip

Use the live preview panel on the right side of the customizer to see exactly how your widget will look before saving.

3. Copying the Embed Code

Once you've customized your widget, grab the embed code and add it to your site.

Go to Settings → Embed Widget

Customize your widget appearance

Click the "Copy Code" button

The HTML snippet is copied to your clipboard

Example Embed Code:

<script
  src="https://app.thedisruptor.ai/widget.js"
  data-tenant-id="YOUR_TENANT_ID"
  data-color="#6366f1"
  data-size="medium"
  data-greeting="Hi! Try our AI agent"
></script>

4. Where to Put It on Your Website

Paste the embed code into your website's HTML. It works anywhere, but here are the best options.

HTML / Static Sites

• Paste the code just before the closing </body> tag

• It will appear on every page of your site

• For specific pages only, add it to just those pages

WordPress

• Go to Appearance → Theme Editor → Footer (footer.php)

• Or use a plugin like "Insert Headers and Footers"

• Paste the embed code in the footer section

Shopify

• Go to Online Store → Themes → Edit Code

• Open theme.liquid

• Paste before </body>

Wix / Squarespace

• Use the custom code / embed block feature

• Paste in the site-wide code injection area

• Usually found in Settings → Advanced

Works Everywhere

The widget is a single script tag — it works on any website that supports custom HTML. No npm install, no build steps, just paste and go.