Voice & Chatbot (Web Agent)

Add AI-powered chat and voice conversations to any website — no coding required.

Overview

The Call Agent AI Voice & Chat Widget lets you embed your AI assistant directly on your website so visitors can chat or talk to your business instantly.

Available as a WordPress plugin or universal embed code, the widget works on virtually any platform — including Shopify, Wix, Squarespace, Webflow, and custom sites.

Once installed, visitors can:

Chat with your AI assistant in real time
Start voice calls directly from their browser (no phone number required)
Get instant answers from your knowledge base
Experience the same AI quality as phone calls — directly on your website

This guide covers setup, configuration, customization, and billing.

Requirements

Before installing the widget, ensure you have:

Requirement

Details

Account

Call Agent AI account (trial or paid)

Assistant

At least one assistant created

API Token

Found in Account Settings

Website

Any site that supports plugins or custom code

HTTPS

Required for voice calls (microphone access)

CORS

Your domain must be added to Allowed Origins

Call Agent AI provides two widget formats depending on your use case.

Widget

Best For

Key Features

Chat & Voice Widget

Support & sales

Floating button · Chat + Voice

Voice Button Widget

Lead capture & CTAs

Voice-only · Centered button · 7-min limit

Log in to your Call Agent AI dashboard
Go to Assistants
Select an assistant
Click Settings (gear icon)
Open Integration Settings
Select Platform Integration Guides

Result: You’ll see widget options and platform-specific setup instructions.

Floating corner widget
Supports chat and browser-based voice calls
Ideal for customer support and sales

Voice-only experience
Centered call-to-action button
7-minute call limit with countdown and wrap-up prompts
Ideal for consultations and bookings

Select your widget to continue.

Choose how visitors interact with your AI.

Mode

Experience

Both

Chat + Voice

Chat Only

Text chat only

Call Only

Voice calls only

This is controlled in the embed code:

data-feature-mode="both"
data-feature-mode="chat_only"
data-feature-mode="call_only"

4. Add Your Domain to CORS (Required)

Your widget will not work until your site is approved.

In Integration Settings, locate Allowed CORS Origins
Add your domain (example):
```
https://yourwebsite.com
```
Click Add
Repeat for subdomains or staging environments

Formatting Rules

Valid

Invalid

https://example.com

example.com

https://www.example.com

https://example.com/

http://localhost:3000

localhost:3000

5. Install on WordPress (Recommended)

Option A: Plugin Installation

Log in to WordPress Admin
Go to Plugins → Add New
Search Call Agent AI
Click Install → Activate
Open Settings → AI Call Agent
Enter:
- API Token
- Assistant ID
Configure:
- Widget position
- Feature mode
- Enable widget
Click Save

Result: The widget appears on your site immediately.

Option B: WordPress Manual Embed

Add this before </body> in your theme:

<link rel="stylesheet" href="https://admin.callagentai.com/widget/ai-call-widget.css">
<script src="https://admin.callagentai.com/widget/ai-call-widget.js"></script>

<div id="ai-call-widget"
  data-api-token="YOUR_API_TOKEN"
  data-assistant-id="YOUR_ASSISTANT_ID"
  data-position="bottom-right"
  data-feature-mode="both">
</div>

WordPress Shortcode

To show the widget on specific pages only:

[ai_call_agent_widget assistant_id="YOUR_ASSISTANT_ID"]

6. Install on Any Website (Universal Embed)

Add the embed code before </body> on any platform:

<link rel="stylesheet" href="https://admin.callagentai.com/widget/ai-call-widget.css">
<script src="https://admin.callagentai.com/widget/ai-call-widget.js"></script>

<div id="ai-call-widget"
  data-api-token="YOUR_API_TOKEN"
  data-assistant-id="YOUR_ASSISTANT_ID"
  data-position="bottom-right"
  data-feature-mode="both">
</div>

<link rel="stylesheet" href="https://admin.callagentai.com/widget/ai-voice-button.css">
<script src="https://admin.callagentai.com/widget/ai-voice-button.js"></script>

<div id="ai-voice-button"
  data-api-token="YOUR_API_TOKEN"
  data-assistant-id="YOUR_ASSISTANT_ID"
  data-button-text="Talk to AI"
  data-button-color="#1a1a2e"
  data-text-color="#ffffff"
  data-accent-color="#6c5ce7"
  data-position="center">
</div>

7. Platform-Specific Placement

Platform

Location

Shopify

theme.liquid → before </body>

Wix

Settings → Custom Code (Body End)

Squarespace

Code Injection → Footer

Webflow

Project Settings → Footer Code

BigCommerce

Script Manager

React / Next.js

Custom component

Vue / Nuxt

Client-side mount

Angular

Global component

Setting

Options

Position

Bottom/Top · Left/Right

Mode

Chat, Voice, or Both

