Back to all posts

AIVA + Webflow: shipping an AI widget without touching code

Most Webflow sites were built once by a designer who's since moved on. Adding AIVA doesn't mean tracking them down — paste one embed, and it's live.

AP
Arjun Patel
Co-founder

A lot of Webflow sites share the same story: a designer or agency built it, handed it over, and moved on to the next client. That's usually fine — until the business needs something added that feels like it requires going back to that person, or finding someone else who can edit Webflow.

An AI widget shouldn't be that kind of change. AIVA's Webflow setup is a single embed, not a redesign request.

Where it goes

Webflow's custom code panel takes an embed the same way it takes any third-party script — paste it into the page settings or site-wide custom code, before the closing body tag, and publish. No new page needed, no changes to the site's structure.

Site-wide custom code is the more common choice, since it means the widget shows up on every page without adding it individually — useful for a business where a visitor might land on a service page, a pricing page, or the homepage first, and should see the same widget regardless of which one. Page-level embeds work too, if you'd rather the widget only appear on specific pages, like a booking or contact page, and stay off the rest of the site.

Matches the design that's already there

Because Webflow sites tend to be more custom-designed than average, the widget is meant to sit inside that design rather than fight it — color, corner rounding, and position are all configurable from the AIVA dashboard, so it doesn't look like a plugin dropped in from somewhere else. What most businesses actually adjust is usually just enough to match the site's palette, not a full redesign of the widget itself.

Where visitors actually see it

Placement is one decision; timing is another. A widget that pops open the instant a visitor lands feels like an interruption on a portfolio or agency site built around a slower, more considered first impression. AIVA's triggers let it wait — for time on page, for a specific section being scrolled to, or for a specific page like pricing or contact — so it shows up when a visitor's actually forming a question, not the moment the page loads.

What it does once it's published

Same as anywhere else AIVA runs: it answers questions about the business from what you've configured, books appointments if there's a calendar connected, and hands off to a person when a conversation needs one. The Webflow embed is purely about getting the widget onto the page — everything it actually does is configured once, in the dashboard, and applies wherever the widget shows up.

Because that split exists — placement in Webflow, behavior in the dashboard — updating what AIVA knows later doesn't mean going back into the Webflow project at all. Changing your hours or adding a new service is a dashboard edit, not a republish.

In practice that looks like: a photography studio's Webflow site gets a question at midnight — "do you shoot weddings outside the city, and what's the rate" — and the widget answers both parts from what the studio configured, then offers to book a consultation call against the studio's actual calendar. Nobody touched Webflow to make that happen; it was set up once, weeks earlier.

What Webflow's CMS doesn't need to do

Worth clarifying, since Webflow sites often lean heavily on CMS collections for content: AIVA doesn't crawl your Webflow CMS automatically to learn about your business. What it knows comes from what you tell it directly in the AIVA dashboard — services, hours, pricing, policies — kept separately from whatever's published on the site itself. That's a deliberate choice, not a missing feature: a CMS collection is written for how a page reads, not necessarily structured the way a conversation needs answers. Telling AIVA directly means the answer to "what's included in the deluxe package" is exact, not inferred from marketing copy.

Where the conversation data goes

Same separation as the widget's placement and configuration: conversations happen inside the widget, but nothing from them is written back into your Webflow project. There's no CMS collection filling up with chat logs, and nothing in Webflow's own data that grows because AIVA is running. Every conversation, booking, and hand-off is stored on AIVA's side and shows up in your dashboard — the same as it would if the exact same widget were embedded somewhere other than Webflow.

That also makes removing it simple, if a client relationship ends or a site gets rebuilt on a different platform later: delete the embed, and there's nothing left behind in the Webflow project to clean up.

Good for agencies too

If you build and maintain Webflow sites for multiple clients, the embed is identical for each one — the same snippet, a different workspace ID. Rolling AIVA out across a handful of client sites doesn't mean custom work per site. An agency can add the snippet to a project template once, and every new client site built from that template ships with the placement already done — only the workspace ID and the dashboard configuration change per client.

That also makes it easy to offer as a standard line item rather than a custom quote. Since the technical work is identical regardless of the client's industry, the actual time investment per site is almost entirely in the dashboard configuration — what the business does, its hours, what it books — which is the client's own knowledge to provide, not additional design or development work on the agency's side.

Common questions from Webflow users

A few things that come up specifically because of how Webflow works. Staging and a published domain are treated the same by the embed — it's just a script tag, so it runs wherever the page is served from, staging included, which is useful for testing before a client-facing launch. Webflow's own form blocks and AIVA's booking flow don't conflict; they're separate systems, and plenty of sites keep a simple contact form for general inquiries while AIVA handles the actual back-and-forth of finding a slot and confirming it. And a custom domain change doesn't affect the widget at all, since the snippet isn't tied to a specific URL.

Setup

Copy the embed code from your AIVA dashboard, paste it into Webflow's custom code settings, and publish. The widget configuration — what it knows, what it can book — lives in the dashboard, separate from the Webflow project itself.

Who this is for

Small businesses and agencies running on Webflow who want a widget that looks native to a custom design, set up without opening a code editor. For an agency, it's also a reasonable thing to include by default on every new project — a five-minute add rather than a feature clients have to specifically ask for. If your business runs WordPress instead, the WordPress integration works the same way, script tag and all — the platform changes, the setup pattern doesn't.

Compare it with the general web widget setup, see how the embed itself works under the hood in three lines of code, check current usage on pricing, or start free and try the embed on your own Webflow site. The rest of what AIVA connects to is on the integrations page, with full detail in the docs.

Share
AP
Written by
Arjun Patel
Co-founder

FAQ

Common questions.

No — site-wide custom code in Webflow adds it once and it shows up on every page. Page-level embeds are also an option if you'd rather it only appear on specific pages.

No. What AIVA knows comes from what you tell it directly in the AIVA dashboard, kept separate from whatever's published on the site — a CMS collection is written for how a page reads, not structured the way a conversation needs answers.

Yes — it's a script tag, so it runs wherever the page is served from, staging included, which makes it easy to test before a client-facing launch.

No, they're separate systems. Plenty of sites keep a simple contact form for general inquiries while AIVA handles the back-and-forth of finding and confirming a booking.

Yes — the embed is identical per site, just a different workspace ID, so it can be added to a project template and reused across every new client build.

No — the snippet isn't tied to a specific URL, so a domain change doesn't affect it.

No — hours, services, and pricing are dashboard edits, not Webflow changes. The embed only needs republishing if you're removing or repositioning it.

Like this? Get more.

One email a month. Engineering deep-dives, product launches, customer stories. No fluff.

4,200+ subscribers. Unsubscribe anytime.