How to add Amabrik to Lovable

Add the Amabrik snippet to a Lovable site with a one-line AI prompt in the chat, or by editing index.html yourself. Step by step, with how to test it.

Lovable builds a real React and Vite codebase from your chat prompts, so your project has a normal index.html file at the project root. Amabrik runs from a single script tag dropped into that file’s <head>. There’s no CMS, no app to install, and nothing to authorize inside Lovable. Once the tag is in place and you publish, your widgets go live.

The easiest way is to ask Lovable’s own chat to add the tag for you. You can also paste it into index.html by hand. Both routes are below.

What you’ll need

  1. A Lovable 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.

Lovable can edit its own code from a chat message, so you don’t have to open any files. Open your project, then paste this message into the chat. Replace YOUR_SITE_ID with your real site ID from the dashboard first:

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

Lovable will edit index.html and show you the change. Read the diff to confirm it added the tag inside <head> and didn’t touch anything else, then accept it. That’s the whole edit.

A note on the index.html Lovable means here: it’s the one at the project root, not a file inside /src. The prompt is specific enough that Lovable picks the right file, but it’s worth checking in the diff.

Method B: edit index.html yourself

If you’d rather do it by hand, use Lovable’s code view (often called Dev Mode), which lets you open and edit files directly.

  1. In your project, switch to the code view.
  2. Open index.html at the project root (not the one in /src).
  3. Find the closing </head> tag near the top of the file.
  4. Paste your Amabrik snippet on its own line just before </head>.
  5. Save the file.

That puts the snippet in the head of every page, the same as Method A.

2. Publish your site

Editing the code updates your project, but visitors only see the change after you publish.

  1. Click Publish in the top right of your project.
  2. Confirm the publish. Every project gets a free yourapp.lovable.app address, and a custom domain can be connected on a paid plan.
  3. Wait a few seconds for the publish to finish.

If you’ve connected the project to GitHub and deploy somewhere else (for example Vercel or Netlify), publish through that host instead. The snippet travels with your code either way.

3. 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.

4. Turn on your widgets

The snippet is the connection. Which widgets actually appear is controlled entirely from Amabrik, so you never edit Lovable 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. No re-publish in Lovable is needed once the snippet is in place.

FAQ

Do I need to know how to code?

No. Method A is a single chat message. Lovable edits the file for you and you just accept the change.

Which index.html does the snippet go in?

The one at the project root, not the file in /src. The chat prompt targets the right file, and you can confirm it in the diff Lovable shows you.

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

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

The widgets 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