How to add Amabrik to Webflow

Add the Amabrik snippet to Webflow through Site settings, Custom code, Head code. Step by step, with the paid Site plan requirement and how to test it.

Amabrik runs on your Webflow site from a single line of code. It’s a plain script tag, not a Webflow App, so there’s no app slot to install and nothing to authorize inside Webflow. You paste the snippet into your site’s head code, publish, and your widgets go live.

This guide walks you through it from start to finish.

What you’ll need

  1. A Webflow site you can edit and publish.
  2. A paid Webflow Site plan (Basic or higher). The free Starter Site plan cannot publish custom code, so the snippet won’t run until you upgrade. More on this below.
  3. Your Amabrik snippet, which you’ll get in the next step.

1. Get your snippet

  1. Sign in to your Amabrik dashboard at app.amabrik.com.
  2. Open the Install page.
  3. Copy the snippet shown there. It looks like this, with your own site ID in place of YOUR_SITE_ID:
<script async src="https://cdn.amabrik.com/v1/loader.js" data-site="YOUR_SITE_ID"></script>

Always copy the exact snippet from the dashboard. The data-site value is what ties the loader to your account and your widgets.

2. Add it to your site head code

This adds Amabrik to every page of your Webflow site at once.

  1. Open your site in the Webflow Designer.
  2. Go to Site settings. You can reach it from the Designer’s left toolbar (the gear or settings icon), or from your Webflow Dashboard by clicking the three dots on the site and choosing Settings.
  3. Open the Custom code tab.
  4. Find the Head code field (it’s labeled as the code added inside the <head> tag).
  5. Paste your Amabrik snippet into that field.
  6. Click Save changes.

Saving is not the same as publishing. The snippet won’t be on your live site until you publish in the next step.

A note on plans

Webflow only lets you publish custom code on a paid Site plan (Basic or above). On the free Starter plan, the Custom code tab is visible but the Save button is disabled, so the snippet can’t go live. If you’re on Starter, upgrade the site to a paid Site plan first, then come back and save the snippet. If you’re already on a paid plan, you’re set.

3. Publish your site

  1. In the Webflow Designer, click Publish (top right).
  2. Choose your domains (your custom domain and/or the webflow.io staging domain) and confirm.
  3. Wait a few seconds for the publish to finish.

Custom code only runs on the published site, never inside the Designer preview, so publishing is required every time you change the snippet.

4. Check it’s live

  1. Open your published site in a normal browser tab.
  2. Right click the page and choose View page source, then search (Ctrl+F or Cmd+F) for amabrik. You should see your snippet inside the <head>.
  3. Or open your browser’s developer tools, go to the Network tab, reload the page, and look for loader.js loading from cdn.amabrik.com.

If you can see the snippet in the source and loader.js loading, the install is done.

5. Turn on your widgets

The snippet is the connection. Which widgets actually appear is controlled entirely from Amabrik, so you never touch Webflow again to change them.

  1. Back in your Amabrik dashboard, open Widgets.
  2. Create or enable the widget you want (banner, cookie consent, popup, forms, chatbot, reviews, and so on).
  3. Save and publish the widget in Amabrik.

Changes you publish in Amabrik appear on your live Webflow site within seconds. No re-publish in Webflow is needed once the snippet is in place.

Troubleshooting

The snippet doesn’t appear on my live site. You most likely saved in Site settings but didn’t publish the Webflow site. Click Publish in the Designer, then reload the live page.

The Save button is grayed out in Custom code. Your site is on the free Starter plan, which can’t publish custom code. Upgrade to a paid Site plan (Basic or higher), then save the snippet.

I added it to one page but want it everywhere. Page settings custom code applies to that single page only. For site-wide widgets, use Site settings > Custom code > Head code instead, then remove any per-page copy so it isn’t loaded twice.

Widgets still don’t show after the snippet is live. Open your Amabrik dashboard and confirm the widget is enabled and published. Also confirm your live domain is set as the site domain in Amabrik, since the loader only serves your config to a matching domain.

I see the snippet twice in the source. You’ve added it in both Page settings and Site settings (or pasted it twice). Keep one copy, in Site settings > Head code, and remove the rest.

FAQ

Do I need a Webflow App?

No. Amabrik is a plain script tag you paste into your head code. There’s nothing to install from the Webflow Apps marketplace.

Can I use Amabrik on the free Webflow plan?

You can build and save the snippet, but you can’t publish custom code on the free Starter Site plan, so the widgets won’t run. You’ll need a paid Site plan (Basic or higher).

Will this slow down my site?

The loader is loaded with the async attribute, so it doesn’t block your page from rendering. It downloads in the background while the rest of your site loads.

Do I have to re-publish Webflow every time I change a widget?

No. You publish Webflow once to add the snippet. After that, you manage and publish widgets entirely from the Amabrik dashboard, and they update on your live site within seconds.

Should I use site-wide head code or per-page code?

Use site-wide Head code in Site settings so your widgets work on every page. Use per-page code only if you deliberately want Amabrik on a single page.

Last updated June 22, 2026

Want us to install it for you?

Open the Install page in your dashboard and use the Request Installation tab. Our team sets it up for you.

Open Install