WebChatAgent Logo

Add an AI Chatbot to Webflow

Webflow

Add an AI chatbot to your Webflow site in minutes using Webflow's Custom Code feature. You paste a short snippet once, publish, and the chat bubble appears on your live site. Use the site-wide method to cover every page; use the per-page method if you only want it on one page.

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>
  1. Replace YOUR_ID with your actual Chatbot ID from the WebChatAgent dashboard.
  2. 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 assistant, and go to Channels → Chat widget. Expand Show installation details and click Copy code. The snippet already contains your Chatbot ID, so paste the whole thing instead of typing the ID.

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.