Web Widget

Deploy your AI Web Agent on your website and connect call data into your workflows with webhooks. This guide covers how to embed the web widget across popular web editors and set up webhook integrations for seamless data logging.

Overview

The AI Web Agent Widget allows you to embed your inbound AI assistant directly onto your website, giving visitors the ability to engage with your trained agent through a sleek, customizable widget. Paired with Webhook Support, you can automatically log call details and transcripts into your workflows (such as GoHighLevel), enabling deeper insights and automation based on your customer interactions.

This guide walks you through:

• How to configure and deploy your AI Web Agent widget
• Embedding the widget across common website editors
• Setting up webhook integration to log call data

Web Widget

The AI Web Widget is a small, interactive assistant that lives directly on your website, embedded into your page. Think of it as a digital concierge — it allows your site visitors to engage directly with your trained inbound AI agent through a chat-like experience, without needing to pick up the phone or send an email.

In this context, the widget acts as the front-end interface for your AI Agent. Whether it’s answering questions, qualifying leads, or booking appointments, the Web Widget provides a seamless way for your customers to interact with your AI, right where they already are — on your website.

💡 Why use a Web Widget?
Embedding the AI agent directly onto your site makes it easy for prospects to engage without friction. It boosts response rates, improves customer experience, and ensures your AI assistant is always available to support your visitors.

Unlike traditional pop-up overlays, this widget is fully embedded into your page layout. This means you need to dedicate space for it within your site’s design to avoid disrupting other page elements.

Once your Inbound Agent is trained and enabled for Web deployment, you’ll unlock a new Web Agent tab. This is where you’ll customize and configure your widget, preview its appearance, and generate the embed code for your website.

Web Widget Configuration

1. Web Widget Style

   • Select Primary Color – Set the base color of your widget to match your website branding.
   • Theme Selection – Choose between:
     • Light Theme
     • Dark Theme
   • Idle Image – Choose a preset icon that appears when the agent is idle.
   • Speaking Image – Choose a preset icon to display while the agent is speaking.
   • Speaking Animation Toggle – Enable or disable animation that plays when the agent talks.

   
2. Widget Size

   • Choose from three preset widget sizes:
     • Small – 120x120px
     • Medium – 220x220px
     • Large – 350x350px

   
3. Advanced Settings

   • Placement on the Page
     • Embedded – The widget is placed inside the page layout (default)
     • Overlay – The widget floats as a bubble and expands on click
   • Justification
     • Left
     • Center
     • Right
   • Enable Text Capabilities (Overlay Mode Only)
     • Text Title – Max 16 characters
     • Subtext – Max 23 characters
     • Both fields support whitespace and special characters
     • Tab spaces are not allowed
     • Character countdown indicators are shown next to each field
   • Reset to Default – Reverts all fields and visuals to the default configuration

   
4. Website Targeting

   • Enter the domain(s) where the Web Agent should be published
   • Only whitelisted domains will allow the widget to render
   • Be sure to include variations like www.domain.com and domain.com if both are in use

   

Once these settings are configured and saved, a code snippet will be generated. You must embed this snippet directly into your website where the widget should appear.

⚠️ Important:
The widget is embedded by default, but overlay mode can be toggled on for floating behavior. Be sure to test both versions to ensure your site layout is not disrupted.

You will be prompted to copy the integration code after saving and launching the Web Agent:

Web Widget Usage and Discounted Pricing

Using the AI Web Widget consumes minutes from your credit balance, just like inbound phone calls. However, when the Web Widget is actively deployed on your website, it also unlocks a discounted per-minute pricing rate.

How the Discount Works

The system operates on a dynamic, credit-based billing model. Instead of buying a set number of minutes, you purchase credits in USD (e.g., 50, 100), and your available minutes are calculated in real time based on your current per-minute rate.

• If the Web Widget is active at the time of the call, your usage is billed at a discounted rate of $0.16/min.
• If the Web Widget is not active, usage is billed at the standard rate of $0.18/min.
• The billing rate applied is determined at the end of the call, based on whether the Web Widget is active or not.

