1. AI Agent Installation & Integration
AI Agent Customer Support Docs
  • Default module
    • Product
      • Changelog
      • Agent Widget JavaScript SDK
      • Chat Widget Custom CSS Classes
    • AI Agents
      • Create AI Agent
      • Edit AI Agent
      • Delete Agent
    • Leads
      • Lead Settings
      • Lead Report
    • AI Agent Installation & Integration
      • Overview
      • Custom Website
      • WordPress
      • Link WhatsApp with AI Agent
      • Setup New WhatsApp Account
      • Google Tag Manager
      • Shopify
      • Squarespace
      • Wix
      • Webflow
      • Bubble
      • PrestaShop
      • GoDaddy
      • Function Tool Call
    • Billing & Pricing
    • Partner
      • Partner Management
    • Roadmap
      • Upcoming Features
    • Intelligence Settings
      • Intelligence Settings
    • Advance Settings
      • Overview
      • Header & Labels
      • Widget Tabs
      • Lead Capture Form
      • Quick Questions
      • Custom CSS and JS
      • Branding & Tracking
      • Behaviour Settings
      • Consent & Overlay
    • Partner Dashboard
      • How to Create White-Label
      • License Management
    • Message Credits
      • Message Credits
  1. AI Agent Installation & Integration

Webflow

Use this guide to install the AI Agent widget on Webflow.
Copy the Embed Code from your portal as described in Installation Overview.
Two embed methods are supported:
1.
Script-based loader (recommended): Adds an AI Agent bubble. The chat opens in an iframe popover when the visitor clicks the bubble.
2.
Iframe-based embed: Loads the AI Agent directly as an iframe appended to the page body (best for a dedicated page).

Best placement#

Script-based loader: Project Settings → Custom Code → Footer Code (site-wide).
Iframe-based embed: Add only on a specific page using an Embed element.
Important:
The embed code appends to document.body, so Footer Code placement is safest.

Script-based loader (AI Agent Bubble)#

1.
Open your Webflow project.
2.
Go to Project Settings (not Designer).
3.
Open Custom Code.
4.
Paste the Script-based loader code into Footer Code.
5.
Save changes.
6.
Publish to your production domain.

Iframe-based embed (Direct AI Agent Chat)#

This method appends the iframe to the page body and is best used on a dedicated page.
1.
Open Webflow Designer.
2.
Open the page where you want the embedded AI Agent.
3.
Add an Embed element.
4.
Paste the Iframe-based embed code.
5.
Publish.
Notes:
To control size, adjust iframe.style.width and iframe.style.height in the code (example: 600px, 80vh, 100vh).
If you add the iframe embed via an Embed element, it will still append to the page body (because the code uses document.body.appendChild(...)).

Verify installation#

1.
Open the published site in an incognito/private window.
2.
Confirm the bubble or embedded AI Agent loads on the live domain.
3.
Send a test message and confirm replies.

Troubleshooting#

Widget not visible#

Confirm you published to the correct domain (not only a staging URL).
Hard refresh (Ctrl+Shift+R / Cmd+Shift+R).
If using the script-based loader, confirm the code is in Project Settings → Custom Code → Footer Code.
If using the iframe embed, confirm the page is published and the Embed element is present.

Widget visible but not responding#

Check browser console for request errors.
Confirm no security headers, ad blockers, or script blockers are interfering.

Duplicate widget#

Ensure you did not add the code both globally and inside page-level embeds.
Ensure multiple embed elements are not loading the same code.
Modified at 2026-02-19 07:25:12
Previous
Wix
Next
Bubble
Built with