Skip to content

OfferBanner for Webflow

Webflow has no announcement bar. Give your site one that never needs a republish.

Webflow gives you a Navbar, a Slider, a Lightbox and Tabs, but no announcement bar. So you build one: a Div Block, a Symbol so it appears on every page, and a close button wired to an interaction. That works, but every change to the price is an edit and a Publish, and someone has to be awake at midnight to unpublish the sale.

The alternative is one line of custom code, pasted once, after which you schedule the banner from a dashboard. Webflow allows custom code, which is more than most site builders do.

01 — Install

Four steps, about two minutes

  1. Get your site code

    Sign up, add your site’s address, and the dashboard hands you a twelve-character site code and the line below with the code already in it. The code belongs to the host, not to a banner — you paste it once and it carries every campaign you ever run on that domain.

  2. Open Custom code in Webflow

    In the Designer, open Site settings (older projects call it Project settings) and pick the Custom code tab. There are two boxes: Head code and Footer code.

  3. Paste into Footer code

    Footer code is the box labelled “before </body> tag”. Paste the line there and hit Save changes.

    <script src="https://offerbanner.com/embed.js" data-banner="YOUR_SITE_CODE" async></script>

    Replace YOUR_SITE_CODE with the code from your dashboard. Head code works too, but the footer is the right place: the tag is async, so it never sits in front of your first paint.

  4. Publish

    Custom code only reaches visitors on a published site. Hit Publish, then load your live URL — the banner appears as soon as a campaign is scheduled. This is the last time you publish for a promotion.

Webflow publishes custom code only on sites with a paid Site plan. That is Webflow’s gate, on every custom code box they have — if your project is still on a free .webflow.io staging URL, the line saves but is never published.

02 — After the paste

What you can do once the tag is in

Everything below happens without touching Webflow again. The tag only reads your settings; what it shows is decided in the dashboard.

A calendar of scheduled campaigns

Each site has a schedule: entries that name a banner, a date window, and optionally the countries it runs in. Schedule Black Friday in September and it starts and ends on its dates. There is nothing to remember at midnight and nothing to unpublish.

Real discount codes, in your own Stripe account

Connect a restricted Stripe key and the code on the banner is a real Stripe promotion code created in your account, instead of a string you typed in two places and hoped matched. The key can create coupons and nothing else: it cannot charge anyone, read your customers or move money, and you can revoke it without the banner stopping. Codes created this way keep working if you leave OfferBanner, because they are in your Stripe account. Without Stripe, type a code in by hand; the banner accepts any code.

Run it from an AI agent

OfferBanner is an MCP server. Point Claude, or any MCP client, at https://offerbanner.com/mcp, approve it once in a browser tab, and your agent gets the same tools the dashboard uses: create the banner, schedule it, create the discount code, read the statistics. The agent door itself is included in the free plan; the tools that create a campaign window or a discount code need Pro, and say so when they are called.

Views and clicks

Counted per banner, so you can see whether a banner did anything.

03 — Checking

Check that the tag is installed

The dashboard fetches your published homepage and looks for the tag, which is the same thing curl would tell you. If the tag is there and nothing shows, that is almost always correct: no campaign is scheduled for right now.

To see a draft on the real site before anyone else does, add #ob-preview to your URL — https://yoursite.com/#ob-preview. The preview is not cached, not counted in your stats, and invisible to everyone without that fragment.

04 — Questions

Common questions

Do I need a paid Webflow plan?

For the site-wide install, yes — Webflow only publishes custom code on sites with a paid Site plan, and that is Webflow’s rule, not ours. On a free .webflow.io staging site the Custom code box saves your line and then does not publish it, which is easy to misdiagnose the first time. The Embed element has the same restriction. If your site is already live on a custom domain, you are past this already.

Can I put it on one page instead of the whole site?

Yes. Drop an Embed element (Add panel → Advanced) at the bottom of the page, paste the same line, and publish. It is the same tag, but it only exists on the page you put it on. For a banner on every page, use the Footer code box.

Will it slow the site down?

The tag is async, so it never blocks rendering, and the script is about 14KB gzipped, served from the edge. It is one request that your page does not wait for.

Does it work with Webflow Ecommerce?

The banner does — it is plain HTML on your published site, on any Webflow page. Automatic discount codes are a Stripe feature: we create real Stripe promotion codes in your Stripe account. Webflow Ecommerce keeps its own discounts, so for a Webflow store, create the discount in Webflow and type that code onto the banner by hand. The banner accepts any code you give it.

What does it look like on the free plan?

The same, plus a small “Powered by OfferBanner” badge on the banner. The free plan runs one banner at a time per site, on as many sites as you like: it shows to everybody from the moment the page loads, and it starts and ends on whatever dates you book it for. Country targeting, triggers, several campaigns at once and Stripe codes made for you are Pro — you can build them on Free and they wait on your calendar until you pay. The pricing page lists both plans in full.

Put a banner on your Webflow site

Free plan · No card