⚠️ Note: The Web Widget does not affect your dollar credit balance directly. Instead, it affects how many minutes you can get for your available credit, based on the applicable rate at the time of usage.

Real-Time Rate Application

• Pricing logic is evaluated per call, not globally.
• Toggling the Web Widget during a call does not change the rate mid-call.
• The final rate is locked based on the widget’s state at call completion.

Behavior During Errors

If the system cannot determine your Web Widget’s status (due to a connection or sync issue), the platform defaults to the standard rate of $0.18/min. Fallback messages may be shown to inform you of this default behavior.

Visibility and Tracking

• Monitor your credit balance and real-time minute equivalent from the Payments screen
• Tooltips on the Payments and Home screens explain your current rate

Deploying the Web Widget: Platform-Specific Guides

GoHighLevel (GHL)

1. Navigate to Sites → Funnels & Websites and choose Websites or Funnels.
2. Select or create a page.
3. Click Edit → Add Element → Custom HTML, then drag the Custom HTML Block where you want the AI Web Agent.
4. Paste the AI Web Agent code snippet.
5. Publish and test the page.

Framer

1. Open your Framer project and select the page where the agent should appear.
2. Click Insert → Embed and position the embed block.
3. Paste the AI Web Agent snippet inside the embed window.
4. Click Save & Publish.

WordPress (Classic & Gutenberg Editors)

1. Navigate to Pages in the WordPress dashboard.
2. Select the page for the Web Agent.
3. In the Classic Editor → switch to Text (HTML) mode and paste the snippet where desired.
   In the Gutenberg Editor → add a Custom HTML Block and paste the snippet.
4. Click Update/Publish.

WordPress (Elementor)

1. Open the page in Elementor Editor.
2. Drag an HTML Widget to the desired section.
3. Paste the AI Web Agent snippet.
4. Click Update.

Wix

Basic Embed (Standard Method)

1. Open Wix Editor and select the target page.
2. Click Add (+) → Embed → Embed Code.
3. Choose Embed HTML and paste the widget snippet.
4. Click Update, position the widget, and publish the page.

Embedding the Widget in Wix

Wix has unique limitations when embedding custom code, especially when using preview mode or the Wix Editor. Follow this updated method to properly embed and render your web agent in Wix:

1. Enable Developer Mode in Wix

   • Open your Wix site in the editor.
   • From the top menu, enable Dev Mode to access advanced custom code options.
2. Add a Custom Element

   • Navigate to Add > Embed Code > Custom Element.
   • Create a new custom element for your widget.
3. Configure the Custom Element

   • Set the Tag Name (example: widget-element).
   • Upload your widget JavaScript file (see code snippet below).
   • Assign this uploaded file as the source for your custom element.
4. Set Widget Attributes

   • Apply the required attributes inside the Custom Element settings:
     • widget-key — your specific widget key.
     • api-key — your assigned API key.
   • These keys are the same ones you would use in a standard widget embed.
5. Publish and Test

   • Publish your site.
   • Open the live site (not preview mode) to verify the widget is rendering properly.
   • ⚠ Note: The widget will not render correctly inside Wix’s Preview Mode or Editor sandbox — this is a known platform limitation.

Wix Custom Element Code Snippet

class Widget extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    const script = document.createElement("script");
    script.src = "https://d2cqc7yqzf8c8f.cloudfront.net/web-widget-v1.js";

    script.onload = () => {
      window.widgetLib.scanWidgets();
    };

    document.head.appendChild(script);
  }
}

customElements.define("widget-element", Widget);

Known Limitations

• Preview Mode: Widget will not render properly in Preview Mode due to Wix sandbox restrictions.
• Editor View: Widget may not render inside the Wix Editor while editing pages.
• Always test the widget on the live published version of your site.

Shopify

