Add the Amabrik snippet to a v0 (Vercel) Next.js app with a one-line AI prompt, or edit app/layout.tsx with next/script. Step by step, with how to test it.

v0 is Vercel’s AI builder (at v0.app, formerly v0.dev). It generates a React and Next.js app with the App Router, Tailwind, and shadcn/ui, and deploys it to Vercel. Amabrik runs on that app from a single line of code. It’s a plain <script async> tag, so there’s no plugin to install and no CMS to configure. You add the snippet so it runs on every page, deploy, and your widgets go live.

The fastest way is to ask v0’s chat to add it for you. There’s also a manual route if you’d rather edit the code yourself.

What you’ll need

A v0 project you can edit (the chat that built your app).
Your Amabrik snippet, which you’ll get in the next step.

1. Get your snippet

Sign in to your Amabrik dashboard at app.amabrik.com.
Open the Install page.
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.

Method A: ask v0’s chat (recommended)

This is the easiest path. You tell v0 in plain language to add the script, and it edits the app for you.

Open your project in v0.app.
In the chat box, paste the prompt below. Replace YOUR_SITE_ID with your real site ID from the dashboard:

Add Amabrik's loader to my app so it runs on every page: put <script async src="https://cdn.amabrik.com/v1/loader.js" data-site="YOUR_SITE_ID"></script> in the document head via the root app/layout.tsx (use next/script with strategy afterInteractive if needed), and change nothing else.

Send it. v0 will edit app/layout.tsx and show you the change.
Review the change, then accept it.

That’s it. Move on to deploying below.

Method B: edit app/layout.tsx yourself

If you’d rather make the change by hand, you edit the root layout. In the App Router there’s no _document file, so the right place for a site-wide script is app/layout.tsx, using Next.js’s Script component.

In v0, open the file app/layout.tsx (the root layout that wraps every page).
At the top of the file, import the Script component:

import Script from "next/script"

Inside the <body> of the RootLayout component, add the loader with your own site ID:

<Script
  src="https://cdn.amabrik.com/v1/loader.js"
  data-site="YOUR_SITE_ID"
  strategy="afterInteractive"
/>

A trimmed example of the whole file:

import Script from "next/script"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.amabrik.com/v1/loader.js"
          data-site="YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Because it’s in the root layout, Next.js loads it on every route and runs it only once, even as visitors move between pages. The afterInteractive strategy loads it after the page becomes interactive, so it doesn’t hold up your content.

2. Deploy

The change only goes live once you publish your app.

In v0, click Deploy (or Publish) to push the latest version to Vercel.
Wait a few seconds for the deploy to finish.
Open your live URL once it’s ready.

If your v0 project is connected to a Git repository, you can also deploy by pushing to your repo, which triggers a Vercel build.

3. Check it’s live

Open your live site in a normal browser tab.
Right click the page and choose View page source, then search (Ctrl+F or Cmd+F) for amabrik. You should see the loader URL on the page.
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 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 don’t go back into v0 to change them.

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

Changes you publish in Amabrik appear on your live site within seconds. No new deploy in v0 is needed once the snippet is in place.

Troubleshooting

The snippet doesn’t appear on my live site. You most likely added it but didn’t deploy. Click Deploy in v0, wait for the build, then reload the live page.

v0 put the script in the wrong file. Ask it again with the prompt from Method A, which names app/layout.tsx so it runs on every page. If it edited a single page or component, that page is the only one with 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.

I see the script twice. You ran both Method A and Method B, or added it in two files. Keep one copy in app/layout.tsx and remove the rest.

FAQ

Do I need a v0 plugin or app?

No. Amabrik is a plain script tag. There’s nothing to install from a marketplace.

Why does v0 use next/script instead of a plain <script> tag?

The snippet itself is a plain <script async> tag. In a Next.js App Router app, next/script is just the standard way to inject that tag into the page head and have it run once across routes. It’s the same loader either way.

Will this slow down my site?

The loader runs after the page becomes interactive (the afterInteractive strategy), so it doesn’t block your content from rendering.

Do I have to redeploy every time I change a widget?

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

Can I add it to one page only?

Use app/layout.tsx for site-wide widgets. If you want Amabrik on a single page, add the Script component in that page’s file instead, but most sites want it everywhere.

How to add Amabrik to v0