Skip to main content

Web chat setup & usage

The AI web chat widget automatically captures leads from your website and answers visitor questions 24/7. Here's how to set it up and use it effectively.

Prerequisites​

  • Product Required: Conversations AI Standard, Pro or Premium subscription
  • Access: Business App with Conversations enabled
  • Website: Any website where you can add HTML code

Setup process​

Step 1: Open your web chat widgets​

  1. Go to Conversations, then open Settings to reach the Conversations settings page.
  2. On the Web Chat card ("Capture new leads from your website with an AI-assisted chat widget"), click Manage widgets.
  3. The Web Chat configuration page lists all of your web chat widgets, with each widget's Assigned Employees, Status, and Widget type. Click Try it on a widget to preview it before installing.

Step 2: Create a new web chat widget​

  1. On the Web Chat configuration page, click New Web Chat.
  2. Widget name: Enter a unique name to identify this widget internally (usually your domain or the page it's for).
Run more than one widget

You can create multiple web chat widgets and assign a different AI employee to each — for example, a sales widget on your pricing page and a support widget on your help page. To add another, return to the Web Chat configuration page and click New Web Chat again.

Step 3: Assign an AI employee​

The AI employee is the digital teammate that replies to messages sent to this widget. Every web chat widget needs one assigned.

  1. In the AI employee card, click Select employee.
  2. In the Select employee dialog, choose the employee that should handle this widget:
    • Chat Receptionist: the ready-to-use AI employee for capturing leads and answering visitor questions.
    • A custom AI employee: a specialized employee you've built, such as an Inside Sales Representative or AI Support Employee. Custom employees appear in this list once you create them.
  3. Click Ok to assign the employee.
  4. To adjust the assigned employee's knowledge, personality, or capabilities, click Configure on the AI employee card.
One employee per widget

A widget can have only one AI employee assigned at a time, but you can assign the same AI employee to more than one widget. If a widget shows a No assigned employee warning, open it and assign one before installing it on your site.

To build a specialized employee for web chat, see Custom AI Employees.

Step 4: Customize messages​

Configure how visitors interact with the widget:

  • Welcome Greeting (0-70 characters): Appears in chat widget header to encourage engagement
    • Example: "Hi, how can we help you today?"
  • Initial AI Message (up to 600 characters): First message your AI assistant sends. This is automatically turned on and includes a default message along with privacy notice. This can be changed to any message you prefer.
    • Example: "Hi! I'm here to assist with your [service] questions. How can I help you today?"
    • Keep it friendly, specific to your business, and encourage engagement
    • To add a link to the message, use this format: [Link text Here](https://www.example.com)

Step 5: Customize appearance​

Match the widget to your brand in the Appearance section:

  • Primary color: Main widget color (header, branding)
  • Primary text color: Text color for primary elements (Dark or Light)
  • Accent color: Color of the send button and chat bubbles
  • Accent text color: Text color for accent elements (Dark or Light)
  • Web Chat bottom corner position: Show the widget in the Left or Right bottom corner
  • Mobile Call-to-Action Popup: When enabled, the message popup shows on mobile screens for new visitors. When disabled, only the circular chat button appears.

When you're done configuring the widget, click Next to save it.

Step 6: Install on website​

Open the widget from the Web Chat configuration page (click its name, or use the ⋮ menu and choose Embed) to find your installation code. There are two widget types — choose one based on how you want the chat to appear on your site.

Widget types​

Floating chat widget​

The floating widget places a chat button in the bottom corner of every page on your site. Visitors click it to open the chat.

To get the code: open the widget from the Web Chat configuration page, expand the Floating chat widget section, and copy the JavaScript.

Install using the WordPress plugin​

  1. In the Floating Chat Widget section, click Download Plugin to download the installation ZIP.
  2. In your WordPress admin (your-website.com/wp-admin), go to Plugins > Add New Plugin.
  3. Upload the ZIP file you just downloaded.
  4. Activate the plugin.

Your web chat widget will now appear on every page of your website.

Install manually on WordPress (Divi)​

  1. Copy the JavaScript from the Floating Chat Widget section.
  2. In WordPress admin, go to Divi > Theme Options > Integrations.
  3. Paste the code into the Add code to the <head> of your blog section.
  4. Save changes.

Embedded chat widget​

The embedded widget places a fixed chat box directly on a specific page or location on your site, rather than a floating button. Use this when you want the chat to appear inline, such as on a contact page or landing page.

To get the code: open the widget from the Web Chat configuration page, expand the Embedded chat widget section, and copy the JavaScript.

To install the embedded widget:

  1. Copy the code from the Embedded Chat Widget section.
  2. Paste it into the <body> of your webpage, at the exact location where you want the chat to appear.
    • Divi (WordPress): open the page in the Divi Builder > add a Code module > paste the full snippet > Save.
  3. Optionally adjust the size and layout directly in the code:
    • Width: change width: 80% to your preferred width (100% for full width)
    • Centering: keep margin: 0 auto; to center the widget container
    • Height: change height: 600px or remove it to control height with your own CSS
  4. Optionally add other CSS (such as max-width or borders) directly in the container's style="" attribute.

Test Installation: Always verify the widget appears and functions correctly on the live site after installing either widget type.

Widget actions​

When a chat widget is loaded onto a website, you can add widget actions: links that will populate the chat with a message on behalf of visitors. These are great when you want to help visitors engage with your AI Receptionist in a specific way. For example, clicking a button that pre-fills "I want to book an appointment" so your AI Receptionist can start guiding a visitor along that particular workflow.

Under the widget actions section of web chat configuration, you will find the types of actions, implementation options, and instructions for using the code that is generated based on your selections which you can then copy and add to your site. Here is a breakdown of the configuration options:

Select an Action​

  1. Prefill message - Use this option if you want to suggest a message but don't want to force visitors to send it.
  2. Send message - Use this option if you want the message sent to the AI assistant; useful for initiating specific workflows.

Select an Implementation Method​

  1. Anchor link listener - Triggers the action via a URL. Best for direct links, email campaigns, or navigating to a page with the web chat from an external source.
  2. JavaScript API - Triggers the action programmatically. Best for dynamic interactions, custom triggers, or on-page buttons.

Enter a Message​

Enter a message that will be used in selected action when the link is clicked. If left empty, the action will open the Web Chat only.

Code​

The code changes depending on the action, implementation, and message set. You can configure these multiple times to create multiple snippets of code and have many different actions. Instructions for using the code vary depending on implementation method.

  1. For anchor link listener: Use the code in a URL as an anchor link or redirect target. The widget will automatically detect the hash and trigger the action when the page loads or when the hash changes.
  2. For JavaScript API: Use the code in your button's onClick handler or any JavaScript event. The webchatAPI is automatically available once the widget script loads.

Managing conversations​

When AI Assistant hands off to humans​

  • AI assistant captures lead information first (name, phone/email)
  • Team members get notified of new conversations
  • Staff can join conversations through Business App > Conversations
  • Chat history remains available for context

Lead follow-up​

  • New leads automatically appear in your CRM
  • Follow up via SMS (US/Canada) or email
  • Use automations to send immediate responses
  • Set up nurture campaigns for qualified leads

How will I be notified about a new lead?​

When your AI assistant successfully captures a name and contact info, a few things will happen automatically:

  1. A new contact is added to your CRM Contacts, with the captured info: First name, last name, phone number, and email address.
    • If a lead updates their contact info in the AI-assisted web chat (like for example, if they make a mistake), the latest contact info will be updated on the contact automatically.
  2. A "New lead" email notification is sent to you and your team. Make sure you have notifications enabled for new leads.

Common issues and solutions​

Widget Not Appearing

If the Conversations web chat widget does not appear on your site after installation, try these troubleshooting steps:

1. Clear your browser cache​

  • Browser cache: Force your browser to load the newest version of your site.
    • Mac: Shift + Command + R
    • PC: Ctrl + F5
  • Website hosting cache: Clear your website's cache (e.g., use the "Flush Cache" button if available in your website platform).
  • WordPress/Divi cache: If using the Divi theme, go to Theme Options > Builder > Advanced and disable "Static CSS File Generation."
  • Other cache plugins: Temporarily disable any cache plugins and refresh your site.

2. Check your widget code placement​

Ensure the widget installation code is pasted in the correct location:

  • The code must be inside the <head> section of your site's HTML (not the <body> or a widget block).
  • For WordPress, double-check if the plugin is active, or if you pasted the code into the correct theme section.

3. Check your hosting platform for plugin or theme conflicts​

  • Disable other plugins or custom code temporarily to see if something is blocking the widget.
  • If you find a conflict, try re-enabling plugins one by one to isolate the issue.

4. Verify activation​

  • Confirm Conversations AI Pro is active on your account, and the web chat widget is enabled.
AI Assistant Not Responding Accurately
  • Add more knowledge: Train AI assistant with website content and custom Q&A
  • Update business profile: Ensure location, services, hours are current
  • Review conversation logs: Check what questions the AI assistant struggles with
  • Refine initial message: Make it more specific to common visitor questions
Leads Not Converting
  • Improve welcome greeting: Make it more compelling and specific
  • Refine initial AI message: Ask better qualifying questions upfront
  • Adjust AI assistant personality: Match your brand voice
  • Follow up faster: Respond to new leads within minutes, not hours
Poor Visual Integration
  • Adjust colors: Match widget colors to your website branding
  • Test mobile experience: Enable/disable mobile popup as needed
  • Check positioning: Ensure widget doesn't block important content
Team Not Getting Notifications
  • Check team permissions: Ensure your team has access to Conversations
  • Verify notification settings: Review Business App notification preferences
  • Test handoff process: Practice AI assistant-to-human conversation transitions

Best practices​

  1. Start with demo: Always test functionality before installation
  2. Train thoroughly: Add business-specific knowledge before going live
  3. Monitor conversations: Review chat logs weekly to improve AI assistant responses
  4. Respond quickly: New leads expect fast follow-up via SMS or email
  5. Track performance: Use analytics to measure chat-to-lead conversion rates

Configuration tips​

  • Widget Name: Use your domain name for easy identification
  • Welcome Greeting: Keep it short, friendly, and action-oriented
  • Initial AI Message: Be specific about what help you provide and ask qualifying questions
  • Colors: Use your brand colors to integrate with your website
  • Mobile Popup: Enable for service businesses, disable if it might interrupt user experience

The web chat widget works best when properly configured with business-specific information and integrated into your team's workflow.

Additional FAQs​

Can the AI assistant scrape websites for information?

Yes, the AI can be trained on website content to enhance its knowledge base.

Can I upload files like PDFs or DOCs for the AI to learn from?

Yes. You can upload files in a variety of formats to your AI's Knowledge Base, including PDF, DOCX, TXT, CSV, PPTX, XLSX, HTML, Markdown, JSON, and image files (JPG, PNG). You can also scrape website content and add custom text entries.

Why is the AI responding with incorrect or incomplete information?

The information the AI responds to inquiries with is based on the source information it has only. The web chat tool shows you directly inside the Conversations chat record where it got the source information from, like a quick audit. You can then make the change on your website or inside your AI knowledge base. The most common culprit is old or incorrect information found on the website.

How long does training the AI take?

Training duration varies based on website size but typically takes between 1-5 minutes.

Is there a limit to the number of AI responses?

No, unlimited AI responses are included with Conversations Pro.

What languages does the AI support?

The AI assistant can respond in over 40 languages, including English, Spanish, French, German, Italian, Turkish, Polish, Ukrainian, Russian, Japanese, and Chinese.

Why won't the chat widget let me type certain letters or the "Space" key when trying to type?

Some plugins can interfere with the ability to type in the widget because they "hijack" that key for their own functions.

For example, website admins will have trouble typing messages into the web chat widget when the WordPress Jetpack plugin is enabled because it hijacks some of the keys to open and close their own chat functions. Disabling the JetPack plugin will restore the function of these keys.

Smooth scrolling website features can also interfere with the ability of your website visitors to type the 'space' key with the web chat widget. If you have the Divi theme on a WordPress website, you can disable smooth scrolling by going to Divi > Theme Options and disabling the Smooth Scrolling functions.

How do I remove the Google reCAPTCHA badge that's blocking my chat widget?

When reCAPTCHA is being used on a website form, this badge will appear in the bottom right of a webpage – which could be in the way of the web chat widget.

You can hide the badge completely on your website with some custom CSS; just make sure to follow Google's required alternative ways to inform visitors that reCAPTCHA is being used.

Read more: https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed

To hide the reCAPTCHA badge, go to your website CSS editor:

  • Log in to your WordPress dashboard
  • Go to Appearance » Customizer
  • Click Additional CSS
  • Add the snippet:
.grecaptcha-badge {
  visibility: hidden !important;
}
  • Save and preview your website.