Customize directly in the dashboard:

Button text
Position
Colors
Accent animations
Live preview before copy

9. Billing Overview

Voice Calls

Account

Usage

Trial

15 total minutes

Paid

Unlimited · billed per minute

Chat

Account

Usage

Trial

10 conversations

Paid

Based on plan

Voice Button Special Rule

7-minute max per call
Timer + verbal warnings
Automatic wrap-up

Chat and voice are billed separately.

10. Supported Features

The widget supports everything your assistant supports:

Knowledge base
SMS triggers
Email triggers
Calendar booking
Zoho CRM
Multilingual voice
Call logs & transcripts

Testing

Desktop

Open your site
Click the widget
Test chat and/or voice
Allow microphone access
Verify responses

Mobile

Open site on phone
Tap widget
Test responsiveness
Rotate screen

Troubleshooting

Code placed before </body>
Correct API Token & Assistant ID
Domain added to CORS
Cache cleared

Voice Not Working

HTTPS enabled
Microphone allowed
Modern browser used

Chat Issues

Session expired (20 min)
Trial limits reached
Knowledge base missing content

Quick Reference

Credentials

Item

Location

API Token

Account Settings

Assistant ID

Assistant Settings / URL

JavaScript API

AiCallWidget.toggleWidget();
AiCallWidget.startChat();
AiCallWidget.startCall();
AiCallWidget.cleanup();

Summary

The Call Agent AI Voice & Chat Widget brings your AI assistant directly onto your website — with zero friction and full control.

Key Takeaways

Works on WordPress, Shopify, Wix, Webflow & more
Chat, voice, or both — your choice
No phone numbers required
Same AI quality as real calls
Separate billing for chat & voice
Free trial included

PreviousTest Your Agent NextUniversal Embed

Last updated 3 days ago

Voice & Chatbot (Web Agent)

Overview

Requirements

Widget Types

1. Access Widget Setup

2. Choose Your Widget Type

Option A: Chat & Voice Widget

Option B: Voice Button Widget

3. Configure Feature Mode (Chat & Voice Widget)

4. Add Your Domain to CORS (Required)

Formatting Rules

5. Install on WordPress (Recommended)

Option A: Plugin Installation

Option B: WordPress Manual Embed

WordPress Shortcode

6. Install on Any Website (Universal Embed)

Voice Button Widget Embed

7. Platform-Specific Placement

8. Widget Customization

Chat & Voice Widget

Voice Button Widget

9. Billing Overview

Voice Calls

Chat

Voice Button Special Rule

10. Supported Features

Testing

Desktop

Mobile

Troubleshooting

Widget Not Showing

Voice Not Working

Chat Issues

Quick Reference

Credentials

JavaScript API

Summary

hashtagOverview

hashtagRequirements

hashtagWidget Types

hashtag1. Access Widget Setup

hashtag2. Choose Your Widget Type

hashtagOption A: Chat & Voice Widget

hashtagOption B: Voice Button Widget

hashtag3. Configure Feature Mode (Chat & Voice Widget)

hashtag4. Add Your Domain to CORS (Required)

hashtagFormatting Rules

hashtag5. Install on WordPress (Recommended)

hashtagOption A: Plugin Installation

hashtagOption B: WordPress Manual Embed

hashtagWordPress Shortcode

hashtag6. Install on Any Website (Universal Embed)

hashtagVoice Button Widget Embed

hashtag7. Platform-Specific Placement

hashtag8. Widget Customization

hashtagChat & Voice Widget

hashtagVoice Button Widget

hashtag9. Billing Overview

hashtagVoice Calls

hashtagChat

hashtagVoice Button Special Rule

hashtag10. Supported Features

hashtagTesting

hashtagDesktop

hashtagMobile

hashtagTroubleshooting

hashtagWidget Not Showing

hashtagVoice Not Working

hashtagChat Issues

hashtagQuick Reference

hashtagCredentials

hashtagJavaScript API

hashtagSummary

Overview

Requirements

Widget Types

1. Access Widget Setup

2. Choose Your Widget Type

Option A: Chat & Voice Widget

Option B: Voice Button Widget

3. Configure Feature Mode (Chat & Voice Widget)

4. Add Your Domain to CORS (Required)

Formatting Rules

5. Install on WordPress (Recommended)

Option A: Plugin Installation

Option B: WordPress Manual Embed

WordPress Shortcode

6. Install on Any Website (Universal Embed)

Voice Button Widget Embed

7. Platform-Specific Placement

8. Widget Customization

Chat & Voice Widget

Voice Button Widget

9. Billing Overview

Voice Calls

Chat

Voice Button Special Rule

10. Supported Features

Testing

Desktop

Mobile

Troubleshooting

Widget Not Showing

Voice Not Working

Chat Issues

Quick Reference

Credentials

JavaScript API

Summary