How to add Amabrik to Framer

Add the Amabrik snippet to a Framer site through Site Settings, Custom Code, Start of head. Works on every Framer plan, including the free .framer.website tier.

Amabrik runs on your Framer site from a single line of code. It’s a plain script tag, not a Framer plugin or code component, so there’s nothing to build in the canvas and nothing to authorize inside Framer. You paste the snippet into your site’s custom code, publish, and your widgets go live.

There’s no CMS to set up, and this works on every Framer plan, including the free .framer.website tier. Plain HTML embeds and custom code are available on all plans. Only React code components and code overrides need a paid plan, and Amabrik doesn’t use those.

This guide walks you through it from start to finish.

What you’ll need

  1. A Framer site you can edit and publish.
  2. Any Framer plan. The free .framer.website plan is fine, because pasting a script in custom code doesn’t require an upgrade.
  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’s custom code

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

  1. Open your site in the Framer editor.
  2. Open Site Settings. You can reach it from the top left, near your site name, or through the settings menu.
  3. Go to the General tab.
  4. Scroll to the Custom Code section.
  5. Paste your Amabrik snippet into the Start of <head> tag field.
  6. The setting saves on its own. There’s no separate Save button to click here.

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

3. Publish your site

  1. In the Framer editor, click Publish (top right).
  2. Confirm the publish for your domain (your custom domain and/or your .framer.website address).
  3. Wait a few seconds for the publish to finish.

Custom code only runs on the published site, never inside the Framer editor preview, so you publish to make the snippet go live.

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 Framer 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 Framer site within seconds. No re-publish in Framer is needed once the snippet is in place.

Troubleshooting

The snippet doesn’t appear on my live site. You most likely added it in Custom Code but didn’t publish the Framer site. Click Publish in the editor, then reload the live page.

I pasted it but nothing happens in the editor preview. Custom code doesn’t run inside the Framer editor. Publish the site and check the live URL instead.

I see the snippet twice in the source. You’ve pasted it more than once, or added it both site-wide and on a single page. Keep one copy, in Site Settings > General > Custom Code > Start of <head> tag, and remove the rest.

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.

FAQ

Do I need a paid Framer plan?

No. Plain custom code and HTML embeds are available on every Framer plan, including the free .framer.website tier. Only React code components and code overrides need a paid plan, and Amabrik uses neither.

Do I need a Framer plugin?

No. Amabrik is a plain script tag you paste into custom code. There’s nothing to install from any plugin store.

Where exactly does the code go?

Site Settings > General > Custom Code, in the Start of <head> tag field. That applies it to every page.

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 Framer every time I change a widget?

No. You publish Framer 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.

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