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.
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:
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:
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 by default — it is an embedded element. However, overlay mode can be toggled via the positioning settings if needed. Regardless of mode, be sure to test widget placement thoroughly to avoid layout conflicts or hidden content on your site.
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.
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.
⚠️ 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.
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.
Follow the instructions below to embed your Web Widget into popular website builders:
GoHighLevel (GHL)
Framer
WordPress (Classic & Gutenberg Editors)
WordPress (Elementor)
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:
Enable Developer Mode in Wix
Add a Custom Element
Configure the Custom Element
widget-element
).Set Widget Attributes
widget-key
— your specific widget key.api-key
— your assigned API key.Publish and Test
Shopify
Webflow
Squarespace
Weebly
Duda
ClickFunnels
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.
After confirming the widget container is present in the DOM, manually trigger the widget scan using:
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.
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.
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:
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:
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.
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.
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:
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:
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 by default — it is an embedded element. However, overlay mode can be toggled via the positioning settings if needed. Regardless of mode, be sure to test widget placement thoroughly to avoid layout conflicts or hidden content on your site.
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.
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.
⚠️ 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.
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.
Follow the instructions below to embed your Web Widget into popular website builders:
GoHighLevel (GHL)
Framer
WordPress (Classic & Gutenberg Editors)
WordPress (Elementor)
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:
Enable Developer Mode in Wix
Add a Custom Element
Configure the Custom Element
widget-element
).Set Widget Attributes
widget-key
— your specific widget key.api-key
— your assigned API key.Publish and Test
Shopify
Webflow
Squarespace
Weebly
Duda
ClickFunnels
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.
After confirming the widget container is present in the DOM, manually trigger the widget scan using:
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.
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.
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:
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:
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.