Web Widget Setup

The Web Widget allows you to embed your AI Assistant directly onto a website. This enables visitors to talk to your AI via their computer or phone microphone without dialing a phone number.

Installation

To install the widget, you simply need to copy the JavaScript snippet from your dashboard and paste it into your website's HTML code.

1. Get the Code

  1. Go to Assistants and select the assistant you want to use.
  2. Click the Publish button in the top right.
  3. Select Web Widget.
  4. Copy the code snippet provided.

2. Embed on Website

Paste the snippet before the closing </body> tag on your website. This works on WordPress, Webflow, Shopify, and custom sites.

Sample Code Snippet 
<script 
  src="https://widget.callerai.com/v1/widget.js" 
  data-assistant-id="asst_123456789" 
  data-primary-color="#4C8BF5">
</script>

Customization Options

You can customize the look and feel of the widget by adding parameters to the script tag.

data-primary-color
Hex code for the button color (e.g., "#FF0000").

data-position
Where the widget appears on the screen. Options: `bottom-right` (default) or `bottom-left`.

data-greeting
The text displayed in the bubble before the user clicks. e.g., "Questions? Talk to us!"

Security (Domain Whitelisting)

To prevent other people from copying your widget code and putting it on their own websites (using your minutes), you must whitelist your domain.

  1. Go to Settings -> Security in your Caller AI dashboard.
  2. Find the Allowed Domains section.
  3. Add your website URL (e.g., `https://www.mybusiness.com`).
  4. The widget will now refuse to load on any other domain.

Use Cases