Site-wide widgets on Webflow
Webflow separates page-level custom code from site-level custom code, and a floating widget belongs in the site-level one: Site Settings > Custom Code > Footer Code. That field is injected before the closing body tag of every published page, including CMS collection pages, which is exactly the coverage a chat launcher or an announcement bar needs. Two properties of that field catch people out. It only runs on a paid Site plan — the free `.webflow.io` staging domain strips custom code entirely, so testing there proves nothing. And nothing in Webflow's custom-code fields takes effect until you press Publish; saving the setting is not enough, and the Designer canvas never runs it at all.
Build and style the widget in the Zyff widget builder, then follow the Webflow steps below to put it on every page.
How to add a site-wide widget to Webflow
Build the widget and copy the code
Set the widget up in any Zyff builder and copy the embed code — one <div> and one <script> tag. Keep both lines together.
Open Site Settings > Custom Code
From the Designer, open the site's settings (or go to your dashboard and choose Site Settings on the project), then the Custom Code tab. Note this is SITE settings, not Page settings — page-level code covers one page only.
Paste into Footer Code
Put the snippet in the “Footer Code (before </body> tag)” field, not the head field. Footer code loads after your content, so the widget never delays your hero image. Click Save.
Publish the site
Custom code is applied at publish time. Click Publish and choose your domain — and choose a real one: the free .webflow.io subdomain does not run custom code, so publishing only to staging will look like a failure.
Check a CMS page too
Site-wide footer code reaches Collection pages as well as static ones, which is normally what you want. Load one and confirm, since a widget that appears on your static pages and not your blog would be the one thing worth catching before launch.
Webflow-specific things worth knowing
Custom code needs a paid Site plan
Site Settings custom code does not run on the free .webflow.io domain. If the widget is missing on staging, that alone is the reason — there is nothing to debug until the site is on a paid plan with a real domain.
Nothing applies until you publish
Saving the Custom Code field changes the setting, not the live site. Every change here needs a publish, and forgetting is the most common reason an edit “did not work”.
The Designer canvas never runs it
Custom code and Embed elements do not execute inside the Designer. You will see a placeholder or nothing at all. Judge the widget from the published site.
There is a 10,000-character cap per field
Webflow limits each custom-code field. A Zyff snippet is three lines, so this is not a constraint here — but it is worth knowing if you are stacking several scripts into the same field.
Site code, not page code
Page Settings has its own Before </body> field that covers exactly one page. For a floating widget that should be everywhere, that is the wrong field — and pasting it into several pages is how you end up with the widget mounting twice on one of them.
Style the wrapper, not the widget
The widget paints into a shadow root, so your Webflow class styles do not reach inside it. That is deliberate — it is also what stops your global button styles from mangling the widget. Set colours and sizing in the Zyff builder instead.
Widgets that belong on every page
Frequently asked questions
How do I add custom code to every page in Webflow?
Site Settings > Custom Code > Footer Code, then publish. That field is injected before the closing body tag of every published page, including CMS collection pages.
Why doesn't my code run on the .webflow.io site?
Webflow strips custom code on the free staging subdomain. It only runs on a paid Site plan published to a real domain, so staging is not a valid test of whether the widget works.
I saved the code and nothing changed.
Saving the setting is not publishing. Custom code is applied when the site is published, so every change needs a publish before it reaches the live site.
Should I use Site Settings or Page Settings?
Site Settings for a floating widget, since it should be on every page. Page Settings covers one page only, and pasting the same snippet into multiple pages risks the widget mounting twice where they overlap.
Can I restyle the widget with my Webflow classes?
No, and that is intentional. The widget renders inside a shadow root, which is what keeps your site's global styles from breaking it. Set its colours, size and typeface in the Zyff builder.
Does it work on CMS collection pages?
Yes. Site-wide footer code reaches collection pages as well as static ones. Load one after publishing to confirm, since that is the page type most often forgotten in testing.