A lot of Webflow sites share the same story. A designer or agency built it beautifully, handed it over, and moved on to the next client. That's fine until the business needs something added that feels like it requires going back to that person, or finding someone else who knows their way around the Designer.
An AI chat widget shouldn't be that kind of change. Visitors to a Webflow site ask the same questions any business gets: prices, availability, what's included, whether you serve their area. When nobody answers, a polished site turns into a contact form and a wait.
Adding an AI chat widget to a Webflow site with Aiva Chat is a single embed in site-wide custom code. Once it's published, everything the widget knows and does is managed in the Aiva Chat dashboard, so the business never has to reopen the Webflow project to change a price or add a service.
If you only read one section, make it the mistakes: nearly every failed Webflow install comes down to a domain missing from the widget's allowed list.
What is the Aiva Chat Webflow integration?
There's no Webflow app or CMS connector to install. The integration is Aiva Chat's web widget, added through Webflow's own custom code settings. That keeps it simple: one script tag, placed once, with nothing to sync.
Once installed, visitors see a chat bubble. They can type questions, or talk by voice if you turn voice mode on, and the assistant answers from your business information, books appointments into Google Calendar, collects contact details, and hands off to a person when needed.
The split of responsibilities is the important part:
- Webflow handles placement: which pages load the widget.
- Aiva Chat's dashboard handles everything else: design, knowledge, booking, rules, and conversations.
It suits small businesses whose site was built in Webflow, studios and consultants with portfolio sites, and agencies who build Webflow sites for clients and want to offer an AI assistant as a standard add-on.
Because Webflow sites are usually custom-designed, the widget's appearance is fully configurable: colors, font, avatar, header text, size, theme, and corner position. It runs in its own sealed-off container, so Webflow styles and widget styles never collide.
How the Webflow embed works
Step 1: Design the widget in Aiva Chat
In the Widget Builder, choose the assistant that answers, then set the branding to match the site's palette and type. A live preview shows desktop and phone views, which matters for Webflow sites with carefully tuned mobile breakpoints.
Step 2: Allow your Webflow domains
Add the live domain and your staging domain to the allowed websites list. The widget won't load anywhere else, which keeps your assistant from being embedded on sites you don't control.
Step 3: Copy the script
The Install tab gives you a single script tag with your account and assistant IDs filled in. Each assistant has its own script.
Step 4: Paste it into Webflow's custom code
In your Webflow site settings, open the custom code section and paste the script into the before-body-end area. For page-specific placement, use the page's own custom code settings instead. Webflow's developer documentation describes how custom scripts are applied to a page's header or footer.
Step 5: Publish and check
Publish the site, then use the website check on Aiva Chat's Install tab to confirm the page is allowed, and look for the chat bubble on the live site.
Benefits of adding an AI widget to your Webflow site
No designer dependency after launch
After the one-time paste, nothing about the assistant requires opening Webflow. New services, holiday hours, price changes, and rules are dashboard edits in the AI Training Center, applied from the next conversation.
It fits a custom design
Webflow sites tend to have distinctive branding. Matching the widget's colors, font, and avatar takes a few minutes, and our guide to custom branding for the web widget covers what most businesses actually change.
Questions get answered at midnight
A visitor forming a question late at night gets an answer immediately instead of filling in a form. For service businesses, that often means a booked consultation by morning instead of a lead that went cold.
Timing respects the first impression
Portfolio and agency sites are built for a considered first impression, and a pop-up that fires on page load undermines it. You can keep the widget closed until clicked, or open it after a delay you choose.
Clean separation of data
Conversations, bookings, and handoffs are stored on Aiva Chat's side and appear in your dashboard. Nothing is written back into Webflow, so there's no CMS collection filling with chat logs, and removing the widget later leaves nothing to clean up.
Webflow AI widget use cases
Four composite examples of how Webflow owners and agencies tend to use it (not real customers).
The photography studio at midnight
Problem: A visitor asks whether the studio shoots weddings outside the city and what it charges. How Aiva Chat handles it: The widget answers both parts from the studio's typed package details, then books a consultation call into the studio's Google Calendar. Outcome: The owner wakes up to a booked consultation, and nobody touched Webflow.
The agency template
Problem: An agency builds several Webflow sites a quarter and wants to offer an AI assistant on each without custom work. How Aiva Chat handles it: The agency adds a site-wide custom code placeholder to its template. During each build, it pastes the client's own script and adds the client's domains to that client's allowed list. Outcome: The assistant becomes a standard line item, and the client supplies the business knowledge.
The consultant with a CMS-heavy site
Problem: Service details live in CMS collections written as marketing copy. How Aiva Chat handles it: The consultant imports key pages, then types precise entries for what each package includes and costs. Outcome: "What's included in the premium package?" gets an exact answer, not a paraphrase of a hero section.
The domain switch
Problem: A business moves from a webflow.io address to its own domain, and the widget disappears. How Aiva Chat handles it: The owner adds the new domain to the allowed list and runs the website check. Outcome: The bubble is back on the next page load, with no change to the script.
Aiva Chat widget vs. Webflow forms vs. generic chat plugins
| Webflow form | Generic chat plugin | Aiva Chat web widget | |
|---|---|---|---|
| Answers questions immediately | No, waits for a reply | Only with a person online, or canned flows | Yes, from your information |
| Books appointments | No | Rarely | Yes, writes to Google Calendar |
| Matches a custom design | Yes, native | Partly | Yes, fully configurable |
| Updating answers | Not applicable | Edit flows | Edit entries in the dashboard |
| Voice in the browser | No | Rarely | Optional voice mode |
| Same knowledge also answers phone calls | No | No | Yes, if you connect a Twilio number |
| Cost | Included with Webflow | Monthly subscription | From $49 a month; chat replies use your own OpenAI key |
A Webflow form is native, free with your plan, and perfect for people who prefer to write a message. Its weakness is that nothing happens until someone reads it. Keeping a form alongside the widget is a good setup.
Generic chat plugins either need a person online to respond, or run scripted flows that break when a visitor phrases things differently. Many also look visibly bolted on.
The Aiva Chat widget answers immediately from your own information and can book, while staying visually native. The trade-off is that it needs your business facts written down properly, which takes some effort up front. WordPress users get the same pattern; see our WordPress integration guide.
How to add Aiva Chat to your Webflow site
Aiva Chat's dashboard has a six-step onboarding checklist. On a Webflow build, the Webflow-specific work lands in steps 4 and 5 below.
Step 1: Decide the widget's job
Choose whether it should mostly answer FAQs, book appointments, or capture leads, and decide which pages it belongs on. Site-wide is usual, but some portfolio sites prefer pricing and contact pages only.
Step 2: Set up Aiva Chat
Create your account, connect your OpenAI key, and create the assistant. Add your company name and business hours.
Step 3: Teach it the business
Import key pages from the published site, upload PDFs such as a services guide, and type exact entries for packages, prices, and policies. Add rules for anything it should never promise.
Step 4: Design, allow, and embed
Brand the widget, add both your live and staging domains to the allowed list, and paste the script into Webflow's site-wide custom code. Bookings work without a calendar, on your hours and Aiva Chat's own appointment book; connect Google Calendar if you want busy times checked and bookings written there. Our widget setup guide covers every setting.
Step 5: Test on staging, then live
Ask real customer questions on the staging site, check the phone layout, then publish to the live domain and repeat the check.
Step 6: Review conversations
Read web conversations weekly at first, add corrections where answers fell short, and fill gaps in your entries.
Common mistakes when adding a widget to Webflow
Forgetting the staging domain
The widget only loads on allowed domains. Teams test on the webflow.io staging address, see nothing, and assume the install failed. Add the staging domain or a matching wildcard to the allowed list first.
Missing the www version of the live domain
If your site resolves to www.yourdomain.com but only yourdomain.com is listed, the bubble won't appear. List both, or use *.yourdomain.com, and confirm with the website check.
Pasting into the head instead of before the body end
The widget is designed to sit before the closing body tag. Pasting it into the head section can work differently from what's expected. Use the before-body-end area of site-wide custom code.
Relying only on imported CMS pages
Marketing copy is written to persuade, not to answer precisely. If the assistant gives fuzzy answers about packages, type exact entries for them rather than importing more pages.
Assuming custom code works on every Webflow plan
Webflow may require a paid site plan to use custom code. If the custom code settings aren't available, check your plan before troubleshooting anything else.
Best practices for Aiva Chat on Webflow
- Use site-wide custom code unless you have a clear reason to limit pages.
- List every domain the site is served from: staging, live, and www.
- Match the widget to the design system using the site's own colors and type.
- Keep the widget closed until clicked on portfolio-style sites.
- Type exact package details instead of relying on marketing pages.
- One Aiva Chat account per client for agencies.
- Keep a Webflow form for visitors who prefer to write.
Conclusion
For a Webflow site, this is one of the lighter additions you can make. The paste into custom code is done once, and from then on the business owns the assistant's knowledge in Aiva Chat without needing the original designer.
The thing to get right is the allowed-domains list. Staging, the bare domain, the www version, and any future custom domain all need to be on it, or the bubble simply won't appear and the install looks broken. Write that list down before you paste anything.
The second judgement is how much to trust imported pages. Webflow CMS copy is written to sell, so type exact entries for packages and prices even if you import the rest. If you'd like to see how the embed is built, our write-up on building an embeddable chat widget goes under the hood.
Ready to add an AI widget to your Webflow site?
Do the first install on your webflow.io staging address. Brand the widget to the site's palette, allow the staging domain, paste the script before the body end, and ask it the questions your contact form usually gets.
The web widget is on every plan, including the $49 Starter, with chat replies running on your own OpenAI key at OpenAI's rates.
When the staging test looks right, start a 14-day free trial with no card, or book a demo if you're an agency planning to add it to client templates.
Posts from the people building Aiva Chat in Rajkot — how the product works, what we have learned building it, and guides for getting the most out of an AI receptionist.