Web Widget

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

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, you can customize and deploy the Web Widget by configuring the following settings:

Widget Color Customization — Match the widget’s background color with your website branding.
Widget Size Options — Choose between small, medium, and large widget sizes.
Website Deployment — Specify the domain(s) where the Web Agent will be displayed.
Animation Settings — Enable or disable the “Agent speaking” animation for visual engagement.

Once these settings are configured, a code snippet will be generated for you. This snippet should be embedded directly into your website where you want the widget to appear.

⚠️ Important:
The widget is not an overlay — it is an embedded element. Make sure to place it inside a dedicated section on your page to avoid disrupting your site’s layout.

You be prompted to copy the website integration code after saving and launching the agent:

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 trigger a retroactive price change. The final rate is locked based on the widget’s state at call completion.
This ensures fair, transparent billing whether a user interacts via phone or the embedded widget.

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

You can monitor your remaining credit and the minute equivalent (based on current rate) from the Payments screen.
This view dynamically updates based on whether the Web Widget is enabled.
A tooltip also appears on the Payments and Home screens, explaining how your per-minute rate is determined in real time.

Follow the instructions below to embed your Web Widget into popular website builders:

GoHighLevel (GHL)

Framer

WordPress (Classic & Gutenberg Editors)

WordPress (Elementor)

Wix

Basic Embed (Standard Method)

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

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:

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.

Add a Custom Element

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

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.

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.

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

Webflow

Squarespace

Weebly

Duda

ClickFunnels

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?

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

Configuration

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

What happens if I forget to whitelist the domain?

How do I customize the appearance of the Web Widget?

Usage and Results

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

Does the widget work across all devices?

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

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 hello@thinkrr.ai.

Introduction

Usage

Engagement

Consumption

Overview

Web Widget

Web Widget Usage and Discounted Pricing

How the Discount Works

Real-Time Rate Application

Behavior During Errors

Visibility and Tracking

Deploying the Web Widget: Platform-Specific Guides

Basic Embed (Standard Method)

Embedding the Widget in Wix

Wix Custom Element Code Snippet

Known Limitations

FAQ & Troubleshooting

How to Fix It

General Questions

Configuration

Usage and Results

Introduction

Usage

Engagement

Consumption

​Overview

​Web Widget

​Web Widget Usage and Discounted Pricing

​How the Discount Works

​Real-Time Rate Application

​Behavior During Errors

​Visibility and Tracking

​Deploying the Web Widget: Platform-Specific Guides

​FAQ & Troubleshooting

​General Questions

​Configuration

​Usage and Results

Overview

Web Widget

Web Widget Usage and Discounted Pricing

How the Discount Works

Real-Time Rate Application

Behavior During Errors

Visibility and Tracking

Deploying the Web Widget: Platform-Specific Guides

FAQ & Troubleshooting

General Questions

Configuration

Usage and Results