Webflow

Add an AI chatbot to your Webflow site in minutes using the custom code feature.

Method 1: Site-Wide (All Pages)

1. Open Site Settings — In the Webflow Designer, click on the gear icon or go to Site Settings > Custom Code.
2. Paste into Footer Code — In the Footer Code section, paste the following:

<script src="https://webchatagent.com/widget/web-chat-agent.js" async></script>
<web-chat-agent chatbot-id="YOUR_ID"></web-chat-agent>

3. Replace YOUR_ID with your actual Chatbot ID from the WebChatAgent dashboard.
4. Save and Publish — Click Save and then Publish your site. The chat widget will appear on every page.

Method 2: Single Page Only

1. In the Webflow Designer, select the page where you want the chatbot.
2. Open Page Settings (gear icon next to the page name).
3. Scroll down to Custom Code > Before </body> tag.
4. Paste the same code snippet above.
5. Save and Publish.

Method 3: Embed Element

For more control over placement:

1. Drag an Embed element from the components panel onto your page.
2. Paste the code snippet into the embed editor.
3. The widget will render as a floating chat bubble regardless of where the embed is placed.

Finding Your Chatbot ID

Log in to your WebChatAgent dashboard, open your chatbot, and go to the Widget Integration section. Your Chatbot ID is displayed there and can be copied with one click.

Troubleshooting

• Widget not showing in Designer? — Custom code only renders on the published site, not in the Webflow Designer preview. Publish your site and view it live.
• Widget not on all pages? — Make sure you used Site Settings > Custom Code (Method 1), not page-level code.
• Webflow hosting required? — Custom code works on both Webflow-hosted sites and exported code. If you export your site, the code will be included in the export.