Website Widget

The website widget lets visitors call your AI agent directly from their browser — no phone number needed. Embed a floating call button on any website, and visitors can start a voice conversation with one click.

How It Works

When a visitor clicks the widget button:

1. Their browser requests microphone access.
2. A WebRTC voice connection is established with the agent.
3. The visitor speaks with the agent through their browser, just like a phone call.
4. The call ends when either party hangs up.

The call appears in your call history like any other call, with a full transcript and recording.

Enabling the Widget

1. Open the agent you want to enable the widget for in the Agent Editor.
2. Scroll to the Widget section.
3. Toggle the widget to Enabled.
4. Configure the widget settings (see below).
5. Click Save.

Widget Configuration

Primary Color

Set the main color of the widget button and interface elements. Enter a hex color code (e.g., #4F46E5 for indigo) or use the color picker. This should match your client’s brand color.

Position

Choose where the widget appears on the page:

• Bottom Right — The standard position for chat and call widgets. Most visitors expect interactive widgets here.
• Bottom Left — An alternative if the bottom right is occupied by another widget or live chat tool.

Greeting Message

The text shown in the widget bubble before a visitor starts a call. Keep it short and action-oriented:

• “Hi! Click to speak with us.”
• “Need help? Tap to call.”
• “Talk to our AI assistant.”

This message appears as a small tooltip or speech bubble near the widget button.

Custom Avatar URL

By default, the widget shows a generic call icon. You can set a custom avatar by providing a URL to an image (PNG or JPG, recommended 64x64 pixels or larger). This could be:

• Your client’s logo
• A headshot-style avatar for the agent
• A branded icon

Generating the Embed Code

After configuring the widget, BuildVoiceAI generates embed code you can copy and paste into any website.

Option 1: Script Tag

The script tag embeds the widget with a small JavaScript snippet. This is the recommended method for most websites.

<script
  src="https://app.buildvoiceai.com/widget.js"
  data-agent-id="your-agent-id"
></script>

Place this code before the closing </body> tag on any page where you want the widget to appear. The script automatically loads the widget with your configured settings.

Option 2: Iframe

The iframe method embeds the widget as a self-contained frame. Use this if the website restricts external scripts.

<iframe
  src="https://app.buildvoiceai.com/widget/your-agent-id"
  style="position: fixed; bottom: 20px; right: 20px; width: 80px; height: 80px; border: none; z-index: 9999;"
  allow="microphone"
></iframe>

Branding

The widget inherits branding from two sources:

1. Widget-specific config — The primary color, position, greeting, and avatar you set in the widget settings override everything else.
2. Agency branding — If widget-specific settings aren’t provided, the widget falls back to your agency’s brand color and logo from Settings.

For white-label deployments, always configure widget-specific branding to match each client’s website.

Website Compatibility

The widget works on any website that supports JavaScript, including:

• WordPress
• Shopify
• Squarespace
• Wix
• Custom HTML sites
• Single-page applications (React, Vue, Angular)

WordPress

Add the script tag to your theme’s footer:

1. Go to Appearance → Theme Editor (or use a header/footer plugin).
2. Find the footer.php file.
3. Paste the script tag before </body>.

Shopify

1. Go to Online Store → Themes → Edit Code.
2. Open theme.liquid.
3. Paste the script tag before </body>.

Squarespace / Wix

Use the platform’s code injection feature to add the script tag to the site footer.

Visitor Experience

When a visitor interacts with the widget:

1. They see the widget button with your configured position and color.
2. Hovering or tapping shows the greeting message.
3. Clicking opens the call interface with the agent name and a “Start Call” button.
4. After granting microphone access, the call begins.
5. The interface shows a call timer and an “End Call” button.
6. When the call ends, a brief “Thank you” message appears.

Disabling the Widget

To stop the widget from appearing on a website:

1. Open the agent in the Agent Editor.
2. Toggle the widget to Disabled.
3. Click Save.

The widget will stop loading on all pages where the embed code is installed. You don’t need to remove the embed code from the website — the script will simply not render anything when the widget is disabled.