Skip to content
New

Your dashboard is here — every conversation, every lead it captured, and what people keep asking about.

Take a look →

How to Add an AI Chatbot to Webflow

Let visitors ask questions while exploring your Webflow website. AI Chatbot can explain your services, point people toward relevant pages, and collect inquiries when they’re ready to get in touch.
PetalFlower studio assistant

Hi there 👋

Ask me about delivery, returns or opening hours.

Write your message...
1

Create your chatbot and copy its code

Place a conversation window within your content or add a floating launcher that stays accessible across your site.

Custom code is available with a paid Site plan or a Core, Growth, Agency, or Freelancer Workspace plan. A site using only the free Starter plans won’t have the code access needed for this installation.

You’ll also need permission to edit custom code and publish the website.

Open the AI Chatbot editor and enter your website address. Review the information collected during setup, add missing details, and try questions your visitors are likely to ask.

Select how you want to display the conversation:

  • Embedded chat window: sits inside a section of your page.
  • Floating chatbot: opens when someone clicks the chat launcher.

Set the appearance, save your chatbot, and copy its complete installation code from the dashboard.

Add an embedded chat to your page

  1. Open your site in Webflow. Select the page where you want the conversation to appear.

  2. Find Code Embed. Open the Add (+) panel and drag a Code Embed element into the intended section.

  3. Insert the chatbot code. Paste the complete embedded chat snippet into the code editor.

  4. Save the element. Click Save & Close.

  5. Publish the page changes. Click Publish, select the intended domains, and choose Publish to Selected Domains.

A script-based embed may appear as a placeholder in the Designer. Use Preview with custom code enabled, or visit the published page, to see the working chatbot.

Add a floating chat across your website

Use Webflow’s site-wide code settings to make the launcher available without adding an element to every page.

  1. Open Site settings. From your Webflow dashboard, open the site’s settings.

  2. Select Custom code. Locate the Footer code field.

  3. Paste the complete snippet. Add your floating chatbot installation code, keeping any existing code intact.

  4. Save changes.

  5. Publish to your chosen domains.

Add a floating chat to selected pages

For page-specific placement, follow the Code Embed instructions above using your floating chatbot code.

The element contains the installation snippet, while the layout you selected in AI Chatbot controls the launcher.

Repeat on any additional pages where you want chat available. Remove an existing site-wide installation first if you’re switching to selected pages only.

Test the chatbot on your published website

Open the published URL in a private browser window. Start a conversation, follow a suggested link, and test any contact or booking actions you configured.

Confirm that:

  • Visitors can send messages and receive answers.
  • The chatbot appears on the intended pages.
  • The embedded window fits its section.
  • The launcher leaves navigation, forms, and cookie controls accessible.
  • Links and action buttons work as expected.
  • The conversation is comfortable to use on a phone.

Try questions that reflect a visitor’s decision, e.g. “What’s included in this package?” or “How can I arrange a consultation?”

If an answer needs more detail, update the relevant information in AI Chatbot and test again.

Get help with your Webflow installation

Free installation assistance is available. Send the support team your website address and describe the placement you want. For an embedded chat, include the page URL and the section where it should appear.