Skip to main content
The chat widget provides your visitors with cutting-edge multimodal AI assistance - they can type, speak, or even share images, all in one seamless conversation.
The Answering Agent chat widget brings next-generation conversational AI to your website. This isn’t just another chatbot - it’s a multimodal AI assistant that can see, hear, and respond in real-time. Your visitors can switch between typing and speaking mid-conversation, share images for visual assistance, and get natural, context-aware responses. The widget uses the same AI conversation engine as your phone calls, SMS, and email. It reads the same business knowledge, settings, and eligible integrations, so customers get consistent answers across every channel.

​
Quick Start

Open Dashboard > Team Settings > Website Chat to customize the greeting, quick replies, and install snippet. Website Chat setup page Add the chat widget to your website with just two lines of code:
Replace YOUR_TEAM_ID with your team ID from the Answering Agent dashboard. The chat.js loader loads /embed.css automatically, so you do not need to add a separate stylesheet tag. Existing snippets that load https://answeringagent.com/widget.js remain supported. New installs should use chat.js.

​
Dashboard Setup

  1. Open Dashboard > Team Settings > Website Chat.
  2. If Website Chat is not active, choose Activate Add-On and complete the billing flow.
  3. Review the greeting and quick replies customers will see.
  4. Copy the chat.js snippet.
  5. Paste the snippet into your website before the closing </body> tag, or use your site builder’s custom code area.
  6. Send a test message from the website and confirm the conversation appears in Dashboard > Conversations with the Website Chat filter applied.
If your team already has website chat conversations, the filtered inbox opens normally. Use Setup & Instructions from the inbox when you need to revisit the install snippet or widget settings.

​
Features

Multimodal Conversations

Users can type, speak, and share images - all in the same conversation

Real-Time Voice

Natural, interruption-aware voice conversations with ultra-low latency

Visual Understanding

AI can see and understand images shared during the conversation

Seamless Mode Switching

Switch between text and voice mid-conversation without losing context

​
Why Multimodal Matters

Traditional chatbots force users into a single mode of communication. Our multimodal AI adapts to how your users want to interact:
  • Shopping: “Show me shoes like these” [uploads photo] → AI analyzes the image and suggests similar products
  • Support: Start typing a question, then switch to voice to explain a complex issue
  • Accessibility: Users can choose their preferred communication method based on their needs or situation
  • Natural Flow: Just like human conversation, users can point, show, speak, or type as needed

​
Installation

​
Basic Installation

Add the chat widget to your website:

​
Site Builder Installation

If your website builder only lets you add a script tag, add the team ID directly to the chat.js script:
This uses the same chat widget as the basic installation. The script creates the widget container automatically when one is not already present.

​
With Customization

​
Configuration

​
Required Configuration

The only required configuration is your team ID:

​
Customization Options

You can customize the widget’s appearance using data attributes on the container div:

​
Widget Size

Control the widget size:
  • data-variant - Widget size ("tiny", "compact", "full")

​
Visual Customization

Control the widget’s visual appearance:
  • data-avatar-image-url - Custom avatar image URL
  • data-avatar-orb-color-1 - Primary orb gradient color (hex)
  • data-avatar-orb-color-2 - Secondary orb gradient color (hex)

​
Complete Example

Here’s a fully customized widget:

​
How It Works

  1. Widget Initialization: The widget fetches your team’s AI agent configuration and prompts
  2. Conversation Start: When a visitor starts chatting, Answering Agent creates a dashboard conversation for that website session
  3. AI Processing: Messages are processed using your team’s custom AI agent, business knowledge, and eligible integrations
  4. Data Persistence: The conversation is saved to your dashboard and extracted after the thread goes quiet

​
AI Capabilities

The chat widget uses the same AI agent as your phone system, so it can:
  • Answer business questions using your custom knowledge base
  • Book appointments through your integrated scheduling system
  • Access customer data from your CRM integrations
  • Create tasks and follow-ups in your connected systems
  • Provide quotes and pricing information
Website chat uses the same integration framework as phone calls, but channel policy still controls which actions are safe for chat. Actions that need user approval are confirmed in the widget UI before they run.

​
Conversation Extraction

Website chat conversations are extracted after 3 minutes of inactivity. Answering Agent then creates dashboard tasks, unanswered questions, handoff details, and follow-up context from the thread. The extraction job runs every 5 minutes, so tasks usually appear shortly after the quiet window has passed. For a full overview of how the same AI conversation engine works across phone, website chat, SMS, and email, see AI Conversations.

​
Data & Privacy

  • Anonymous Conversations: Chat conversations don’t require visitor registration
  • Conversation History: All conversations are saved and accessible in your dashboard
  • Secure Integration: The widget uses secure public endpoints - no API keys are exposed
  • Team Isolation: Each team’s widget is completely isolated and secure

​
Multimodal Use Cases

​
Customer Support

  • Users can screenshot error messages and share them directly
  • Switch to voice when typing becomes cumbersome
  • AI can guide users visually: “Click the button that looks like this…”

​
E-commerce

  • “Find me a dress like this one” with photo upload
  • Voice shopping: “I need a gift for my mother’s birthday”
  • Visual product search and comparison

​
Real Estate

  • Share property photos for instant analysis
  • Voice tours: “Tell me more about the kitchen”
  • Mixed mode inquiries combining photos and questions

​
Healthcare

  • Share symptoms visually when relevant
  • Voice for sensitive discussions
  • Text for precise medical history

​
Troubleshooting

​
Which Installation Method Should I Use?

​
Widget Not Appearing

  1. Check team ID: Ensure you’ve replaced YOUR_TEAM_ID with your actual team ID from the dashboard
  2. Check container: Verify the <div id="answering-agent-chat"> element exists in your HTML, or use the site builder installation with data-team-id on the script tag
  3. Check console: Look for error messages in the browser console (press F12)
  4. Check addon status: Ensure the chat widget addon is enabled for your account
  5. Check setup status: Ensure Website Chat is active in Team Settings and the team has an active phone number for conversation ownership
  6. Contact support for CSP issues: If your site blocks the script with Content Security Policy errors, contact support so we can help configure an approved installation

​
Error Messages

If you see error messages in the bottom-right corner of your page:
  • “Chat widget addon is not enabled”: Contact support to enable the chat widget addon
  • “Chat widget is not configured”: Website Chat setup needs to be completed in Team Settings
  • “No active phone number found”: Add an active phone number to your team

​
Conversation Not Saving

  1. Verify your team has an active phone number configured
  2. Check that the phone number status is ‘active’ in your dashboard
  3. Ensure the chat widget addon is enabled for your account

​
Support

Contact our support team at support@answeringagent.com.