How to add Amabrik to Bolt

Add the Amabrik snippet to a Bolt.new app with a one-line AI prompt or by editing index.html. Step by step, with how to publish and test it.

Amabrik runs on your Bolt app from a single line of code. Bolt.new builds a real project in your browser (usually a Vite plus React app on StackBlitz WebContainers) with an index.html file at the root, so adding Amabrik means getting that one script tag into the <head> of index.html. There’s no CMS, no plugin, and nothing to install inside Bolt.

The fastest way is to ask Bolt’s chat to do it. There’s also a manual edit if you’d rather paste it yourself. Both are below.

What you’ll need

  1. A Bolt.new project you can edit (see the account article if you don’t have one yet).
  2. 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.

Bolt’s chat can edit your files for you. Paste the prompt below into the Bolt chat box, but first replace YOUR_SITE_ID with the value from your snippet:

Add this exact script tag to the <head> of index.html so it loads on every page, and change nothing else: <script async src="https://cdn.amabrik.com/v1/loader.js" data-site="YOUR_SITE_ID"></script>

Bolt will edit index.html and show you the change. Open index.html in the file tree to confirm the tag is inside the <head>, and that nothing else was touched.

If Bolt happens to put the tag somewhere other than the <head>, just tell it: “Move the Amabrik script tag inside the <head> of index.html and leave everything else as is.”

Method B: edit index.html yourself

If you’d rather paste it by hand:

  1. In your Bolt project, open the file tree on the left and click index.html (it’s at the root of the project).
  2. Find the </head> closing tag near the top of the file.
  3. Paste your Amabrik snippet on its own line just before </head>:
<script async src="https://cdn.amabrik.com/v1/loader.js" data-site="YOUR_SITE_ID"></script>
  1. Save the file. Bolt saves as you edit, but a quick Ctrl+S or Cmd+S doesn’t hurt.

Putting it in index.html means it loads on every page of the app, since that one HTML shell serves the whole project.

2. Publish your app

The snippet runs on your live, published site, not only in the Bolt preview. To publish:

  1. Click Publish in the top right of Bolt.
  2. In the publish menu, click Publish again.
  3. Wait about a minute for the deploy to finish.

The first time you publish, Bolt creates a random bolt.host address for your site. You can rename it in the publish menu, or attach your own custom domain on a paid plan. If you instead host with Netlify or export the code, the snippet travels with index.html, so it works the same way.

After the first publish, use the Update button to push any later changes live.

3. Check it’s live

  1. Open your published site (your bolt.host link or your custom domain) 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 in the page.
  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 and loader.js loading, the install is done.

4. Turn on your widgets

The snippet is the connection. Which widgets actually appear is controlled entirely from Amabrik, so you won’t touch Bolt 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 site within seconds. You don’t re-publish in Bolt once the snippet is in index.html.

FAQ

Do I need a plugin or app inside Bolt?

No. Amabrik is a plain script tag in index.html. There’s nothing to install.

The widget shows in the Bolt preview but not on my live site, or the reverse.

Make sure you published (or clicked Update after editing), then reload the live page. If the preview shows it but the published site doesn’t, publish again so the latest index.html goes live.

Will this slow down my app?

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

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

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

I exported my project or moved to Netlify. Does Amabrik still work?

Yes. The snippet lives in index.html, so it stays with the code wherever you deploy it. Just confirm your live domain is set as the site domain in Amabrik.

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.

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