AI Chatbot answers questions, captures leads, and helps visitors book demos or consultations on your Webflow website — 24/7. Turn interest in your services or products into conversations your team can follow up on.
PetalFlower studio assistant
Hi there 👋
Ask me about delivery, returns or opening hours.
1
Get More Inquiries from Your Webflow Website
Give visitors the answers they need before they contact your business.
Explain your offer — Answer questions about services, features, packages, and pricing.
Guide decisions — Help visitors find a relevant option or understand the next step.
Capture leads — Collect contact details while potential customers are interested.
Stay available 24/7 — Help visitors when your team is busy or offline.
Try AI Chatbot on Your Webflow Website for Free
Enter your domain → Customize your chatbot → Add it to your website.
1. Enter your website
2. Create AI agent
3. Add to website
AI Chatbot Features for Webflow
1.
Automatic setup. Enter your website URL. The chatbot uses accessible content to build its initial knowledge and suggest a role and tone of voice.
2.
Business-specific answers. Explain service packages, product features, or your working process using the information you provide.
3.
Conversation rules. Define how the chatbot talks about your business, recommends options, and handles questions that need a team member’s attention.
4.
Flexible appearance. Match the chatbot’s name, avatar, and colors to your website. Add a greeting and suggested questions that reflect what your visitors might be interested in.
5.
Multilingual conversations. Answer visitors in their language, whether they’re exploring a local service or considering your product from another country.
Train Your AI Chatbot on Webflow Content
Use your published website as a source of answers. Add public URLs, upload files, or write custom Q&A to give the chatbot the details visitors need.
Service and pricing pages — Package options, what’s included, and how to get started.
CMS case studies and portfolios — Your experience, working process, and relevant project examples.
CMS articles and resources — Explanations and practical advice published by your team.
Product and feature pages — Product capabilities, use cases, and differences between options.
Files and custom Q&A — Onboarding steps, consultation details, and answers missing from your website.
Add up to 200 web page URLs. For CMS content, use the published item URLs. When you update a page, use Retrain to refresh its content in the chatbot’s knowledge.
Give visitors a way to act when they find what they’re looking for.
Capture a project inquiry — Collect a name, email, or phone number when someone wants a quote or more information. Keep their details with the conversation so your team understands the request.
Open a relevant page — Show an action button linking to a pricing page, case study, service, or contact form on your Webflow site.
Book a demo or consultation — Connect Calendly or Cal.com so visitors can choose an available appointment time directly in the chat.
Offer human contact — Provide email, phone, or WhatsApp contact when a visitor needs personal advice or wants to discuss a specific requirement.
Follow up during the visit — Send a message after a period of inactivity to ask whether the visitor needs help choosing a package or taking the next step.
Match the chatbot’s colors to your Webflow design and choose its name and avatar to represent your business. Adjust its placement to keep chat accessible alongside your page content. Add a greeting and suggested questions such as “Which plan fits my team?” or “Can I book a demo?” to help visitors start a useful conversation.
Track AI Chatbot Conversations and Leads
See what visitors ask before they submit a brief, request a demo, or choose a service.
Conversations — Read chat histories and summaries to understand customer questions.
Leads — Review contact details with each conversation, so your team can follow up with context.
Analytics — Track chat sessions, messages, and collected leads to understand how visitors use the chatbot.
Review knowledge gaps to find questions your content doesn’t fully answer. Add the missing details to improve future responses.
How to Add an AI Chatbot to Webflow
Follow this quick guide to install your chatbot on a page, in a Collection template, or across your site. You’ll need a Webflow plan that supports custom code. If you need help, our support team offers free installation.
Add the chatbot to a specific Webflow page
1.
Create your chatbot in the intuitive editor and copy its embed code from the AI Chatbot dashboard.
2.
Open the page in Webflow and add a Code Embed element from the Add panel.
3.
Paste the code and click Save & Close.
4.
Publish your changes and open the live page to test the chatbot.
Add the chatbot to a CMS Collection template
Open the relevant Collection page template in the Pages panel and add the installation code in a Code Embed element. Publish your changes to show the chatbot on the item pages that use that template.
Add the chatbot across your Webflow website
For a floating chatbot across the website:
1.
Open Site settings → Custom code.
2.
Paste the installation code into Footer code, and save.
3.
Publish the website to apply the change to live pages.
Tip: Choose the placement that matches where you want to offer help. Our support team can check the setup on desktop and mobile.
One widget, one snippet. Squarespace, Wix, WordPress, Webflow, Shopify, GoDaddy, Elementor, or plain HTML — pick another platform to see how it installs there.
Yes. With AI Chatbot’s free plan, you have access to one chatbot, 50 visitor messages per month, and 200 monthly widget views. There’s no time limit or credit card required. Your Webflow subscription is separate, and installation requires access to custom code.
You can add custom code with a paid Site plan or an eligible paid Workspace plan, including Core, Growth, Freelancer, or Agency. A website using only the free Starter Site and Workspace plans does not have this access. You don’t need to pay for both a Site plan and a Workspace plan just to unlock custom code.
No. Adding the same installation code to a Collection template displays the same chatbot on its item pages. Its knowledge and settings stay managed in AI Chatbot. Template placement alone does not create separate knowledge for each item or automatically train the chatbot on that page.
Yes. After adding or changing the installation code in Webflow, publish the website so the chatbot becomes available on the live website.
Usually, yes. If the installation code remains in your site-wide custom code settings or in the relevant Embed element, the chatbot can continue working after design changes.
No. Configure its knowledge, appearance, and skills in the AI Chatbot dashboard, then paste the generated installation code into Webflow. There’s no custom chatbot code to write. Our support team can help with installation if you’re unsure which placement suits your website.