1. Navigate to Online Store → Pages.
2. Select the page where the Web Agent should appear.
3. Click Edit HTML and paste the snippet.
4. Save and refresh to confirm placement.

Webflow

1. Open your Webflow project and go to the desired page.
2. Click Add (+) → Embed to add an Embed Code Block.
3. Paste the snippet inside the block.
4. Click Save & Close, then Publish.

Squarespace

1. Navigate to Pages in your Squarespace dashboard.
2. Select the desired page.
3. Click Edit and add a Code Block.
4. Paste the snippet into the Code Block and click Apply.
5. Save and publish.

Weebly

1. Open your Weebly site editor and choose the target page.
2. Drag an Embed Code element into the desired section.
3. Paste the AI Web Agent snippet.
4. Click Publish.

Duda

1. Open your Duda website editor and go to the correct page.
2. Use Widgets → HTML Widget and drag it to the placement area.
3. Paste the snippet into the HTML field.
4. Click Save & Publish.

ClickFunnels

1. Open your ClickFunnels editor and select the funnel step (page).
2. Click Add New Element → Custom HTML.
3. Paste the AI Web Agent snippet into the custom HTML block.
4. Click Save & Preview.

FAQ & Troubleshooting

SPA Frameworks (React, Vue, etc.)

If you’re embedding the Web Widget into a Single Page Application (SPA) such as a site built with React, Vue, or Angular, the widget may fail to appear.

This often occurs because the widget script loads before the container <div> is rendered in the DOM — a common behavior in SPAs that use client-side routing and delayed rendering.

How to Fix It

After confirming the widget container is present in the DOM, manually trigger the widget scan using:

window.widgetLib.scanWidgets();

For React apps, calling this inside a useEffect() hook after the component mounts typically resolves the issue:

This ensures the widget properly loads in dynamic environments.

General Questions

What is the AI Web Widget and how does it work?

The AI Web Widget is an embedded digital assistant that lives directly on your website. It allows visitors to engage with your trained inbound AI agent through a chat-like experience, helping them ask questions, book appointments, or request callbacks—all without leaving your site.

Why should I use the Web Widget instead of a pop-up or overlay?

Unlike traditional pop-ups or overlays, the Web Widget is fully embedded within your page layout. This provides a more seamless and consistent user experience, avoids disrupting your page design, and encourages more natural engagement from visitors.

Configuration

How do I whitelist my website for the widget to work properly?

During widget configuration, you must enter the domain(s) where you want the Web Widget to appear. This ensures that the widget only renders on authorized websites and prevents unauthorized use.

What happens if I forget to whitelist the domain?

If your website domain is not properly whitelisted, the widget will not load or display on your site. Make sure to enter the correct domain(s) in the widget configuration panel before deploying the snippet.

How do I customize the appearance of the Web Widget?

The widget appearance can be customized through the configuration panel. You can adjust:

• Widget size (small, medium, large)
• Background color to match your branding
• “Agent speaking” animation toggle for visual engagement

Usage and Results

Where do I place the code snippet for the Web Widget?

Once configuration is complete, AVA generates a code snippet. You must paste this snippet directly into the HTML of your website where you want the widget to appear. Placement guidance for specific platforms like Wix, GHL, WordPress, Shopify, and others is provided in this guide.

Does the widget work across all devices?

Yes. The AI Web Widget is responsive and designed to work across desktop, tablet, and mobile devices, ensuring a consistent experience for all users.

What should I do if the widget isn't rendering on Wix during editing or preview?

Due to how Wix handles domain sandboxing, the widget may not render properly in the Wix Editor or Preview mode. To resolve this:

• Temporarily whitelist filesusr.com in your widget settings.
• Remove filesusr.com from the whitelist after your site is published to maintain security.

---

For additional questions or guidance, use our Virtual Support Agent, available 24/7 at thinkrr.ai/support.

If you need further assistance, visit our help site at help.thinkrr.ai or submit a Support Ticket. You can also reach us directly at [e-mail].