# AdGrove: consolidated public documentation

Generated from AdGrove's canonical documentation records. Source of truth: https://adgrove.io

# Install AdGrove on your website

AdGrove is a rewarded video ad network. Publishers add one script tag and one gate
element; viewers choose to watch a short ad that always plays to its final frame,
then the gated content unlocks.

Canonical page: https://adgrove.io/docs/install

## The installation, end to end

1. Create a free AdGrove publisher account.
2. Register your website in AdGrove.
3. Verify that you own the domain, with a meta tag in the site head or a TXT record added at your domain provider.
4. Create a placement, which is the ad slot your earnings are attributed to.
5. Add the AdGrove player script to your site and gate the content or action you want to reward.
6. Test the gate on your published site: the ad plays to the very last frame, then the content unlocks.
7. Watch impressions and earnings appear in your AdGrove dashboard.

## The universal snippet

```html
<!-- 1. Load the AdGrove player once per page -->
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>

<!-- 2. Gate whatever the viewer wants to reach -->
<adgrove-gate>
  <button type="button">Watch a short ad to continue</button>
</adgrove-gate>
```

## The unlock event

```javascript
document.addEventListener('adgrove-unlock', (event) => {
  // The ad played to the end. Reveal the content or run the action.
  const { receipt, impressionId } = event.detail;
  document.getElementById('premium-content').style.display = 'block';
});
```

## Verification

Meta tag:

```html
<meta name="adgrove-site-verification" content="YOUR_VERIFICATION_TOKEN" />
```

Or, when the head cannot be edited, a TXT record on the host
`_adgrove-verify` containing the value shown in your AdGrove dashboard. Add that record
wherever the domain's DNS is managed, normally the domain registrar or DNS host rather
than the website builder.

## Full platform guides

- [Custom HTML](https://adgrove.io/docs/install/custom-html) (Markdown: https://adgrove.io/docs/install/custom-html.md): Yes. This is the simplest AdGrove installation: one script tag before the closing body tag and the gate markup wherever you want the reward button.
- [Framer](https://adgrove.io/docs/install/framer) (Markdown: https://adgrove.io/docs/install/framer.md): Yes. AdGrove installs on Framer through Project Settings, Custom Code, with the gate added as an Embed component on the page.
- [Hostinger](https://adgrove.io/docs/install/hostinger) (Markdown: https://adgrove.io/docs/install/hostinger.md): Yes. On Hostinger Website Builder AdGrove goes in the builder's custom code settings, and on Hostinger hosting with your own site you add it directly to your HTML or CMS.
- [Lovable](https://adgrove.io/docs/install/lovable) (Markdown: https://adgrove.io/docs/install/lovable.md): Yes, and AdGrove runs a dedicated programme for Lovable builders. Ask Lovable to add the player script to index.html and render the gate in a component.
- [Next.js](https://adgrove.io/docs/install/nextjs) (Markdown: https://adgrove.io/docs/install/nextjs.md): Yes. Load the AdGrove player with next/script using the afterInteractive strategy, then render the gate inside a client component.
- [React](https://adgrove.io/docs/install/react) (Markdown: https://adgrove.io/docs/install/react.md): Yes. Add the AdGrove player script to index.html or load it from a component, then render the gate element in your JSX.
- [Shopify](https://adgrove.io/docs/install/shopify) (Markdown: https://adgrove.io/docs/install/shopify.md): Yes, on storefront pages. AdGrove installs by editing theme.liquid, and can gate blog articles, product pages and custom pages. Shopify checkout pages cannot be customised this way.
- [Squarespace](https://adgrove.io/docs/install/squarespace) (Markdown: https://adgrove.io/docs/install/squarespace.md): Yes, on Squarespace plans that include Code Injection. The AdGrove player goes in the Footer injection field and the gate goes in a Code Block on the page.
- [Webflow](https://adgrove.io/docs/install/webflow) (Markdown: https://adgrove.io/docs/install/webflow.md): Yes. AdGrove installs on Webflow through Site settings, Custom code, with the gate added as a Code Embed element. Custom code requires a paid Webflow site plan.
- [Wix](https://adgrove.io/docs/install/wix) (Markdown: https://adgrove.io/docs/install/wix.md): Yes. AdGrove works on Wix sites on a paid (upgraded) plan, using Wix Custom Code for the player and the Advanced SEO panel or Custom Code for the verification meta tag.
- [Wix Studio](https://adgrove.io/docs/install/wix-studio) (Markdown: https://adgrove.io/docs/install/wix-studio.md): Yes. AdGrove installs on Wix Studio through the site dashboard Custom Code panel, the same way as Wix, with Studio's own menu paths.
- [WordPress](https://adgrove.io/docs/install/wordpress) (Markdown: https://adgrove.io/docs/install/wordpress.md): Yes. AdGrove installs on WordPress with a header and footer snippet plugin, a Custom HTML block, or a small addition to the theme through the wp_head hook.

## Shorter platform guides

- [Angular](https://adgrove.io/docs/install/angular) (Markdown: https://adgrove.io/docs/install/angular.md): Yes. Add the AdGrove player script to index.html and render the gate in a component with CUSTOM_ELEMENTS_SCHEMA.
- [Astro](https://adgrove.io/docs/install/astro) (Markdown: https://adgrove.io/docs/install/astro.md): Yes. Add the AdGrove player script to your base layout and render the gate in a page or component.
- [Base44](https://adgrove.io/docs/install/base44) (Markdown: https://adgrove.io/docs/install/base44.md): Yes, where the app allows custom code or an HTML embed. Add the AdGrove player script to the page shell and render the gate in an embed.
- [Bolt](https://adgrove.io/docs/install/bolt) (Markdown: https://adgrove.io/docs/install/bolt.md): Yes. Bolt generates standard web projects, so add the AdGrove player script to index.html and render the gate in a component.
- [Carrd](https://adgrove.io/docs/install/carrd) (Markdown: https://adgrove.io/docs/install/carrd.md): Yes, on Carrd Pro. Embed widgets and custom code are Pro features, so a free Carrd site cannot run the AdGrove player.
- [Gatsby](https://adgrove.io/docs/install/gatsby) (Markdown: https://adgrove.io/docs/install/gatsby.md): Yes. Add the AdGrove player script with the Gatsby Script component and render the gate in a React component.
- [Nuxt](https://adgrove.io/docs/install/nuxt) (Markdown: https://adgrove.io/docs/install/nuxt.md): Yes. Register the AdGrove player through app.head in nuxt.config, or with useHead, then render the gate in a component.
- [Replit](https://adgrove.io/docs/install/replit) (Markdown: https://adgrove.io/docs/install/replit.md): Yes. Replit apps are ordinary web apps, so add the AdGrove player script to your HTML template and render the gate in your markup.
- [SvelteKit](https://adgrove.io/docs/install/sveltekit) (Markdown: https://adgrove.io/docs/install/sveltekit.md): Yes. Add the AdGrove player script to src/app.html and render the gate in a route or component.

## No guide for your platform?

https://adgrove.io/docs/install/other



---

# How to install AdGrove on Custom HTML

> Official AdGrove installation guide for plain HTML and static websites: the script tag, the gate element, the unlock event and domain verification.

Canonical page: https://adgrove.io/docs/install/custom-html
Last reviewed: 2026-08-31
Also known as: plain HTML, static site, hand-coded website, HTML and CSS

To install AdGrove on a plain HTML site, add the verification meta tag to the head, add the AdGrove player script just before the closing body tag, and put the gate markup where the unlock button should appear. No build step and no dependencies are involved.

## Does AdGrove work with Custom HTML?

Yes. This is the simplest AdGrove installation: one script tag before the closing body tag and the gate markup wherever you want the reward button.

## What you need before installing

- An AdGrove publisher account. Creating one is free.
- Your website registered in AdGrove, so AdGrove can issue the site-specific values used below.
- A placement created for that website, which is where your ad slot settings and earnings live.
- Access to the part of your website where custom code or a meta tag can be added.

## How the AdGrove integration works on Custom HTML

The AdGrove player is a single external JavaScript file. Loading it registers the gate element and the player UI.

The gate is a custom element. When a viewer activates it, the player takes over the screen, plays the ad to its last frame, and then dispatches an unlock event.

You decide what unlocking means: reveal a hidden section, start a download, enable a button. Listen for the unlock event and do whatever your page needs.

## Installation steps for Custom HTML

### 1. Add the AdGrove verification meta tag to the head

Paste the AdGrove verification meta tag inside the head of every page you want AdGrove to serve on, or at minimum on the homepage so verification can pass.

Verification meta tag:

```html
<meta name="adgrove-site-verification" content="YOUR_VERIFICATION_TOKEN" />
```

### 2. Add the AdGrove player script before the closing body tag

Load the player at the end of the body so it never blocks rendering. The async attribute is already set for you.

AdGrove player script:

```html
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>
```

### 3. Add the gate where the reward button belongs

Paste the gate markup into the page. Anything you want revealed after the ad goes inside the gated container.

Gate markup:

```html
<!-- 1. Load the AdGrove player once per page -->
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>

<!-- 2. Gate whatever the viewer wants to reach -->
<adgrove-gate>
  <button type="button">Watch a short ad to continue</button>
</adgrove-gate>
```

### 4. Handle the unlock in your own code, if you need to

For anything beyond revealing markup, listen for the adgrove-unlock event. It fires only after the ad has completed.

Unlock handler:

```javascript
document.addEventListener('adgrove-unlock', (event) => {
  // The ad played to the end. Reveal the content or run the action.
  const { receipt, impressionId } = event.detail;
  document.getElementById('premium-content').style.display = 'block';
});
```

## Where your real values come from

- `YOUR_WEBSITE_API_KEY`: Issued per website when you register that website in AdGrove. It identifies the site the impression belongs to and is safe to appear in your page source.
- `YOUR_PLACEMENT_KEY`: Issued per placement. It tells AdGrove which ad slot on your site served the impression, so earnings are attributed correctly.
- `YOUR_VERIFICATION_TOKEN`: Issued when you add a website and shown on that website in your AdGrove dashboard. It proves you control the domain and is used once, during verification.

## How to verify your Custom HTML domain

1. Add the AdGrove verification meta tag to the site head, or add the TXT record to your DNS if your platform will not let you edit the head.
2. DNS records are added wherever your domain's DNS is managed: usually your domain registrar or DNS host, not inside your website builder. Some platforms host the domain themselves, in which case the DNS editor lives in that platform.
3. Publish the site so the tag or record is live on the public domain.
4. Open the website in your AdGrove dashboard and start verification. AdGrove fetches your public domain and looks for the tag, then falls back to a DNS lookup.
5. Once verification succeeds, your placement can serve ads. Verification only has to pass once per website.
6. Upload the page containing the verification meta tag to your live domain before starting verification.
7. If you cannot edit the HTML head, use the TXT record instead, added at your domain registrar or DNS host.

## Troubleshooting AdGrove on Custom HTML

### Why is my AdGrove gate rendering as plain text?

The player script has not loaded, so the gate element is unrecognised. Open the browser console, check for a failed request to the AdGrove player URL, and confirm the script tag is present before the closing body tag.

### Does AdGrove need a build step or npm package?

No. AdGrove is one script tag. There is nothing to install, bundle or update: the player is versioned and served by AdGrove.

## What happens after you sign up

Once your website is registered, AdGrove's Integration Assistant inspects your actual site, detects how it was built and gives instructions written for that specific site, with your real values already filled in.

The public guides here are deliberately generic. The Integration Assistant is the personalised version, and it is available to every publisher at no extra cost.

## Rules that hold on every platform

- AdGrove serves rewarded ads only. The viewer chooses to watch, so there are no interruptive placements and skipping is disabled.
- The ad always plays to its final frame before the content unlocks.
- If no suitable ad is available, AdGrove unlocks the content anyway rather than leaving a viewer stuck.
- The player is loaded from AdGrove and updates itself. You never have to replace the snippet to receive player updates.
- One player script per page is enough, however many gated items that page contains.

## Related guides

- [React](https://adgrove.io/docs/install/react)
- [WordPress](https://adgrove.io/docs/install/wordpress)
- [Shopify](https://adgrove.io/docs/install/shopify)

## Official Custom HTML references

- [MDN: the script element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)


---

# How to install AdGrove on Framer

> Official AdGrove installation guide for Framer: adding the player script in custom code, embedding the gate, and verifying your domain.

Canonical page: https://adgrove.io/docs/install/framer
Last reviewed: 2026-08-31
Also known as: Framer site, Framer sites

To install AdGrove on Framer, open Project Settings, Custom Code, add the verification meta tag to the head and the AdGrove player script to the end of the body, then add the gate markup to the page with an Embed component. Custom code runs on the published Framer site, not in the canvas.

## Does AdGrove work with Framer?

Yes. AdGrove installs on Framer through Project Settings, Custom Code, with the gate added as an Embed component on the page.

## What you need before installing

- An AdGrove publisher account. Creating one is free.
- Your website registered in AdGrove, so AdGrove can issue the site-specific values used below.
- A placement created for that website, which is where your ad slot settings and earnings live.
- Access to the part of your website where custom code or a meta tag can be added.
- A Framer project you can publish, with access to Project Settings.

## How the AdGrove integration works on Framer

Framer custom code is added per project and injected into published pages, either in the head or at the end of the body, with a choice of running once or on every page visit.

Framer can also scope custom code to a single page, which is useful when only some pages are gated.

The gate itself is markup, so an Embed component holds it wherever the unlock button belongs in the layout.

## Installation steps for Framer

### 1. Open custom code in Framer

Open Project Settings, select the Custom Code tab in the left sidebar, then click Add Script, or the plus icon if you already have scripts. Give each script a recognisable name so future you knows what it is.

### 2. Add the AdGrove verification meta tag to the head

Add a script entry containing the AdGrove verification meta tag and set its placement to the start of the head. Set it to run on every page visit so it is present on every published page.

Verification meta tag:

```html
<meta name="adgrove-site-verification" content="YOUR_VERIFICATION_TOKEN" />
```

### 3. Add the AdGrove player script to the end of the body

Add a second entry containing the AdGrove player script, placed at the end of the body and set to run on every page visit, so the player is available on each page a visitor navigates to.

AdGrove player script:

```html
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>
```

### 4. Add the gate with an Embed component and publish

On the Framer canvas, insert an Embed component where the unlock button should appear and paste the gate markup into it. Publish the site, then test on the published URL, because custom code does not execute on the canvas.

Gate markup:

```html
<!-- 1. Load the AdGrove player once per page -->
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>

<!-- 2. Gate whatever the viewer wants to reach -->
<adgrove-gate>
  <button type="button">Watch a short ad to continue</button>
</adgrove-gate>
```

## Where your real values come from

- `YOUR_WEBSITE_API_KEY`: Issued per website when you register that website in AdGrove. It identifies the site the impression belongs to and is safe to appear in your page source.
- `YOUR_PLACEMENT_KEY`: Issued per placement. It tells AdGrove which ad slot on your site served the impression, so earnings are attributed correctly.
- `YOUR_VERIFICATION_TOKEN`: Issued when you add a website and shown on that website in your AdGrove dashboard. It proves you control the domain and is used once, during verification.

## How to verify your Framer domain

1. Add the AdGrove verification meta tag to the site head, or add the TXT record to your DNS if your platform will not let you edit the head.
2. DNS records are added wherever your domain's DNS is managed: usually your domain registrar or DNS host, not inside your website builder. Some platforms host the domain themselves, in which case the DNS editor lives in that platform.
3. Publish the site so the tag or record is live on the public domain.
4. Open the website in your AdGrove dashboard and start verification. AdGrove fetches your public domain and looks for the tag, then falls back to a DNS lookup.
5. Once verification succeeds, your placement can serve ads. Verification only has to pass once per website.
6. Framer applies custom code at publish time. Publish before starting verification in AdGrove.

## Troubleshooting AdGrove on Framer

### Why is AdGrove not running on my Framer canvas?

Framer custom code executes only on the published site. Publish the project and test the live URL.

### Why does the AdGrove script run only once in Framer?

Framer lets you choose between running a script once and running it on every page visit. Framer sites navigate client-side, so set the AdGrove script to run on every page visit.

## What happens after you sign up

Once your website is registered, AdGrove's Integration Assistant inspects your actual site, detects how it was built and gives instructions written for that specific site, with your real values already filled in.

The public guides here are deliberately generic. The Integration Assistant is the personalised version, and it is available to every publisher at no extra cost.

## Rules that hold on every platform

- AdGrove serves rewarded ads only. The viewer chooses to watch, so there are no interruptive placements and skipping is disabled.
- The ad always plays to its final frame before the content unlocks.
- If no suitable ad is available, AdGrove unlocks the content anyway rather than leaving a viewer stuck.
- The player is loaded from AdGrove and updates itself. You never have to replace the snippet to receive player updates.
- One player script per page is enough, however many gated items that page contains.

## Related guides

- [Webflow](https://adgrove.io/docs/install/webflow)
- [React](https://adgrove.io/docs/install/react)
- [Custom HTML](https://adgrove.io/docs/install/custom-html)

## Official Framer references

- [Framer: how to add custom code](https://www.framer.com/help/articles/how-to-add-custom-code/)
- [Framer Academy: custom code](https://www.framer.com/academy/lessons/custom-code)


---

# How to install AdGrove on Hostinger

> Official AdGrove installation guide for Hostinger, covering both Hostinger Website Builder sites and standard Hostinger hosting.

Canonical page: https://adgrove.io/docs/install/hostinger
Last reviewed: 2026-08-31
Also known as: Hostinger Website Builder, Hostinger Horizons, Hostinger AI builder

To install AdGrove on a Hostinger Website Builder site, add the verification meta tag and the AdGrove player script through the builder's custom code settings, then place the gate with an embed element. On standard Hostinger hosting you are editing your own files, so follow the custom HTML guide or the guide for your CMS.

## Does AdGrove work with Hostinger?

Yes. On Hostinger Website Builder AdGrove goes in the builder's custom code settings, and on Hostinger hosting with your own site you add it directly to your HTML or CMS.

## What you need before installing

- An AdGrove publisher account. Creating one is free.
- Your website registered in AdGrove, so AdGrove can issue the site-specific values used below.
- A placement created for that website, which is where your ad slot settings and earnings live.
- Access to the part of your website where custom code or a meta tag can be added.
- Access to your Hostinger account and the site you want to monetise.

## How the AdGrove integration works on Hostinger

Hostinger is two products in one brand. Website Builder is a hosted builder with a custom code panel, while Hostinger hosting simply runs whatever site you upload.

On Website Builder, AdGrove is added through the builder's integrations or custom code settings and applies to the published site.

On Hostinger hosting, there is no Hostinger-specific step at all: install AdGrove the way the underlying site is built, whether that is plain HTML, WordPress or something else.

## Installation steps for Hostinger

### 1. Identify which Hostinger product your site uses

If you build pages by dragging elements in Hostinger Website Builder, follow the builder steps below. If you upload files, use File Manager, or run WordPress on Hostinger hosting, follow the custom HTML or WordPress AdGrove guide instead.

### 2. Add AdGrove custom code in Hostinger Website Builder

In the builder, open the site settings and find the custom code or integrations section. Add the AdGrove verification meta tag to the head, and the AdGrove player script to the body, then save and publish.

Head: verification meta tag:

```html
<meta name="adgrove-site-verification" content="YOUR_VERIFICATION_TOKEN" />
```

### 3. Add the AdGrove player and gate to the page

Add the AdGrove player script to the body custom code, then place the gate markup using the builder's embed or custom HTML element, positioned where the unlock button should appear. Publish and test the live domain.

Player and gate:

```html
<!-- 1. Load the AdGrove player once per page -->
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>

<!-- 2. Gate whatever the viewer wants to reach -->
<adgrove-gate>
  <button type="button">Watch a short ad to continue</button>
</adgrove-gate>
```

### 4. On Hostinger hosting, edit the site directly

Open File Manager or connect over FTP, add the verification meta tag to the head of your HTML, add the AdGrove player script before the closing body tag, and place the gate markup where the unlock button belongs. If the site runs WordPress, follow the AdGrove WordPress guide instead of editing files.

## Where your real values come from

- `YOUR_WEBSITE_API_KEY`: Issued per website when you register that website in AdGrove. It identifies the site the impression belongs to and is safe to appear in your page source.
- `YOUR_PLACEMENT_KEY`: Issued per placement. It tells AdGrove which ad slot on your site served the impression, so earnings are attributed correctly.
- `YOUR_VERIFICATION_TOKEN`: Issued when you add a website and shown on that website in your AdGrove dashboard. It proves you control the domain and is used once, during verification.

## How to verify your Hostinger domain

1. Add the AdGrove verification meta tag to the site head, or add the TXT record to your DNS if your platform will not let you edit the head.
2. DNS records are added wherever your domain's DNS is managed: usually your domain registrar or DNS host, not inside your website builder. Some platforms host the domain themselves, in which case the DNS editor lives in that platform.
3. Publish the site so the tag or record is live on the public domain.
4. Open the website in your AdGrove dashboard and start verification. AdGrove fetches your public domain and looks for the tag, then falls back to a DNS lookup.
5. Once verification succeeds, your placement can serve ads. Verification only has to pass once per website.
6. Because you control DNS at Hostinger, the TXT record route is straightforward: add a TXT record on the host _adgrove-verify in the Hostinger DNS zone editor.

## Troubleshooting AdGrove on Hostinger

### My Hostinger site was generated by AI. Can I still install AdGrove?

Yes. An AI-generated Hostinger site is still a normal published website. Use the builder's custom code settings for the script and an embed element for the gate. If you exported the site or run it on hosting, follow the custom HTML guide.

### Why does my Hostinger site not show the AdGrove script?

Check that you published after saving custom code, and clear the Hostinger cache if your plan has caching enabled. Then view the page source of the live domain and search for the AdGrove player URL.

## What happens after you sign up

Once your website is registered, AdGrove's Integration Assistant inspects your actual site, detects how it was built and gives instructions written for that specific site, with your real values already filled in.

The public guides here are deliberately generic. The Integration Assistant is the personalised version, and it is available to every publisher at no extra cost.

## Rules that hold on every platform

- AdGrove serves rewarded ads only. The viewer chooses to watch, so there are no interruptive placements and skipping is disabled.
- The ad always plays to its final frame before the content unlocks.
- If no suitable ad is available, AdGrove unlocks the content anyway rather than leaving a viewer stuck.
- The player is loaded from AdGrove and updates itself. You never have to replace the snippet to receive player updates.
- One player script per page is enough, however many gated items that page contains.

## Related guides

- [Custom HTML](https://adgrove.io/docs/install/custom-html)
- [WordPress](https://adgrove.io/docs/install/wordpress)
- [Squarespace](https://adgrove.io/docs/install/squarespace)

## Official Hostinger references

- [Hostinger: Website Builder, how to add custom code](https://support.hostinger.com/en/articles/4455931-website-builder-how-to-add-custom-code)


---

# How to install AdGrove on Lovable

> Official AdGrove installation guide for Lovable projects: the exact prompt to use, where the script goes, and how to gate a page.

Canonical page: https://adgrove.io/docs/install/lovable
Last reviewed: 2026-08-31
Also known as: Lovable app, lovable.dev, Lovable site

To install AdGrove on a Lovable app, ask Lovable to add the AdGrove player script to index.html and render the gate element in the component you want gated. Because Lovable projects are React and Vite, the React installation applies directly.

## Does AdGrove work with Lovable?

Yes, and AdGrove runs a dedicated programme for Lovable builders. Ask Lovable to add the player script to index.html and render the gate in a component.

## What you need before installing

- An AdGrove publisher account. Creating one is free.
- Your website registered in AdGrove, so AdGrove can issue the site-specific values used below.
- A placement created for that website, which is where your ad slot settings and earnings live.
- Access to the part of your website where custom code or a meta tag can be added.

## How the AdGrove integration works on Lovable

Lovable projects are React and Vite applications with a real index.html, so AdGrove installs exactly as it does in any React app.

The fastest route is to give Lovable the instruction rather than editing files by hand: it will place the script tag and wire up the unlock listener.

AdGrove has a specific offer for publishers building on Lovable, described at https://adgrove.io/monetise-your-lovable-site.

## Installation steps for Lovable

### 1. Ask Lovable to install the AdGrove player

Paste the prompt below into Lovable. It contains everything Lovable needs: the script URL, the placement, and the gate behaviour.

Prompt for Lovable:

```text
Add the AdGrove rewarded ad player to this project.

1. In index.html, before the closing </body> tag, add:
   <script async src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"></script>
2. In the head of index.html, add:
   <meta name="adgrove-site-verification" content="YOUR_VERIFICATION_TOKEN" />
3. Create a component that renders:
   <adgrove-gate data-adgrove-placement="YOUR_PLACEMENT_KEY">
     <button type="button">Watch a short ad to continue</button>
   </adgrove-gate>
   and reveals its children when the element receives the DOM event
   "adgrove-unlock". Attach the listener with a ref, not a prop.
4. Declare 'adgrove-gate' in JSX.IntrinsicElements so TypeScript accepts it.

Do not proxy, bundle, or self-host the AdGrove script: it must load from
the AdGrove URL above so the version stays current.
```

### 2. Add your placement key and verification token

Replace the two placeholders with the values from your AdGrove dashboard: the placement key from the placement you created, and the verification token from the website record.

### 3. Publish the Lovable project and verify

Publish, then run verification in AdGrove against your live domain. If you are on a custom domain, verify that domain rather than the preview URL.

Verification meta tag:

```html
<meta name="adgrove-site-verification" content="YOUR_VERIFICATION_TOKEN" />
```

## Where your real values come from

- `YOUR_WEBSITE_API_KEY`: Issued per website when you register that website in AdGrove. It identifies the site the impression belongs to and is safe to appear in your page source.
- `YOUR_PLACEMENT_KEY`: Issued per placement. It tells AdGrove which ad slot on your site served the impression, so earnings are attributed correctly.
- `YOUR_VERIFICATION_TOKEN`: Issued when you add a website and shown on that website in your AdGrove dashboard. It proves you control the domain and is used once, during verification.

## How to verify your Lovable domain

1. Add the AdGrove verification meta tag to the site head, or add the TXT record to your DNS if your platform will not let you edit the head.
2. DNS records are added wherever your domain's DNS is managed: usually your domain registrar or DNS host, not inside your website builder. Some platforms host the domain themselves, in which case the DNS editor lives in that platform.
3. Publish the site so the tag or record is live on the public domain.
4. Open the website in your AdGrove dashboard and start verification. AdGrove fetches your public domain and looks for the tag, then falls back to a DNS lookup.
5. Once verification succeeds, your placement can serve ads. Verification only has to pass once per website.
6. Verify the domain you actually publish on. A Lovable preview URL is not the domain ads will serve on.

## Troubleshooting AdGrove on Lovable

### Should Lovable install an AdGrove npm package?

No. There is no AdGrove npm package, and self-hosting or bundling the player is not supported. The script must load from the AdGrove URL so the player stays current.

### Why does my Lovable app show the gate button but nothing happens?

The player script is missing or the placement key is still a placeholder. Check index.html contains the AdGrove script tag and that the gate carries your real placement key.

## What happens after you sign up

Once your website is registered, AdGrove's Integration Assistant inspects your actual site, detects how it was built and gives instructions written for that specific site, with your real values already filled in.

The public guides here are deliberately generic. The Integration Assistant is the personalised version, and it is available to every publisher at no extra cost.

## Rules that hold on every platform

- AdGrove serves rewarded ads only. The viewer chooses to watch, so there are no interruptive placements and skipping is disabled.
- The ad always plays to its final frame before the content unlocks.
- If no suitable ad is available, AdGrove unlocks the content anyway rather than leaving a viewer stuck.
- The player is loaded from AdGrove and updates itself. You never have to replace the snippet to receive player updates.
- One player script per page is enough, however many gated items that page contains.

## Related guides

- [React](https://adgrove.io/docs/install/react)
- [Custom HTML](https://adgrove.io/docs/install/custom-html)
- [Replit](https://adgrove.io/docs/install/replit)

## Official Lovable references

- [AdGrove: monetise your Lovable site](https://adgrove.io/monetise-your-lovable-site)


---

# How to install AdGrove on Next.js

> Official AdGrove installation guide for Next.js: next/script loading, metadata for verification, and rendering the gate in a client component.

Canonical page: https://adgrove.io/docs/install/nextjs
Last reviewed: 2026-08-31
Also known as: Next, Next.js app router, Vercel Next app

To install AdGrove in Next.js, load the player with the next/script component in your root layout using the afterInteractive strategy, add the verification meta tag through the metadata export, and render the gate inside a client component that listens for the unlock event.

## Does AdGrove work with Next.js?

Yes. Load the AdGrove player with next/script using the afterInteractive strategy, then render the gate inside a client component.

## What you need before installing

- An AdGrove publisher account. Creating one is free.
- Your website registered in AdGrove, so AdGrove can issue the site-specific values used below.
- A placement created for that website, which is where your ad slot settings and earnings live.
- Access to the part of your website where custom code or a meta tag can be added.

## How the AdGrove integration works on Next.js

next/script manages third-party scripts and deduplicates them across navigations, which suits the AdGrove player exactly.

The App Router builds the head from the metadata export, so verification is a metadata entry rather than raw HTML.

The gate needs a DOM event listener, so the component that renders it must be a client component.

## Installation steps for Next.js

### 1. Add the verification tag through the metadata export

In app/layout.tsx, add the AdGrove verification token to the metadata object. Next.js renders it into the head of every route.

Verification via metadata:

```tsx
export const metadata = {
  other: { 'adgrove-site-verification': 'YOUR_VERIFICATION_TOKEN' },
};
```

### 2. Load the AdGrove player with next/script

Add the script to your root layout with the afterInteractive strategy so it loads once hydration is under way and survives client-side navigation.

next/script loader:

```tsx
import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js" strategy="afterInteractive" />
      </body>
    </html>
  );
}
```

### 3. Render the gate in a client component

Mark the component with the use client directive, render the gate element, and attach the unlock listener with a ref.

Client gate component:

```tsx
'use client';

import { useEffect, useRef } from 'react';

/**
 * Loads the AdGrove player once, renders the gate, and reveals children
 * when the ad has played to its final frame.
 */
export function AdGroveGate({ children }: { children: React.ReactNode }) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const src = 'https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js';
    if (!document.querySelector(`script[src="${src}"]`)) {
      const script = document.createElement('script');
      script.src = src;
      script.async = true;
      document.body.appendChild(script);
    }
  }, []);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onUnlock = () => el.setAttribute('data-unlocked', 'true');
    el.addEventListener('adgrove-unlock', onUnlock);
    return () => el.removeEventListener('adgrove-unlock', onUnlock);
  }, []);

  return (
    <div ref={ref}>
      <adgrove-gate data-adgrove-placement="YOUR_PLACEMENT_KEY">
        <button type="button">Watch a short ad to continue</button>
      </adgrove-gate>
      {children}
    </div>
  );
}
```

## Where your real values come from

- `YOUR_WEBSITE_API_KEY`: Issued per website when you register that website in AdGrove. It identifies the site the impression belongs to and is safe to appear in your page source.
- `YOUR_PLACEMENT_KEY`: Issued per placement. It tells AdGrove which ad slot on your site served the impression, so earnings are attributed correctly.
- `YOUR_VERIFICATION_TOKEN`: Issued when you add a website and shown on that website in your AdGrove dashboard. It proves you control the domain and is used once, during verification.

## How to verify your Next.js domain

1. Add the AdGrove verification meta tag to the site head, or add the TXT record to your DNS if your platform will not let you edit the head.
2. DNS records are added wherever your domain's DNS is managed: usually your domain registrar or DNS host, not inside your website builder. Some platforms host the domain themselves, in which case the DNS editor lives in that platform.
3. Publish the site so the tag or record is live on the public domain.
4. Open the website in your AdGrove dashboard and start verification. AdGrove fetches your public domain and looks for the tag, then falls back to a DNS lookup.
5. Once verification succeeds, your placement can serve ads. Verification only has to pass once per website.
6. Next.js renders metadata server-side, so the AdGrove verification tag is in the initial HTML and verification passes without JavaScript.

## Troubleshooting AdGrove on Next.js

### Why does the AdGrove player load twice in Next.js?

Placing the raw script tag in a page as well as using next/script duplicates it. Keep a single next/script entry in the root layout and remove any manual script tags.

### Why does the unlock event never fire in my Next.js app?

The component rendering the gate is probably a server component, so no listener was ever attached. Add the use client directive to that component.

## What happens after you sign up

Once your website is registered, AdGrove's Integration Assistant inspects your actual site, detects how it was built and gives instructions written for that specific site, with your real values already filled in.

The public guides here are deliberately generic. The Integration Assistant is the personalised version, and it is available to every publisher at no extra cost.

## Rules that hold on every platform

- AdGrove serves rewarded ads only. The viewer chooses to watch, so there are no interruptive placements and skipping is disabled.
- The ad always plays to its final frame before the content unlocks.
- If no suitable ad is available, AdGrove unlocks the content anyway rather than leaving a viewer stuck.
- The player is loaded from AdGrove and updates itself. You never have to replace the snippet to receive player updates.
- One player script per page is enough, however many gated items that page contains.

## Related guides

- [React](https://adgrove.io/docs/install/react)
- [Astro](https://adgrove.io/docs/install/astro)
- [Custom HTML](https://adgrove.io/docs/install/custom-html)

## Official Next.js references

- [Next.js: script optimisation](https://nextjs.org/docs/app/guides/scripts)
- [Next.js: metadata](https://nextjs.org/docs/app/getting-started/metadata-and-og-images)


---

# How to install AdGrove on React

> Official AdGrove installation guide for React applications: loading the player, rendering the gate in JSX, and handling the unlock event in a component.

Canonical page: https://adgrove.io/docs/install/react
Last reviewed: 2026-08-31
Also known as: React app, Vite React, Create React App, SPA

To install AdGrove in a React app, add the AdGrove player script to index.html or inject it once from an effect, then render the gate element inside a component and attach an adgrove-unlock listener to reveal the rewarded content.

## Does AdGrove work with React?

Yes. Add the AdGrove player script to index.html or load it from a component, then render the gate element in your JSX.

## What you need before installing

- An AdGrove publisher account. Creating one is free.
- Your website registered in AdGrove, so AdGrove can issue the site-specific values used below.
- A placement created for that website, which is where your ad slot settings and earnings live.
- Access to the part of your website where custom code or a meta tag can be added.

## How the AdGrove integration works on React

The AdGrove player is framework-agnostic. React only needs to render the gate element and let the player attach to it.

Because React re-renders, load the script once, either statically in index.html or guarded by a check that the script tag already exists.

The unlock event is a DOM event, so use a ref and addEventListener rather than an onUnlock prop: React does not map custom events to props.

## Installation steps for React

### 1. Add the AdGrove verification meta tag to index.html

Single-page React apps serve one index.html, so put the verification meta tag in its head.

Verification meta tag:

```html
<meta name="adgrove-site-verification" content="YOUR_VERIFICATION_TOKEN" />
```

### 2. Load the AdGrove player script

The simplest route is to add the script tag to index.html before the closing body tag. If you would rather load it only on gated routes, inject it from an effect and guard against duplicates.

AdGrove player script:

```html
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>
```

### 3. Render the gate in a component

Render the gate element in JSX and listen for the unlock event through a ref. The component below covers both the script load and the unlock listener.

AdGroveGate component:

```tsx
import { useEffect, useRef } from 'react';

/**
 * Loads the AdGrove player once, renders the gate, and reveals children
 * when the ad has played to its final frame.
 */
export function AdGroveGate({ children }: { children: React.ReactNode }) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const src = 'https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js';
    if (!document.querySelector(`script[src="${src}"]`)) {
      const script = document.createElement('script');
      script.src = src;
      script.async = true;
      document.body.appendChild(script);
    }
  }, []);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onUnlock = () => el.setAttribute('data-unlocked', 'true');
    el.addEventListener('adgrove-unlock', onUnlock);
    return () => el.removeEventListener('adgrove-unlock', onUnlock);
  }, []);

  return (
    <div ref={ref}>
      <adgrove-gate data-adgrove-placement="YOUR_PLACEMENT_KEY">
        <button type="button">Watch a short ad to continue</button>
      </adgrove-gate>
      {children}
    </div>
  );
}
```

### 4. Tell TypeScript about the gate element, if you use TypeScript

Custom elements are unknown to JSX by default. Declare it once in a d.ts file so the compiler accepts the tag.

Type declaration:

```typescript
declare namespace JSX {
  interface IntrinsicElements {
    'adgrove-gate': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
      'data-adgrove-placement'?: string;
    };
  }
}
```

## Where your real values come from

- `YOUR_WEBSITE_API_KEY`: Issued per website when you register that website in AdGrove. It identifies the site the impression belongs to and is safe to appear in your page source.
- `YOUR_PLACEMENT_KEY`: Issued per placement. It tells AdGrove which ad slot on your site served the impression, so earnings are attributed correctly.
- `YOUR_VERIFICATION_TOKEN`: Issued when you add a website and shown on that website in your AdGrove dashboard. It proves you control the domain and is used once, during verification.

## How to verify your React domain

1. Add the AdGrove verification meta tag to the site head, or add the TXT record to your DNS if your platform will not let you edit the head.
2. DNS records are added wherever your domain's DNS is managed: usually your domain registrar or DNS host, not inside your website builder. Some platforms host the domain themselves, in which case the DNS editor lives in that platform.
3. Publish the site so the tag or record is live on the public domain.
4. Open the website in your AdGrove dashboard and start verification. AdGrove fetches your public domain and looks for the tag, then falls back to a DNS lookup.
5. Once verification succeeds, your placement can serve ads. Verification only has to pass once per website.
6. A React app served as a static build has a real index.html on the live domain, so meta tag verification works. If the head is generated at runtime only, use the TXT record instead, added at your domain registrar or DNS host.

## Troubleshooting AdGrove on React

### Why does the AdGrove gate stop working after client-side navigation in React?

The player attaches to gate elements as they appear. If you unmount and remount the gate, re-attach your unlock listener in the effect, which the component above already does through its cleanup function.

### Why is React warning about an unrecognised adgrove-gate element?

React passes unknown elements through to the DOM but TypeScript needs a declaration. Add the JSX IntrinsicElements declaration shown above.

## What happens after you sign up

Once your website is registered, AdGrove's Integration Assistant inspects your actual site, detects how it was built and gives instructions written for that specific site, with your real values already filled in.

The public guides here are deliberately generic. The Integration Assistant is the personalised version, and it is available to every publisher at no extra cost.

## Rules that hold on every platform

- AdGrove serves rewarded ads only. The viewer chooses to watch, so there are no interruptive placements and skipping is disabled.
- The ad always plays to its final frame before the content unlocks.
- If no suitable ad is available, AdGrove unlocks the content anyway rather than leaving a viewer stuck.
- The player is loaded from AdGrove and updates itself. You never have to replace the snippet to receive player updates.
- One player script per page is enough, however many gated items that page contains.

## Related guides

- [Next.js](https://adgrove.io/docs/install/nextjs)
- [Custom HTML](https://adgrove.io/docs/install/custom-html)
- [Lovable](https://adgrove.io/docs/install/lovable)

## Official React references

- [React: using custom elements](https://react.dev/reference/react-dom/components#custom-html-elements)


---

# How to install AdGrove on Shopify

> Official AdGrove installation guide for Shopify: adding the player to theme.liquid, gating articles with metafields, and verifying your store domain.

Canonical page: https://adgrove.io/docs/install/shopify
Last reviewed: 2026-08-31
Also known as: Shopify store, Shopify theme, Liquid

To install AdGrove on Shopify, add the verification meta tag and the AdGrove player script to theme.liquid, then place the gate markup in the template of the pages you want to gate. Shopify does not allow this on checkout pages, so gate storefront content instead.

## Does AdGrove work with Shopify?

Yes, on storefront pages. AdGrove installs by editing theme.liquid, and can gate blog articles, product pages and custom pages. Shopify checkout pages cannot be customised this way.

## What you need before installing

- An AdGrove publisher account. Creating one is free.
- Your website registered in AdGrove, so AdGrove can issue the site-specific values used below.
- A placement created for that website, which is where your ad slot settings and earnings live.
- Access to the part of your website where custom code or a meta tag can be added.
- Access to Online Store, Themes, Edit code in your Shopify admin.
- A theme you are able to edit. Duplicate the live theme first if you want a safe rollback.

## How the AdGrove integration works on Shopify

theme.liquid is the layout applied to every non-checkout page of a Shopify storefront, which makes it the right place for a site-wide script.

Individual page types are rendered by their own templates and sections, so gating a blog article or a product page means editing that template rather than the layout.

Metafields let you flag which articles or products are gated, so the gate renders conditionally rather than on everything.

## Installation steps for Shopify

### 1. Add the AdGrove verification meta tag to theme.liquid

In your Shopify admin go to Online Store, Themes, then the three-dot menu, Edit code, and open layout/theme.liquid. Paste the AdGrove verification meta tag inside the head, next to the existing content_for_header object. Do not modify or move content_for_header itself: Shopify requires it and parsing it is unsupported.

Verification meta tag:

```liquid
<meta name="adgrove-site-verification" content="YOUR_VERIFICATION_TOKEN" />
```

### 2. Add the AdGrove player script to theme.liquid

In the same theme.liquid file, paste the AdGrove player script just before the closing body tag. It then loads on every storefront page without you touching individual templates.

AdGrove player script:

```liquid
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>
```

### 3. Gate a blog article or a product page

Open the section that renders the page you want to gate, for example sections/main-article.liquid for blog posts on Dawn-based themes, and paste the gate markup around the content that should be rewarded.

Gate markup in a section:

```liquid
<!-- 1. Load the AdGrove player once per page -->
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>

<!-- 2. Gate whatever the viewer wants to reach -->
<adgrove-gate>
  <button type="button">Watch a short ad to continue</button>
</adgrove-gate>
```

### 4. Gate only flagged articles using a metafield

Create a boolean metafield, for example custom.gated, on the article or product. Wrap the gate in a Liquid conditional so it renders only when the metafield is true. Everything else stays open.

Conditional gate:

```liquid
{% if article.metafields.custom.gated %}
  <adgrove-gate>
    <button type="button">Watch a short ad to continue reading</button>
  </adgrove-gate>
{% endif %}
```

## Where your real values come from

- `YOUR_WEBSITE_API_KEY`: Issued per website when you register that website in AdGrove. It identifies the site the impression belongs to and is safe to appear in your page source.
- `YOUR_PLACEMENT_KEY`: Issued per placement. It tells AdGrove which ad slot on your site served the impression, so earnings are attributed correctly.
- `YOUR_VERIFICATION_TOKEN`: Issued when you add a website and shown on that website in your AdGrove dashboard. It proves you control the domain and is used once, during verification.

## How to verify your Shopify domain

1. Add the AdGrove verification meta tag to the site head, or add the TXT record to your DNS if your platform will not let you edit the head.
2. DNS records are added wherever your domain's DNS is managed: usually your domain registrar or DNS host, not inside your website builder. Some platforms host the domain themselves, in which case the DNS editor lives in that platform.
3. Publish the site so the tag or record is live on the public domain.
4. Open the website in your AdGrove dashboard and start verification. AdGrove fetches your public domain and looks for the tag, then falls back to a DNS lookup.
5. Once verification succeeds, your placement can serve ads. Verification only has to pass once per website.
6. Shopify serves the storefront through its own CDN. Save the theme and load the live storefront once before starting verification so the new head is cached.
7. If you are working on an unpublished theme, the verification tag will not be on the public domain. Publish the theme, or verify with the TXT record at your domain provider instead.

## Troubleshooting AdGrove on Shopify

### Can I put AdGrove on the Shopify checkout?

No. Shopify restricts checkout customisation, and theme.liquid does not apply to checkout pages. Gate storefront content instead, such as blog articles, product pages, downloads or the cart page.

### Why is my AdGrove code not executing in my Shopify theme?

Check it has not been pasted inside a Liquid comment block, and that the section you edited is the one the live template actually renders. JSON templates reference sections, so editing an unused section changes nothing on the page.

### Do I need a Shopify app to use AdGrove?

No. AdGrove is a script tag plus markup in your theme. There is no app to install and no Shopify app permissions involved.

## What happens after you sign up

Once your website is registered, AdGrove's Integration Assistant inspects your actual site, detects how it was built and gives instructions written for that specific site, with your real values already filled in.

The public guides here are deliberately generic. The Integration Assistant is the personalised version, and it is available to every publisher at no extra cost.

## Rules that hold on every platform

- AdGrove serves rewarded ads only. The viewer chooses to watch, so there are no interruptive placements and skipping is disabled.
- The ad always plays to its final frame before the content unlocks.
- If no suitable ad is available, AdGrove unlocks the content anyway rather than leaving a viewer stuck.
- The player is loaded from AdGrove and updates itself. You never have to replace the snippet to receive player updates.
- One player script per page is enough, however many gated items that page contains.

## Related guides

- [WordPress](https://adgrove.io/docs/install/wordpress)
- [Custom HTML](https://adgrove.io/docs/install/custom-html)
- [Squarespace](https://adgrove.io/docs/install/squarespace)

## Official Shopify references

- [Shopify: theme layouts](https://shopify.dev/docs/storefronts/themes/architecture/layouts)
- [Shopify: content_for_header](https://shopify.dev/docs/api/liquid/objects/content_for_header)
- [Shopify: theme templates](https://shopify.dev/docs/storefronts/themes/architecture/templates)


---

# How to install AdGrove on Squarespace

> Official AdGrove installation guide for Squarespace: Code Injection, Code Blocks, plan requirements and domain verification.

Canonical page: https://adgrove.io/docs/install/squarespace
Last reviewed: 2026-08-31
Also known as: Squarespace 7.1, Squarespace site

To install AdGrove on Squarespace, add the verification meta tag to the Header field of Code Injection, add the AdGrove player script to the Footer field, then add a Code Block containing the gate markup to the page you want to gate. Code Injection requires a Squarespace Core plan or higher.

## Does AdGrove work with Squarespace?

Yes, on Squarespace plans that include Code Injection. The AdGrove player goes in the Footer injection field and the gate goes in a Code Block on the page.

## What you need before installing

- An AdGrove publisher account. Creating one is free.
- Your website registered in AdGrove, so AdGrove can issue the site-specific values used below.
- A placement created for that website, which is where your ad slot settings and earnings live.
- Access to the part of your website where custom code or a meta tag can be added.
- A Squarespace plan that includes Code Injection: Core, Plus, Advanced or an equivalent legacy plan.
- Owner or administrator permissions on the site.

## How the AdGrove integration works on Squarespace

Squarespace Code Injection puts your Header code inside the head of every page and your Footer code before the closing body tag of every page.

A Code Block is the per-page equivalent, added from the block inserter while editing a page or post.

Squarespace does not offer conditional logic in Code Injection, so per-page gating is done by adding the Code Block only to the pages you want gated.

## Installation steps for Squarespace

### 1. Add the AdGrove verification meta tag to Code Injection

Open Settings, then Website Tools or Advanced depending on your Squarespace version, then Code Injection. Paste the AdGrove verification meta tag into the Header field and save. Squarespace injects the Header field into the head of every page.

Verification meta tag:

```html
<meta name="adgrove-site-verification" content="YOUR_VERIFICATION_TOKEN" />
```

### 2. Add the AdGrove player script to the Footer field

In the same Code Injection panel, paste the AdGrove player script into the Footer field and save. The Footer field is injected before the closing body tag on every page, which is the right place for the player.

AdGrove player script:

```html
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>
```

### 3. Add the gate to a page with a Code Block

Edit the page or post, hover where the gate should go, click Add block or the plus icon, choose Code, and paste the gate markup. Only pages that carry a Code Block are gated, which is how you keep some articles free.

Gate markup:

```html
<!-- 1. Load the AdGrove player once per page -->
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>

<!-- 2. Gate whatever the viewer wants to reach -->
<adgrove-gate>
  <button type="button">Watch a short ad to continue</button>
</adgrove-gate>
```

## Where your real values come from

- `YOUR_WEBSITE_API_KEY`: Issued per website when you register that website in AdGrove. It identifies the site the impression belongs to and is safe to appear in your page source.
- `YOUR_PLACEMENT_KEY`: Issued per placement. It tells AdGrove which ad slot on your site served the impression, so earnings are attributed correctly.
- `YOUR_VERIFICATION_TOKEN`: Issued when you add a website and shown on that website in your AdGrove dashboard. It proves you control the domain and is used once, during verification.

## How to verify your Squarespace domain

1. Add the AdGrove verification meta tag to the site head, or add the TXT record to your DNS if your platform will not let you edit the head.
2. DNS records are added wherever your domain's DNS is managed: usually your domain registrar or DNS host, not inside your website builder. Some platforms host the domain themselves, in which case the DNS editor lives in that platform.
3. Publish the site so the tag or record is live on the public domain.
4. Open the website in your AdGrove dashboard and start verification. AdGrove fetches your public domain and looks for the tag, then falls back to a DNS lookup.
5. Once verification succeeds, your placement can serve ads. Verification only has to pass once per website.
6. Squarespace Code Injection applies to the live site. Some templates hide injected content in the editor preview, so verify against the published domain.
7. If your Squarespace plan does not include Code Injection, verify with the TXT record, added wherever your domain's DNS is managed. You will still need Code Injection or a Code Block for the player itself.

## Troubleshooting AdGrove on Squarespace

### Why can I not find Code Injection in Squarespace?

Code Injection is only available on Squarespace Core, Plus, Advanced and some legacy plans. On lower plans the panel is hidden and AdGrove cannot be installed site-wide.

### Why does my AdGrove code conflict with Squarespace scripts?

Wrap any custom JavaScript you add alongside AdGrove in an immediately invoked function so it does not create globals that clash with Squarespace's own scripts. The AdGrove player itself is already self-contained.

### Why does my Squarespace Code Block look empty in the editor?

Squarespace renders some Code Blocks as a placeholder while editing. Save and view the published page to see the actual gate.

## What happens after you sign up

Once your website is registered, AdGrove's Integration Assistant inspects your actual site, detects how it was built and gives instructions written for that specific site, with your real values already filled in.

The public guides here are deliberately generic. The Integration Assistant is the personalised version, and it is available to every publisher at no extra cost.

## Rules that hold on every platform

- AdGrove serves rewarded ads only. The viewer chooses to watch, so there are no interruptive placements and skipping is disabled.
- The ad always plays to its final frame before the content unlocks.
- If no suitable ad is available, AdGrove unlocks the content anyway rather than leaving a viewer stuck.
- The player is loaded from AdGrove and updates itself. You never have to replace the snippet to receive player updates.
- One player script per page is enough, however many gated items that page contains.

## Related guides

- [Wix](https://adgrove.io/docs/install/wix)
- [WordPress](https://adgrove.io/docs/install/wordpress)
- [Custom HTML](https://adgrove.io/docs/install/custom-html)

## Official Squarespace references

- [Squarespace: using code injection](https://support.squarespace.com/hc/en-us/articles/205815908-Using-code-injection)
- [Squarespace: add custom code to your site](https://support.squarespace.com/hc/en-us/articles/205815928-Add-custom-code-to-your-site)


---

# How to install AdGrove on Webflow

> Official AdGrove installation guide for Webflow: head and footer custom code, Code Embed elements, CMS conditional gating, and domain verification.

Canonical page: https://adgrove.io/docs/install/webflow
Last reviewed: 2026-08-31
Also known as: Webflow CMS, Webflow Designer

To install AdGrove on Webflow, put the verification meta tag in Site settings, Custom code, Head code, put the AdGrove player script in Footer code, then add the gate with a Code Embed element on the page or CMS template you want to gate. Custom code only runs on the published site.

## Does AdGrove work with Webflow?

Yes. AdGrove installs on Webflow through Site settings, Custom code, with the gate added as a Code Embed element. Custom code requires a paid Webflow site plan.

## What you need before installing

- An AdGrove publisher account. Creating one is free.
- Your website registered in AdGrove, so AdGrove can issue the site-specific values used below.
- A placement created for that website, which is where your ad slot settings and earnings live.
- Access to the part of your website where custom code or a meta tag can be added.
- A paid Webflow site plan, which is what enables custom code.
- Access to the Webflow project settings and the Designer.

## How the AdGrove integration works on Webflow

Webflow injects site-level custom code into every published page: Head code before the closing head tag, Footer code before the closing body tag.

The gate itself is markup, so it belongs in a Code Embed element placed in the layout exactly where the unlock button should appear.

For CMS collections, a boolean field plus Webflow conditional visibility lets you gate only the items you mark as premium, with no code branching.

## Installation steps for Webflow

### 1. Add the AdGrove verification meta tag to Webflow head code

Open Site settings, then the Custom code tab, and paste the AdGrove verification meta tag into the Head code section. Click Save changes, then Publish. Webflow does not apply custom code until the site is published.

Verification meta tag:

```html
<meta name="adgrove-site-verification" content="YOUR_VERIFICATION_TOKEN" />
```

### 2. Add the AdGrove player script to Webflow footer code

In the same Custom code tab, paste the AdGrove player script into the Footer code section, which renders before the closing body tag. Webflow recommends script tags go in the footer rather than the head for page speed, and AdGrove works correctly there.

AdGrove player script:

```html
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>
```

### 3. Add the gate with a Code Embed element

In the Designer, open the Add panel, find Code Embed under the advanced section, and drop it where the unlock button should sit, usually inside a container or div so you can control its spacing and breakpoints. Paste the gate markup into the embed.

Gate markup:

```html
<!-- 1. Load the AdGrove player once per page -->
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>

<!-- 2. Gate whatever the viewer wants to reach -->
<adgrove-gate>
  <button type="button">Watch a short ad to continue</button>
</adgrove-gate>
```

### 4. Gate only the CMS items you mark as premium

Add a switch field such as Is premium to your CMS collection. In the collection page template, wrap the Code Embed holding the gate in a container with conditional visibility set to show only when Is premium is on. Webflow then renders the gate for premium items and nothing for the rest.

### 5. Publish and test on the live domain

Custom code does not execute in the Designer or in the Designer preview. Publish to your live domain, open the page, and click the unlock button to confirm the ad plays and the content reveals.

## Where your real values come from

- `YOUR_WEBSITE_API_KEY`: Issued per website when you register that website in AdGrove. It identifies the site the impression belongs to and is safe to appear in your page source.
- `YOUR_PLACEMENT_KEY`: Issued per placement. It tells AdGrove which ad slot on your site served the impression, so earnings are attributed correctly.
- `YOUR_VERIFICATION_TOKEN`: Issued when you add a website and shown on that website in your AdGrove dashboard. It proves you control the domain and is used once, during verification.

## How to verify your Webflow domain

1. Add the AdGrove verification meta tag to the site head, or add the TXT record to your DNS if your platform will not let you edit the head.
2. DNS records are added wherever your domain's DNS is managed: usually your domain registrar or DNS host, not inside your website builder. Some platforms host the domain themselves, in which case the DNS editor lives in that platform.
3. Publish the site so the tag or record is live on the public domain.
4. Open the website in your AdGrove dashboard and start verification. AdGrove fetches your public domain and looks for the tag, then falls back to a DNS lookup.
5. Once verification succeeds, your placement can serve ads. Verification only has to pass once per website.
6. Webflow has a dedicated Google site verification field under the SEO tab. Do not use it for AdGrove: the AdGrove verification meta tag goes in Custom code, Head code.
7. Publish after saving custom code, otherwise the verification tag is not live on the domain AdGrove checks.

## Troubleshooting AdGrove on Webflow

### Why does the AdGrove code not work in the Webflow Designer?

Webflow custom code runs only on the published site, not in the Designer or the Designer preview. Publish the site and test on the live domain.

### Why is the AdGrove Code Embed clipped or cut off in Webflow?

The parent container is clipping it. Set overflow to visible on the container holding the Code Embed, and give the container enough height for the unlock button.

### Do I need a paid Webflow plan to install AdGrove?

Yes. Webflow gates custom code behind a paid site plan, and AdGrove needs custom code for both the player script and the verification meta tag.

## What happens after you sign up

Once your website is registered, AdGrove's Integration Assistant inspects your actual site, detects how it was built and gives instructions written for that specific site, with your real values already filled in.

The public guides here are deliberately generic. The Integration Assistant is the personalised version, and it is available to every publisher at no extra cost.

## Rules that hold on every platform

- AdGrove serves rewarded ads only. The viewer chooses to watch, so there are no interruptive placements and skipping is disabled.
- The ad always plays to its final frame before the content unlocks.
- If no suitable ad is available, AdGrove unlocks the content anyway rather than leaving a viewer stuck.
- The player is loaded from AdGrove and updates itself. You never have to replace the snippet to receive player updates.
- One player script per page is enough, however many gated items that page contains.

## Related guides

- [Framer](https://adgrove.io/docs/install/framer)
- [Wix](https://adgrove.io/docs/install/wix)
- [Custom HTML](https://adgrove.io/docs/install/custom-html)

## Official Webflow references

- [Webflow: custom code in head and body tags](https://help.webflow.com/hc/en-us/articles/33961357265299-Custom-code-in-head-and-body-tags)
- [Webflow University: site-level custom code](https://university.webflow.com/course-lesson/custom-code-site-level-code)
- [Webflow: custom code embed](https://help.webflow.com/hc/en-us/articles/33961307549971-Custom-code-embed)


---

# How to install AdGrove on Wix

> Official AdGrove installation guide for Wix websites: where the player script goes, how to verify your domain, and what Wix plan you need.

Canonical page: https://adgrove.io/docs/install/wix
Last reviewed: 2026-08-31
Also known as: Wix Editor, Wix website, wix.com

To install AdGrove on Wix, add the AdGrove player script through Settings, Custom Code on an upgraded Wix site, then place the gate markup on the page you want to reward viewers for. The verification meta tag is added either in the same Custom Code panel or through the page SEO panel.

## Does AdGrove work with Wix?

Yes. AdGrove works on Wix sites on a paid (upgraded) plan, using Wix Custom Code for the player and the Advanced SEO panel or Custom Code for the verification meta tag.

## What you need before installing

- An AdGrove publisher account. Creating one is free.
- Your website registered in AdGrove, so AdGrove can issue the site-specific values used below.
- A placement created for that website, which is where your ad slot settings and earnings live.
- Access to the part of your website where custom code or a meta tag can be added.
- A Wix site on a paid plan, which is what unlocks the Custom Code panel.
- Owner or admin access to the Wix site dashboard.

## How the AdGrove integration works on Wix

AdGrove is a single JavaScript file loaded from AdGrove's own servers. Wix does not need a plugin or an app: the script is pasted once into Wix Custom Code and Wix injects it into your published pages.

The gate is an HTML element the player recognises. When a viewer chooses to watch, the player takes over the screen, plays a rewarded ad to its last frame, then fires an unlock event that reveals your content.

Wix Custom Code is only available on upgraded (paid) Wix plans. On a free Wix site you can still add the verification meta tag through the Advanced SEO panel, but you cannot add the player script.

## Installation steps for Wix

### 1. Add the AdGrove verification meta tag to your Wix site

Go to your Wix site dashboard, open Settings, then Custom Code under Advanced Settings, click Add Custom Code, paste the AdGrove verification meta tag, set Add Code to Pages to All pages, choose Head as the placement, and click Apply. On a free Wix site instead open the editor, click Pages and Menu, click More Actions next to the page, click SEO basics, open the Advanced SEO tab and add the tag under Additional Tags. Wix accepts Link, Meta and Comment tags in header code only, with a 2000 character limit per entry.

Verification meta tag:

```html
<meta name="adgrove-site-verification" content="YOUR_VERIFICATION_TOKEN" />
```

### 2. Add the AdGrove player script through Wix Custom Code

In the same Settings, Custom Code panel, add a second entry containing the AdGrove player script. Set Add Code to Pages to All pages if you want the player available everywhere, or choose specific pages if only some pages are gated. Place this one in Body - end. Wix rejects script tags in header code, so the player script must go in the body, not the head.

AdGrove player script:

```html
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>
```

### 3. Place the gate on the page you want to reward viewers for

In the Wix Editor, click Add Elements, then Embed Code, then Embed HTML, and paste the gate markup into the embed. The embed sits inside an iframe, so keep the gate self-contained: put the button and the content that should unlock inside the same embed, or use the Custom Element route below when the unlock has to affect the rest of the page.

Gate markup:

```html
<!-- 1. Load the AdGrove player once per page -->
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>

<!-- 2. Gate whatever the viewer wants to reach -->
<adgrove-gate>
  <button type="button">Watch a short ad to continue</button>
</adgrove-gate>
```

### 4. Use a Wix Custom Element when the unlock must reach the wider page

Wix Custom Elements are not sandboxed the way HTML embeds are, so they can talk to the rest of the page. In the Wix Editor click Add Elements, then Embed Code, then Custom Element, click Choose Source, select Server URL, and point it at the AdGrove player URL. Listen for the adgrove-unlock event on the element itself rather than on document, because Wix renders custom elements inside a shadow root.

Custom Element server URL:

```text
https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js
```

### 5. Publish the Wix site and test the gate

Wix Custom Code only runs on the published site, never in the editor or in preview. Click Publish, open the live URL, and click your unlock button. The ad plays to its final frame and then your content appears.

Unlock handler:

```javascript
document.addEventListener('adgrove-unlock', (event) => {
  // The ad played to the end. Reveal the content or run the action.
  const { receipt, impressionId } = event.detail;
  document.getElementById('premium-content').style.display = 'block';
});
```

## Where your real values come from

- `YOUR_WEBSITE_API_KEY`: Issued per website when you register that website in AdGrove. It identifies the site the impression belongs to and is safe to appear in your page source.
- `YOUR_PLACEMENT_KEY`: Issued per placement. It tells AdGrove which ad slot on your site served the impression, so earnings are attributed correctly.
- `YOUR_VERIFICATION_TOKEN`: Issued when you add a website and shown on that website in your AdGrove dashboard. It proves you control the domain and is used once, during verification.

## How to verify your Wix domain

1. Add the AdGrove verification meta tag to the site head, or add the TXT record to your DNS if your platform will not let you edit the head.
2. DNS records are added wherever your domain's DNS is managed: usually your domain registrar or DNS host, not inside your website builder. Some platforms host the domain themselves, in which case the DNS editor lives in that platform.
3. Publish the site so the tag or record is live on the public domain.
4. Open the website in your AdGrove dashboard and start verification. AdGrove fetches your public domain and looks for the tag, then falls back to a DNS lookup.
5. Once verification succeeds, your placement can serve ads. Verification only has to pass once per website.
6. Wix caches published pages, so allow a few minutes between publishing and running verification in AdGrove.
7. If your Wix plan does not offer Custom Code, use the TXT record instead of the meta tag. That record goes wherever your domain's DNS is managed: the Wix domain panel if you bought the domain from Wix, otherwise your own registrar.

## Wix variants and edge cases

### Does AdGrove work with Wix Studio as well as the Wix Editor?

Yes, but the menu paths differ. Wix Studio has its own custom code panel and its own dev mode. See the dedicated AdGrove guide for Wix Studio at https://adgrove.io/docs/install/wix-studio.

### Do I need Velo to install AdGrove on Wix?

No. A standard AdGrove installation on Wix needs only Custom Code and an embed. Velo is useful when you want conditional gating, for example gating only the CMS items marked premium, because that requires reading the current item and showing the gate conditionally.

## Troubleshooting AdGrove on Wix

### Why is the AdGrove player not appearing on my Wix site?

The most common cause on Wix is testing in the editor or in preview. Wix Custom Code only executes on the published site. Publish, then reload the live URL with the cache cleared. If it still does not appear, confirm the Custom Code entry is applied to the page you are testing and is set to Body - end.

### Why does Wix reject my AdGrove code in header code?

Wix header code accepts only Link, Meta and Comment tags and rejects script tags at validation. Put the AdGrove verification meta tag in header code and the AdGrove player script in Body - end instead.

### Why does the unlock event never reach my Wix page?

Wix renders custom elements inside a shadow root, so listen for adgrove-unlock on the custom element itself rather than on document. AdGrove dispatches the event with composed: true so it can cross the shadow boundary, but the listener still has to be attached somewhere in its path.

### Why does the AdGrove button sit behind other Wix content?

Wix stacks sections with its own z-index values. Raise the z-index on the container holding the AdGrove gate, or pin the element to the screen in the Wix Editor so it renders above the page sections.

## Common questions about AdGrove and Wix

### Where do I add the AdGrove code in Wix?

The AdGrove verification meta tag goes in Settings, Custom Code, Head, or in the page Advanced SEO panel. The AdGrove player script goes in Settings, Custom Code, Body - end. The gate markup goes on the page itself through Add Elements, Embed Code.

### Can I install AdGrove on a free Wix site?

Not fully. Wix restricts Custom Code to paid plans, and the AdGrove player script needs Custom Code. On a free Wix site you can verify your domain through the Advanced SEO panel or with a TXT record at your domain provider, but you will need to upgrade the Wix plan before ads can serve.

## What happens after you sign up

Once your website is registered, AdGrove's Integration Assistant inspects your actual site, detects how it was built and gives instructions written for that specific site, with your real values already filled in.

The public guides here are deliberately generic. The Integration Assistant is the personalised version, and it is available to every publisher at no extra cost.

## Rules that hold on every platform

- AdGrove serves rewarded ads only. The viewer chooses to watch, so there are no interruptive placements and skipping is disabled.
- The ad always plays to its final frame before the content unlocks.
- If no suitable ad is available, AdGrove unlocks the content anyway rather than leaving a viewer stuck.
- The player is loaded from AdGrove and updates itself. You never have to replace the snippet to receive player updates.
- One player script per page is enough, however many gated items that page contains.

## Related guides

- [Wix Studio](https://adgrove.io/docs/install/wix-studio)
- [WordPress](https://adgrove.io/docs/install/wordpress)
- [Squarespace](https://adgrove.io/docs/install/squarespace)
- [Custom HTML](https://adgrove.io/docs/install/custom-html)

## Official Wix references

- [Wix: adding custom code to the head of your site](https://support.wix.com/en/article/adding-custom-code-to-the-head-of-your-site)
- [Wix: header code meta tag guidelines](https://support.wix.com/en/article/header-code-meta-tag-guidelines)
- [Wix: verifying your site on search engines](https://support.wix.com/en/article/verifying-your-site-on-search-engines-9255141)
- [Wix: adding a custom element to your site](https://support.wix.com/en/article/wix-editor-adding-a-custom-element-to-your-site)


---

# How to install AdGrove on Wix Studio

> Official AdGrove installation guide for Wix Studio sites, including where custom code lives in Studio and how it differs from the classic Wix Editor.

Canonical page: https://adgrove.io/docs/install/wix-studio
Last reviewed: 2026-08-31
Also known as: Wix Studio Editor, Studio by Wix

To install AdGrove on Wix Studio, add the player script through the site dashboard under Settings, Custom Code, placed at the end of the body, then add the gate markup to a page using an embed or a custom element. Verification uses the same AdGrove meta tag as any other platform.

## Does AdGrove work with Wix Studio?

Yes. AdGrove installs on Wix Studio through the site dashboard Custom Code panel, the same way as Wix, with Studio's own menu paths.

## What you need before installing

- An AdGrove publisher account. Creating one is free.
- Your website registered in AdGrove, so AdGrove can issue the site-specific values used below.
- A placement created for that website, which is where your ad slot settings and earnings live.
- Access to the part of your website where custom code or a meta tag can be added.
- A published Wix Studio site and dashboard access to it.

## How the AdGrove integration works on Wix Studio

Wix Studio serves the same published HTML pipeline as Wix, so the AdGrove player behaves identically once the script is injected.

The difference is where you click. Studio separates the editor from the site dashboard, and custom code is a dashboard setting rather than an editor setting.

Studio sites are on paid plans, so the Custom Code panel is available without upgrading.

## Installation steps for Wix Studio

### 1. Open the Custom Code panel in the Wix Studio dashboard

From the Wix Studio workspace, open the site, go to the site dashboard rather than the editor, then Settings, then Custom Code. This is the equivalent of the classic Wix Settings, Custom Code panel and takes the same kinds of code.

### 2. Add the AdGrove verification meta tag to the head

Add a Custom Code entry containing the AdGrove verification meta tag, apply it to all pages, and place it in Head. As on classic Wix, head code accepts meta and link tags but not script tags.

Verification meta tag:

```html
<meta name="adgrove-site-verification" content="YOUR_VERIFICATION_TOKEN" />
```

### 3. Add the AdGrove player script to the end of the body

Add a second Custom Code entry containing the AdGrove player script, applied to all pages or only the pages you gate, placed in Body - end.

AdGrove player script:

```html
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>
```

### 4. Add the gate to the page

In the Studio editor, add an Embed element and paste the gate markup, or add a custom element pointing at the AdGrove player URL when the unlock needs to change the rest of the page. Then publish, because custom code does not run in the Studio editor.

Gate markup:

```html
<!-- 1. Load the AdGrove player once per page -->
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>

<!-- 2. Gate whatever the viewer wants to reach -->
<adgrove-gate>
  <button type="button">Watch a short ad to continue</button>
</adgrove-gate>
```

## Where your real values come from

- `YOUR_WEBSITE_API_KEY`: Issued per website when you register that website in AdGrove. It identifies the site the impression belongs to and is safe to appear in your page source.
- `YOUR_PLACEMENT_KEY`: Issued per placement. It tells AdGrove which ad slot on your site served the impression, so earnings are attributed correctly.
- `YOUR_VERIFICATION_TOKEN`: Issued when you add a website and shown on that website in your AdGrove dashboard. It proves you control the domain and is used once, during verification.

## How to verify your Wix Studio domain

1. Add the AdGrove verification meta tag to the site head, or add the TXT record to your DNS if your platform will not let you edit the head.
2. DNS records are added wherever your domain's DNS is managed: usually your domain registrar or DNS host, not inside your website builder. Some platforms host the domain themselves, in which case the DNS editor lives in that platform.
3. Publish the site so the tag or record is live on the public domain.
4. Open the website in your AdGrove dashboard and start verification. AdGrove fetches your public domain and looks for the tag, then falls back to a DNS lookup.
5. Once verification succeeds, your placement can serve ads. Verification only has to pass once per website.
6. Studio caches published output, so publish before running verification and allow a few minutes.

## Wix Studio variants and edge cases

### Is the AdGrove installation different between Wix Studio and the Wix Editor?

The code is identical. Only the navigation differs: Wix Studio keeps custom code in the site dashboard, while the classic Wix Editor reaches the same panel from the site's settings. Free classic Wix sites also lack Custom Code entirely, which is not a limitation Studio sites hit.

## Troubleshooting AdGrove on Wix Studio

### Why can I not find the Custom Code panel in Wix Studio?

Custom Code in Wix Studio lives in the site dashboard, not in the editor. Leave the editor, open the site dashboard, then Settings, then Custom Code.

### Does AdGrove code run in the Wix Studio editor preview?

No. Custom code in Wix Studio runs only on the published site. Publish and test on the live domain.

## What happens after you sign up

Once your website is registered, AdGrove's Integration Assistant inspects your actual site, detects how it was built and gives instructions written for that specific site, with your real values already filled in.

The public guides here are deliberately generic. The Integration Assistant is the personalised version, and it is available to every publisher at no extra cost.

## Rules that hold on every platform

- AdGrove serves rewarded ads only. The viewer chooses to watch, so there are no interruptive placements and skipping is disabled.
- The ad always plays to its final frame before the content unlocks.
- If no suitable ad is available, AdGrove unlocks the content anyway rather than leaving a viewer stuck.
- The player is loaded from AdGrove and updates itself. You never have to replace the snippet to receive player updates.
- One player script per page is enough, however many gated items that page contains.

## Related guides

- [Wix](https://adgrove.io/docs/install/wix)
- [Webflow](https://adgrove.io/docs/install/webflow)
- [Custom HTML](https://adgrove.io/docs/install/custom-html)

## Official Wix Studio references

- [Wix: adding custom code to the head of your site](https://support.wix.com/en/article/adding-custom-code-to-the-head-of-your-site)
- [Wix: adding a custom element to your site](https://support.wix.com/en/article/wix-editor-adding-a-custom-element-to-your-site)


---

# How to install AdGrove on WordPress

> Official AdGrove installation guide for WordPress: adding the player script with a snippet plugin, gating individual posts, and verifying your domain.

Canonical page: https://adgrove.io/docs/install/wordpress
Last reviewed: 2026-08-31
Also known as: WordPress.org, self-hosted WordPress, WP

To install AdGrove on WordPress, add the AdGrove player script site-wide with a header and footer snippet plugin such as WPCode, then add the gate markup to the posts or pages you want to gate using a Custom HTML block. The verification meta tag goes in the same plugin, output in the head.

## Does AdGrove work with WordPress?

Yes. AdGrove installs on WordPress with a header and footer snippet plugin, a Custom HTML block, or a small addition to the theme through the wp_head hook.

## What you need before installing

- An AdGrove publisher account. Creating one is free.
- Your website registered in AdGrove, so AdGrove can issue the site-specific values used below.
- A placement created for that website, which is where your ad slot settings and earnings live.
- Access to the part of your website where custom code or a meta tag can be added.
- Administrator access to WordPress.
- A way to add raw HTML: a snippet plugin such as WPCode or Insert Headers and Footers, or child-theme access.

## How the AdGrove integration works on WordPress

WordPress themes call wp_head() inside the head of every page, which is the hook snippet plugins use to inject the AdGrove verification meta tag.

The AdGrove player script is a plain external script tag, so any method that can output raw HTML on the front end will do: a snippet plugin, a block, or the theme itself.

Per-post gating is a WordPress conditional. Mark a post as gated with a tag, a category or a custom field, then output the gate only when that condition is true.

## Installation steps for WordPress

### 1. Add the AdGrove verification meta tag to the WordPress head

Install a header and footer snippet plugin, create a new snippet of type HTML, paste the AdGrove verification meta tag, and set the location to site-wide header. The plugin outputs it through the wp_head hook, which every standards-compliant theme fires inside the head.

Verification meta tag:

```html
<meta name="adgrove-site-verification" content="YOUR_VERIFICATION_TOKEN" />
```

### 2. Add the AdGrove player script site-wide

Create a second snippet containing the AdGrove player script and set the location to site-wide footer, so it loads once on every page without blocking rendering. If you prefer to work in the theme, enqueue the same URL from your child theme instead.

AdGrove player script:

```html
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>
```

### 3. Gate a specific post or page with a Custom HTML block

Edit the post, add a Custom HTML block where the gate should appear, and paste the gate markup. In the block editor you can add it by typing /html and pressing enter, then Edit HTML. Everything you want hidden until the ad completes goes inside the gated container.

Gate markup:

```html
<!-- 1. Load the AdGrove player once per page -->
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>

<!-- 2. Gate whatever the viewer wants to reach -->
<adgrove-gate>
  <button type="button">Watch a short ad to continue</button>
</adgrove-gate>
```

### 4. Gate a whole category or tag with conditional logic

To gate a section rather than individual posts, use the conditional logic in your snippet plugin, or a WordPress conditional tag in a template file, so the gate snippet only loads on matching posts. WordPress conditional tags must run after the main query, so place them in a template file or in a function hooked to a late action, never bare in functions.php.

Conditional gating in a template file:

```php
<?php if ( has_tag( 'premium' ) ) : ?>
  <adgrove-gate>
    <button type="button">Watch a short ad to read this article</button>
  </adgrove-gate>
<?php endif; ?>
```

### 5. Clear caches and test on the live site

Purge any caching or optimisation plugin and any CDN cache, then load the post in a private window. Caching and script-combining plugins are the single most common reason a freshly added AdGrove script does not appear on WordPress.

## Where your real values come from

- `YOUR_WEBSITE_API_KEY`: Issued per website when you register that website in AdGrove. It identifies the site the impression belongs to and is safe to appear in your page source.
- `YOUR_PLACEMENT_KEY`: Issued per placement. It tells AdGrove which ad slot on your site served the impression, so earnings are attributed correctly.
- `YOUR_VERIFICATION_TOKEN`: Issued when you add a website and shown on that website in your AdGrove dashboard. It proves you control the domain and is used once, during verification.

## How to verify your WordPress domain

1. Add the AdGrove verification meta tag to the site head, or add the TXT record to your DNS if your platform will not let you edit the head.
2. DNS records are added wherever your domain's DNS is managed: usually your domain registrar or DNS host, not inside your website builder. Some platforms host the domain themselves, in which case the DNS editor lives in that platform.
3. Publish the site so the tag or record is live on the public domain.
4. Open the website in your AdGrove dashboard and start verification. AdGrove fetches your public domain and looks for the tag, then falls back to a DNS lookup.
5. Once verification succeeds, your placement can serve ads. Verification only has to pass once per website.
6. If a caching plugin is serving stale HTML, AdGrove will not see the verification meta tag. Purge the cache before starting verification.
7. Some security plugins strip unknown meta tags. If verification keeps failing, use the TXT record instead, added at your domain registrar or DNS host.

## Troubleshooting AdGrove on WordPress

### Why is the AdGrove script not loading on my WordPress site?

A caching, minification or script-combining plugin is usually the cause. Purge all caches and exclude the AdGrove player URL from combination and deferral. View the page source on the live site and confirm the AdGrove script tag is present.

### Why does the AdGrove gate appear on the wrong WordPress pages?

The snippet is loading unconditionally. Add conditional logic in your snippet plugin, or move the gate markup into the template that renders only the posts you want gated.

### Does AdGrove work on WordPress.com?

It works on WordPress.com plans that allow custom code and plugins, which in practice means the Business plan or above. Lower WordPress.com tiers block the raw HTML and plugin access AdGrove needs.

## What happens after you sign up

Once your website is registered, AdGrove's Integration Assistant inspects your actual site, detects how it was built and gives instructions written for that specific site, with your real values already filled in.

The public guides here are deliberately generic. The Integration Assistant is the personalised version, and it is available to every publisher at no extra cost.

## Rules that hold on every platform

- AdGrove serves rewarded ads only. The viewer chooses to watch, so there are no interruptive placements and skipping is disabled.
- The ad always plays to its final frame before the content unlocks.
- If no suitable ad is available, AdGrove unlocks the content anyway rather than leaving a viewer stuck.
- The player is loaded from AdGrove and updates itself. You never have to replace the snippet to receive player updates.
- One player script per page is enough, however many gated items that page contains.

## Related guides

- [Custom HTML](https://adgrove.io/docs/install/custom-html)
- [Shopify](https://adgrove.io/docs/install/shopify)
- [Squarespace](https://adgrove.io/docs/install/squarespace)

## Official WordPress references

- [WordPress: wp_head hook reference](https://developer.wordpress.org/reference/hooks/wp_head/)
- [WordPress: Custom HTML block](https://wordpress.org/documentation/article/custom-html/)
- [WordPress: conditional tags](https://developer.wordpress.org/themes/basics/conditional-tags/)
- [WordPress: wp_enqueue_script()](https://developer.wordpress.org/reference/functions/wp_enqueue_script/)


---

# How to install AdGrove on Angular

> Official AdGrove installation guide for Angular applications.

Canonical page: https://adgrove.io/docs/install/angular
Last reviewed: 2026-08-31
Also known as: Angular app, Angular CLI

To install AdGrove on Angular, add the AdGrove player script and verification meta tag to src/index.html, render the gate element in a component, and add CUSTOM_ELEMENTS_SCHEMA so Angular accepts the unknown tag.

## Does AdGrove work with Angular?

Yes. Add the AdGrove player script to index.html and render the gate in a component with CUSTOM_ELEMENTS_SCHEMA.

## What you need before installing

- An AdGrove publisher account. Creating one is free.
- Your website registered in AdGrove, so AdGrove can issue the site-specific values used below.
- A placement created for that website, which is where your ad slot settings and earnings live.
- Access to the part of your website where custom code or a meta tag can be added.

## How the AdGrove integration works on Angular

Angular compiles templates strictly, so an unknown element needs CUSTOM_ELEMENTS_SCHEMA declared on the component or module.

The player script is external, so index.html is the natural place for it.

## Installation steps for Angular

### 1. Add the script and verification tag to src/index.html

Verification meta tag in the head, AdGrove player script before the closing body tag.

Script and verification tag:

```html
<meta name="adgrove-site-verification" content="YOUR_VERIFICATION_TOKEN" />
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>
```

### 2. Allow the custom element and render the gate

Add CUSTOM_ELEMENTS_SCHEMA to the schemas array of the component or module rendering the gate, then add the gate markup to the template.

Component schema:

```typescript
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-gated-article',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <adgrove-gate data-adgrove-placement="YOUR_PLACEMENT_KEY">
      <button type="button">Watch a short ad to continue</button>
    </adgrove-gate>
  `,
})
export class GatedArticleComponent {}
```

## Where your real values come from

- `YOUR_WEBSITE_API_KEY`: Issued per website when you register that website in AdGrove. It identifies the site the impression belongs to and is safe to appear in your page source.
- `YOUR_PLACEMENT_KEY`: Issued per placement. It tells AdGrove which ad slot on your site served the impression, so earnings are attributed correctly.
- `YOUR_VERIFICATION_TOKEN`: Issued when you add a website and shown on that website in your AdGrove dashboard. It proves you control the domain and is used once, during verification.

## How to verify your Angular domain

1. Add the AdGrove verification meta tag to the site head, or add the TXT record to your DNS if your platform will not let you edit the head.
2. DNS records are added wherever your domain's DNS is managed: usually your domain registrar or DNS host, not inside your website builder. Some platforms host the domain themselves, in which case the DNS editor lives in that platform.
3. Publish the site so the tag or record is live on the public domain.
4. Open the website in your AdGrove dashboard and start verification. AdGrove fetches your public domain and looks for the tag, then falls back to a DNS lookup.
5. Once verification succeeds, your placement can serve ads. Verification only has to pass once per website.
6. A built Angular app serves a real index.html, so meta tag verification works on the deployed domain.

## Troubleshooting AdGrove on Angular

### Why does Angular fail to compile my AdGrove gate element?

Angular rejects unknown elements unless you declare CUSTOM_ELEMENTS_SCHEMA on the component or module rendering them.

## What happens after you sign up

Once your website is registered, AdGrove's Integration Assistant inspects your actual site, detects how it was built and gives instructions written for that specific site, with your real values already filled in.

The public guides here are deliberately generic. The Integration Assistant is the personalised version, and it is available to every publisher at no extra cost.

## Rules that hold on every platform

- AdGrove serves rewarded ads only. The viewer chooses to watch, so there are no interruptive placements and skipping is disabled.
- The ad always plays to its final frame before the content unlocks.
- If no suitable ad is available, AdGrove unlocks the content anyway rather than leaving a viewer stuck.
- The player is loaded from AdGrove and updates itself. You never have to replace the snippet to receive player updates.
- One player script per page is enough, however many gated items that page contains.

## Related guides

- [React](https://adgrove.io/docs/install/react)
- [Nuxt](https://adgrove.io/docs/install/nuxt)
- [Custom HTML](https://adgrove.io/docs/install/custom-html)

## Official Angular references

- [Angular: CUSTOM_ELEMENTS_SCHEMA](https://angular.dev/api/core/CUSTOM_ELEMENTS_SCHEMA)


---

# How to install AdGrove on Astro

> Official AdGrove installation guide for Astro sites.

Canonical page: https://adgrove.io/docs/install/astro
Last reviewed: 2026-08-31
Also known as: Astro site, astro.build

To install AdGrove on Astro, add the verification meta tag and the AdGrove player script to your base layout component, then render the gate markup in the pages you want gated. Astro ships no client JavaScript by default, but a plain script tag with a src is left intact.

## Does AdGrove work with Astro?

Yes. Add the AdGrove player script to your base layout and render the gate in a page or component.

## What you need before installing

- An AdGrove publisher account. Creating one is free.
- Your website registered in AdGrove, so AdGrove can issue the site-specific values used below.
- A placement created for that website, which is where your ad slot settings and earnings live.
- Access to the part of your website where custom code or a meta tag can be added.

## How the AdGrove integration works on Astro

Astro leaves external script tags with a src attribute alone, so the AdGrove player loads normally from a layout.

The gate is markup, so it needs no client-side island. Only custom unlock logic would need one.

## Installation steps for Astro

### 1. Add the script and verification tag to your base layout

In src/layouts/Layout.astro, put the verification meta tag in the head and the AdGrove player script before the closing body tag.

Script and verification tag:

```html
<meta name="adgrove-site-verification" content="YOUR_VERIFICATION_TOKEN" />
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>
```

### 2. Render the gate in a page

Add the gate markup to any page or component. For custom unlock behaviour, add an inline script with the is:inline directive so Astro does not process it.

Gate markup:

```html
<!-- 1. Load the AdGrove player once per page -->
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>

<!-- 2. Gate whatever the viewer wants to reach -->
<adgrove-gate>
  <button type="button">Watch a short ad to continue</button>
</adgrove-gate>
```

## Where your real values come from

- `YOUR_WEBSITE_API_KEY`: Issued per website when you register that website in AdGrove. It identifies the site the impression belongs to and is safe to appear in your page source.
- `YOUR_PLACEMENT_KEY`: Issued per placement. It tells AdGrove which ad slot on your site served the impression, so earnings are attributed correctly.
- `YOUR_VERIFICATION_TOKEN`: Issued when you add a website and shown on that website in your AdGrove dashboard. It proves you control the domain and is used once, during verification.

## How to verify your Astro domain

1. Add the AdGrove verification meta tag to the site head, or add the TXT record to your DNS if your platform will not let you edit the head.
2. DNS records are added wherever your domain's DNS is managed: usually your domain registrar or DNS host, not inside your website builder. Some platforms host the domain themselves, in which case the DNS editor lives in that platform.
3. Publish the site so the tag or record is live on the public domain.
4. Open the website in your AdGrove dashboard and start verification. AdGrove fetches your public domain and looks for the tag, then falls back to a DNS lookup.
5. Once verification succeeds, your placement can serve ads. Verification only has to pass once per website.
6. Astro pre-renders HTML, so the verification meta tag is in the served markup and verification passes without JavaScript.

## Troubleshooting AdGrove on Astro

### Why did Astro remove my inline AdGrove script?

Astro processes inline scripts by default. Add the is:inline directive to keep it verbatim in the output.

## What happens after you sign up

Once your website is registered, AdGrove's Integration Assistant inspects your actual site, detects how it was built and gives instructions written for that specific site, with your real values already filled in.

The public guides here are deliberately generic. The Integration Assistant is the personalised version, and it is available to every publisher at no extra cost.

## Rules that hold on every platform

- AdGrove serves rewarded ads only. The viewer chooses to watch, so there are no interruptive placements and skipping is disabled.
- The ad always plays to its final frame before the content unlocks.
- If no suitable ad is available, AdGrove unlocks the content anyway rather than leaving a viewer stuck.
- The player is loaded from AdGrove and updates itself. You never have to replace the snippet to receive player updates.
- One player script per page is enough, however many gated items that page contains.

## Related guides

- [Next.js](https://adgrove.io/docs/install/nextjs)
- [Custom HTML](https://adgrove.io/docs/install/custom-html)
- [React](https://adgrove.io/docs/install/react)

## Official Astro references

- [Astro: scripts and event handling](https://docs.astro.build/en/guides/client-side-scripts/)


---

# How to install AdGrove on Base44

> Official AdGrove installation guide for Base44 apps.

Canonical page: https://adgrove.io/docs/install/base44
Last reviewed: 2026-08-31
Also known as: base44.app

To install AdGrove on a Base44 app, add the AdGrove player script through the app's custom code or HTML embed capability, then place the gate markup where the reward button belongs. If you cannot reach the head, verify instead with the AdGrove TXT record, added at your domain provider.

## Does AdGrove work with Base44?

Yes, where the app allows custom code or an HTML embed. Add the AdGrove player script to the page shell and render the gate in an embed.

## What you need before installing

- An AdGrove publisher account. Creating one is free.
- Your website registered in AdGrove, so AdGrove can issue the site-specific values used below.
- A placement created for that website, which is where your ad slot settings and earnings live.
- Access to the part of your website where custom code or a meta tag can be added.

## How the AdGrove integration works on Base44

Base44 apps render standard HTML, so the AdGrove player behaves normally once it is loaded.

If the platform does not expose the head, the TXT record route is the reliable one. That record is added wherever your domain's DNS is managed, which is normally your domain registrar, not Base44.

## Installation steps for Base44

### 1. Add the AdGrove player script

Use the app's custom code or HTML embed option to load the AdGrove player script on the pages you want to monetise.

AdGrove player script:

```html
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>
```

### 2. Add the gate and verify your domain

Place the gate markup in an embed where the reward button belongs. If you cannot add a meta tag to the head, verify your domain with the AdGrove TXT record instead, adding it in the DNS panel of whoever manages your domain.

Gate markup:

```html
<!-- 1. Load the AdGrove player once per page -->
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>

<!-- 2. Gate whatever the viewer wants to reach -->
<adgrove-gate>
  <button type="button">Watch a short ad to continue</button>
</adgrove-gate>
```

## Where your real values come from

- `YOUR_WEBSITE_API_KEY`: Issued per website when you register that website in AdGrove. It identifies the site the impression belongs to and is safe to appear in your page source.
- `YOUR_PLACEMENT_KEY`: Issued per placement. It tells AdGrove which ad slot on your site served the impression, so earnings are attributed correctly.
- `YOUR_VERIFICATION_TOKEN`: Issued when you add a website and shown on that website in your AdGrove dashboard. It proves you control the domain and is used once, during verification.

## How to verify your Base44 domain

1. Add the AdGrove verification meta tag to the site head, or add the TXT record to your DNS if your platform will not let you edit the head.
2. DNS records are added wherever your domain's DNS is managed: usually your domain registrar or DNS host, not inside your website builder. Some platforms host the domain themselves, in which case the DNS editor lives in that platform.
3. Publish the site so the tag or record is live on the public domain.
4. Open the website in your AdGrove dashboard and start verification. AdGrove fetches your public domain and looks for the tag, then falls back to a DNS lookup.
5. Once verification succeeds, your placement can serve ads. Verification only has to pass once per website.
6. Prefer TXT record verification on platforms that do not expose the document head. Add the record at your domain registrar or DNS host, not in the builder.

## Troubleshooting AdGrove on Base44

### What if Base44 will not let me edit the head?

Use the TXT record for verification, added at your domain provider. The player itself only needs a script tag anywhere in the body.

## What happens after you sign up

Once your website is registered, AdGrove's Integration Assistant inspects your actual site, detects how it was built and gives instructions written for that specific site, with your real values already filled in.

The public guides here are deliberately generic. The Integration Assistant is the personalised version, and it is available to every publisher at no extra cost.

## Rules that hold on every platform

- AdGrove serves rewarded ads only. The viewer chooses to watch, so there are no interruptive placements and skipping is disabled.
- The ad always plays to its final frame before the content unlocks.
- If no suitable ad is available, AdGrove unlocks the content anyway rather than leaving a viewer stuck.
- The player is loaded from AdGrove and updates itself. You never have to replace the snippet to receive player updates.
- One player script per page is enough, however many gated items that page contains.

## Related guides

- [Lovable](https://adgrove.io/docs/install/lovable)
- [Custom HTML](https://adgrove.io/docs/install/custom-html)

## Official Base44 references

- [AdGrove player script URL](https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js)


---

# How to install AdGrove on Bolt

> Official AdGrove installation guide for projects built with Bolt.

Canonical page: https://adgrove.io/docs/install/bolt
Last reviewed: 2026-08-31
Also known as: bolt.new, StackBlitz Bolt

To install AdGrove on a Bolt project, add the AdGrove player script to index.html before the closing body tag, add the verification meta tag to the head, and render the gate element in the component you want gated.

## Does AdGrove work with Bolt?

Yes. Bolt generates standard web projects, so add the AdGrove player script to index.html and render the gate in a component.

## What you need before installing

- An AdGrove publisher account. Creating one is free.
- Your website registered in AdGrove, so AdGrove can issue the site-specific values used below.
- A placement created for that website, which is where your ad slot settings and earnings live.
- Access to the part of your website where custom code or a meta tag can be added.

## How the AdGrove integration works on Bolt

Bolt projects are usually Vite-based React or plain static sites, so the AdGrove React or custom HTML installation applies unchanged.

## Installation steps for Bolt

### 1. Add the script and verification tag to index.html

Edit index.html directly, or ask Bolt to do it. The verification meta tag goes in the head, the player script before the closing body tag.

Script and verification tag:

```html
<meta name="adgrove-site-verification" content="YOUR_VERIFICATION_TOKEN" />
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>
```

### 2. Render the gate and deploy

Add the gate markup to the page or component you want gated, then deploy and verify your live domain.

Gate markup:

```html
<!-- 1. Load the AdGrove player once per page -->
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>

<!-- 2. Gate whatever the viewer wants to reach -->
<adgrove-gate>
  <button type="button">Watch a short ad to continue</button>
</adgrove-gate>
```

## Where your real values come from

- `YOUR_WEBSITE_API_KEY`: Issued per website when you register that website in AdGrove. It identifies the site the impression belongs to and is safe to appear in your page source.
- `YOUR_PLACEMENT_KEY`: Issued per placement. It tells AdGrove which ad slot on your site served the impression, so earnings are attributed correctly.
- `YOUR_VERIFICATION_TOKEN`: Issued when you add a website and shown on that website in your AdGrove dashboard. It proves you control the domain and is used once, during verification.

## How to verify your Bolt domain

1. Add the AdGrove verification meta tag to the site head, or add the TXT record to your DNS if your platform will not let you edit the head.
2. DNS records are added wherever your domain's DNS is managed: usually your domain registrar or DNS host, not inside your website builder. Some platforms host the domain themselves, in which case the DNS editor lives in that platform.
3. Publish the site so the tag or record is live on the public domain.
4. Open the website in your AdGrove dashboard and start verification. AdGrove fetches your public domain and looks for the tag, then falls back to a DNS lookup.
5. Once verification succeeds, your placement can serve ads. Verification only has to pass once per website.
6. Verify the deployed domain rather than the Bolt preview URL.

## Troubleshooting AdGrove on Bolt

### Why does Bolt strip my AdGrove script when it regenerates the project?

Regeneration can overwrite index.html. Re-add the script tag, or keep the AdGrove installation in a component Bolt is not rewriting.

## What happens after you sign up

Once your website is registered, AdGrove's Integration Assistant inspects your actual site, detects how it was built and gives instructions written for that specific site, with your real values already filled in.

The public guides here are deliberately generic. The Integration Assistant is the personalised version, and it is available to every publisher at no extra cost.

## Rules that hold on every platform

- AdGrove serves rewarded ads only. The viewer chooses to watch, so there are no interruptive placements and skipping is disabled.
- The ad always plays to its final frame before the content unlocks.
- If no suitable ad is available, AdGrove unlocks the content anyway rather than leaving a viewer stuck.
- The player is loaded from AdGrove and updates itself. You never have to replace the snippet to receive player updates.
- One player script per page is enough, however many gated items that page contains.

## Related guides

- [Lovable](https://adgrove.io/docs/install/lovable)
- [React](https://adgrove.io/docs/install/react)
- [Custom HTML](https://adgrove.io/docs/install/custom-html)

## Official Bolt references

- [AdGrove player script URL](https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js)


---

# How to install AdGrove on Carrd

> Official AdGrove installation guide for Carrd sites, including the Pro plan requirement.

Canonical page: https://adgrove.io/docs/install/carrd
Last reviewed: 2026-08-31
Also known as: carrd.co, Carrd one-page site

To install AdGrove on Carrd, you need a Carrd Pro plan. Add an Embed element containing the AdGrove player script and the gate markup, then publish. Free Carrd sites cannot run custom code.

## Does AdGrove work with Carrd?

Yes, on Carrd Pro. Embed widgets and custom code are Pro features, so a free Carrd site cannot run the AdGrove player.

## What you need before installing

- An AdGrove publisher account. Creating one is free.
- Your website registered in AdGrove, so AdGrove can issue the site-specific values used below.
- A placement created for that website, which is where your ad slot settings and earnings live.
- Access to the part of your website where custom code or a meta tag can be added.
- A Carrd Pro plan.

## How the AdGrove integration works on Carrd

Carrd restricts embeds and custom code to Pro plans. With Pro, an Embed element can hold both the script tag and the gate markup.

Carrd sites are single pages, so one embed usually covers the whole installation.

## Installation steps for Carrd

### 1. Add an Embed element with the AdGrove player and gate

In the Carrd editor, add an Embed element where the reward button should appear, choose the code option, and paste the AdGrove player script followed by the gate markup.

Player and gate:

```html
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>
<!-- 1. Load the AdGrove player once per page -->
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>

<!-- 2. Gate whatever the viewer wants to reach -->
<adgrove-gate>
  <button type="button">Watch a short ad to continue</button>
</adgrove-gate>
```

### 2. Verify your domain with a TXT record

Carrd does not give reliable access to the document head, so verify with the AdGrove TXT record on your custom domain. Add the record wherever that domain's DNS is managed, which is your registrar unless you bought the domain through Carrd.

## Where your real values come from

- `YOUR_WEBSITE_API_KEY`: Issued per website when you register that website in AdGrove. It identifies the site the impression belongs to and is safe to appear in your page source.
- `YOUR_PLACEMENT_KEY`: Issued per placement. It tells AdGrove which ad slot on your site served the impression, so earnings are attributed correctly.
- `YOUR_VERIFICATION_TOKEN`: Issued when you add a website and shown on that website in your AdGrove dashboard. It proves you control the domain and is used once, during verification.

## How to verify your Carrd domain

1. Add the AdGrove verification meta tag to the site head, or add the TXT record to your DNS if your platform will not let you edit the head.
2. DNS records are added wherever your domain's DNS is managed: usually your domain registrar or DNS host, not inside your website builder. Some platforms host the domain themselves, in which case the DNS editor lives in that platform.
3. Publish the site so the tag or record is live on the public domain.
4. Open the website in your AdGrove dashboard and start verification. AdGrove fetches your public domain and looks for the tag, then falls back to a DNS lookup.
5. Once verification succeeds, your placement can serve ads. Verification only has to pass once per website.
6. Use TXT record verification on Carrd, added at your domain provider. A custom domain is required for ads to serve.

## Troubleshooting AdGrove on Carrd

### Can I use AdGrove on a free Carrd site?

No. Carrd limits embeds and custom code to Pro, and the AdGrove player needs one of those. Upgrade to Carrd Pro first.

## What happens after you sign up

Once your website is registered, AdGrove's Integration Assistant inspects your actual site, detects how it was built and gives instructions written for that specific site, with your real values already filled in.

The public guides here are deliberately generic. The Integration Assistant is the personalised version, and it is available to every publisher at no extra cost.

## Rules that hold on every platform

- AdGrove serves rewarded ads only. The viewer chooses to watch, so there are no interruptive placements and skipping is disabled.
- The ad always plays to its final frame before the content unlocks.
- If no suitable ad is available, AdGrove unlocks the content anyway rather than leaving a viewer stuck.
- The player is loaded from AdGrove and updates itself. You never have to replace the snippet to receive player updates.
- One player script per page is enough, however many gated items that page contains.

## Related guides

- [Custom HTML](https://adgrove.io/docs/install/custom-html)
- [Squarespace](https://adgrove.io/docs/install/squarespace)

## Official Carrd references

- [AdGrove player script URL](https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js)


---

# How to install AdGrove on Gatsby

> Official AdGrove installation guide for Gatsby sites.

Canonical page: https://adgrove.io/docs/install/gatsby
Last reviewed: 2026-08-31
Also known as: GatsbyJS, Gatsby site

To install AdGrove on Gatsby, load the player with the Gatsby Script component using the idle or post-hydrate strategy, add the verification meta tag through Gatsby Head, then render the gate in a React component.

## Does AdGrove work with Gatsby?

Yes. Add the AdGrove player script with the Gatsby Script component and render the gate in a React component.

## What you need before installing

- An AdGrove publisher account. Creating one is free.
- Your website registered in AdGrove, so AdGrove can issue the site-specific values used below.
- A placement created for that website, which is where your ad slot settings and earnings live.
- Access to the part of your website where custom code or a meta tag can be added.

## How the AdGrove integration works on Gatsby

Gatsby provides a Script component that handles third-party scripts across client-side navigation.

Gatsby Head is the supported way to add meta tags per page, including the AdGrove verification tag.

## Installation steps for Gatsby

### 1. Add the verification meta tag with Gatsby Head

Export a Head component from your page or layout containing the AdGrove verification meta tag.

Verification meta tag:

```html
<meta name="adgrove-site-verification" content="YOUR_VERIFICATION_TOKEN" />
```

### 2. Load the player with the Gatsby Script component

Import Script from gatsby and render it in your layout with the AdGrove player URL.

Gatsby Script:

```tsx
import { Script } from 'gatsby';

<Script src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js" strategy="idle" />
```

### 3. Render the gate

Render the gate element in the component you want gated and attach the unlock listener with a ref.

Gate markup:

```html
<!-- 1. Load the AdGrove player once per page -->
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>

<!-- 2. Gate whatever the viewer wants to reach -->
<adgrove-gate>
  <button type="button">Watch a short ad to continue</button>
</adgrove-gate>
```

## Where your real values come from

- `YOUR_WEBSITE_API_KEY`: Issued per website when you register that website in AdGrove. It identifies the site the impression belongs to and is safe to appear in your page source.
- `YOUR_PLACEMENT_KEY`: Issued per placement. It tells AdGrove which ad slot on your site served the impression, so earnings are attributed correctly.
- `YOUR_VERIFICATION_TOKEN`: Issued when you add a website and shown on that website in your AdGrove dashboard. It proves you control the domain and is used once, during verification.

## How to verify your Gatsby domain

1. Add the AdGrove verification meta tag to the site head, or add the TXT record to your DNS if your platform will not let you edit the head.
2. DNS records are added wherever your domain's DNS is managed: usually your domain registrar or DNS host, not inside your website builder. Some platforms host the domain themselves, in which case the DNS editor lives in that platform.
3. Publish the site so the tag or record is live on the public domain.
4. Open the website in your AdGrove dashboard and start verification. AdGrove fetches your public domain and looks for the tag, then falls back to a DNS lookup.
5. Once verification succeeds, your placement can serve ads. Verification only has to pass once per website.
6. Gatsby builds static HTML, so the verification tag is present in the served markup.

## Troubleshooting AdGrove on Gatsby

### Why does the AdGrove player not survive navigation in Gatsby?

Use the Gatsby Script component rather than a raw script tag, so Gatsby keeps the script loaded across client-side route changes.

## What happens after you sign up

Once your website is registered, AdGrove's Integration Assistant inspects your actual site, detects how it was built and gives instructions written for that specific site, with your real values already filled in.

The public guides here are deliberately generic. The Integration Assistant is the personalised version, and it is available to every publisher at no extra cost.

## Rules that hold on every platform

- AdGrove serves rewarded ads only. The viewer chooses to watch, so there are no interruptive placements and skipping is disabled.
- The ad always plays to its final frame before the content unlocks.
- If no suitable ad is available, AdGrove unlocks the content anyway rather than leaving a viewer stuck.
- The player is loaded from AdGrove and updates itself. You never have to replace the snippet to receive player updates.
- One player script per page is enough, however many gated items that page contains.

## Related guides

- [React](https://adgrove.io/docs/install/react)
- [Next.js](https://adgrove.io/docs/install/nextjs)
- [Custom HTML](https://adgrove.io/docs/install/custom-html)

## Official Gatsby references

- [Gatsby: Script component](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-script/)


---

# How to install AdGrove on Nuxt

> Official AdGrove installation guide for Nuxt applications.

Canonical page: https://adgrove.io/docs/install/nuxt
Last reviewed: 2026-08-31
Also known as: Nuxt 3, Vue Nuxt

To install AdGrove on Nuxt, add the AdGrove player script and the verification meta tag through app.head in nuxt.config.ts, then render the gate element in a component and listen for the unlock event on mount.

## Does AdGrove work with Nuxt?

Yes. Register the AdGrove player through app.head in nuxt.config, or with useHead, then render the gate in a component.

## What you need before installing

- An AdGrove publisher account. Creating one is free.
- Your website registered in AdGrove, so AdGrove can issue the site-specific values used below.
- A placement created for that website, which is where your ad slot settings and earnings live.
- Access to the part of your website where custom code or a meta tag can be added.

## How the AdGrove integration works on Nuxt

Nuxt manages the document head declaratively, so both the script and the meta tag are configuration rather than raw HTML.

The gate needs a DOM listener, so attach it in onMounted where the DOM exists.

## Installation steps for Nuxt

### 1. Register the script and meta tag in nuxt.config.ts

Add both to app.head so they are present on every route.

nuxt.config.ts:

```typescript
export default defineNuxtConfig({
  app: {
    head: {
      meta: [{ name: 'adgrove-site-verification', content: 'YOUR_VERIFICATION_TOKEN' }],
      script: [{ src: 'https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js', async: true }],
    },
  },
});
```

### 2. Render the gate in a component

Render the gate element in your template and attach the unlock listener in onMounted using a template ref.

Gate markup:

```html
<!-- 1. Load the AdGrove player once per page -->
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>

<!-- 2. Gate whatever the viewer wants to reach -->
<adgrove-gate>
  <button type="button">Watch a short ad to continue</button>
</adgrove-gate>
```

## Where your real values come from

- `YOUR_WEBSITE_API_KEY`: Issued per website when you register that website in AdGrove. It identifies the site the impression belongs to and is safe to appear in your page source.
- `YOUR_PLACEMENT_KEY`: Issued per placement. It tells AdGrove which ad slot on your site served the impression, so earnings are attributed correctly.
- `YOUR_VERIFICATION_TOKEN`: Issued when you add a website and shown on that website in your AdGrove dashboard. It proves you control the domain and is used once, during verification.

## How to verify your Nuxt domain

1. Add the AdGrove verification meta tag to the site head, or add the TXT record to your DNS if your platform will not let you edit the head.
2. DNS records are added wherever your domain's DNS is managed: usually your domain registrar or DNS host, not inside your website builder. Some platforms host the domain themselves, in which case the DNS editor lives in that platform.
3. Publish the site so the tag or record is live on the public domain.
4. Open the website in your AdGrove dashboard and start verification. AdGrove fetches your public domain and looks for the tag, then falls back to a DNS lookup.
5. Once verification succeeds, your placement can serve ads. Verification only has to pass once per website.
6. Server-rendered Nuxt puts the meta tag in the initial HTML, so verification works without JavaScript.

## Troubleshooting AdGrove on Nuxt

### Why does Vue warn about the adgrove-gate element in Nuxt?

Tell Vue it is a custom element by setting vue.compilerOptions.isCustomElement in nuxt.config to treat tags starting with adgrove- as custom elements.

## What happens after you sign up

Once your website is registered, AdGrove's Integration Assistant inspects your actual site, detects how it was built and gives instructions written for that specific site, with your real values already filled in.

The public guides here are deliberately generic. The Integration Assistant is the personalised version, and it is available to every publisher at no extra cost.

## Rules that hold on every platform

- AdGrove serves rewarded ads only. The viewer chooses to watch, so there are no interruptive placements and skipping is disabled.
- The ad always plays to its final frame before the content unlocks.
- If no suitable ad is available, AdGrove unlocks the content anyway rather than leaving a viewer stuck.
- The player is loaded from AdGrove and updates itself. You never have to replace the snippet to receive player updates.
- One player script per page is enough, however many gated items that page contains.

## Related guides

- [React](https://adgrove.io/docs/install/react)
- [Astro](https://adgrove.io/docs/install/astro)
- [Custom HTML](https://adgrove.io/docs/install/custom-html)

## Official Nuxt references

- [Nuxt: head and meta configuration](https://nuxt.com/docs/getting-started/seo-meta)


---

# How to install AdGrove on Replit

> Official AdGrove installation guide for Replit apps, including how to instruct Replit Agent to wire up the rewarded gate.

Canonical page: https://adgrove.io/docs/install/replit
Last reviewed: 2026-08-31
Also known as: Replit app, Replit Agent, replit.com

To install AdGrove on a Replit app, add the AdGrove player script before the closing body tag of your HTML or template, add the verification meta tag to the head, and render the gate where the reward button belongs. Deploy the Repl so the code is on a public domain.

## Does AdGrove work with Replit?

Yes. Replit apps are ordinary web apps, so add the AdGrove player script to your HTML template and render the gate in your markup.

## What you need before installing

- An AdGrove publisher account. Creating one is free.
- Your website registered in AdGrove, so AdGrove can issue the site-specific values used below.
- A placement created for that website, which is where your ad slot settings and earnings live.
- Access to the part of your website where custom code or a meta tag can be added.

## How the AdGrove integration works on Replit

Replit hosts real web servers and static sites, so nothing about AdGrove is Replit-specific.

The only thing to get right is that verification and ad serving happen on your deployed domain, not on the development preview.

## Installation steps for Replit

### 1. Add the AdGrove script and verification tag

Open the HTML file or template that renders your pages. Put the verification meta tag in the head and the AdGrove player script before the closing body tag.

Script and verification tag:

```html
<meta name="adgrove-site-verification" content="YOUR_VERIFICATION_TOKEN" />
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>
```

### 2. Render the gate

Add the gate markup where the reward button should appear, with the content you want unlocked inside it.

Gate markup:

```html
<!-- 1. Load the AdGrove player once per page -->
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>

<!-- 2. Gate whatever the viewer wants to reach -->
<adgrove-gate>
  <button type="button">Watch a short ad to continue</button>
</adgrove-gate>
```

### 3. Deploy and verify on the public domain

Deploy the Repl, then verify the deployed domain in AdGrove. If you are asking Replit Agent to do the work, tell it to load the script from the AdGrove URL and never to bundle or proxy it.

## Where your real values come from

- `YOUR_WEBSITE_API_KEY`: Issued per website when you register that website in AdGrove. It identifies the site the impression belongs to and is safe to appear in your page source.
- `YOUR_PLACEMENT_KEY`: Issued per placement. It tells AdGrove which ad slot on your site served the impression, so earnings are attributed correctly.
- `YOUR_VERIFICATION_TOKEN`: Issued when you add a website and shown on that website in your AdGrove dashboard. It proves you control the domain and is used once, during verification.

## How to verify your Replit domain

1. Add the AdGrove verification meta tag to the site head, or add the TXT record to your DNS if your platform will not let you edit the head.
2. DNS records are added wherever your domain's DNS is managed: usually your domain registrar or DNS host, not inside your website builder. Some platforms host the domain themselves, in which case the DNS editor lives in that platform.
3. Publish the site so the tag or record is live on the public domain.
4. Open the website in your AdGrove dashboard and start verification. AdGrove fetches your public domain and looks for the tag, then falls back to a DNS lookup.
5. Once verification succeeds, your placement can serve ads. Verification only has to pass once per website.
6. Verify the deployed domain. Replit development URLs change and are not suitable for ad serving.
7. If you verify with the TXT record instead of the meta tag, add it wherever your domain's DNS is managed, which is your domain registrar. Replit does not host that record for you.

## Troubleshooting AdGrove on Replit

### Can Replit Agent install AdGrove for me?

Yes. Give it the script URL, the gate markup and the instruction to listen for the adgrove-unlock DOM event. Also tell it not to self-host or bundle the player, because the script must load from AdGrove to stay current.

## What happens after you sign up

Once your website is registered, AdGrove's Integration Assistant inspects your actual site, detects how it was built and gives instructions written for that specific site, with your real values already filled in.

The public guides here are deliberately generic. The Integration Assistant is the personalised version, and it is available to every publisher at no extra cost.

## Rules that hold on every platform

- AdGrove serves rewarded ads only. The viewer chooses to watch, so there are no interruptive placements and skipping is disabled.
- The ad always plays to its final frame before the content unlocks.
- If no suitable ad is available, AdGrove unlocks the content anyway rather than leaving a viewer stuck.
- The player is loaded from AdGrove and updates itself. You never have to replace the snippet to receive player updates.
- One player script per page is enough, however many gated items that page contains.

## Related guides

- [Lovable](https://adgrove.io/docs/install/lovable)
- [Custom HTML](https://adgrove.io/docs/install/custom-html)
- [React](https://adgrove.io/docs/install/react)

## Official Replit references

- [AdGrove player script URL](https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js)


---

# How to install AdGrove on SvelteKit

> Official AdGrove installation guide for SvelteKit applications.

Canonical page: https://adgrove.io/docs/install/sveltekit
Last reviewed: 2026-08-31
Also known as: Svelte, SvelteKit app

To install AdGrove on SvelteKit, add the verification meta tag and the AdGrove player script to src/app.html, then render the gate element in a route or component and listen for the unlock event in onMount.

## Does AdGrove work with SvelteKit?

Yes. Add the AdGrove player script to src/app.html and render the gate in a route or component.

## What you need before installing

- An AdGrove publisher account. Creating one is free.
- Your website registered in AdGrove, so AdGrove can issue the site-specific values used below.
- A placement created for that website, which is where your ad slot settings and earnings live.
- Access to the part of your website where custom code or a meta tag can be added.

## How the AdGrove integration works on SvelteKit

src/app.html is the shell SvelteKit renders every page into, which makes it the right place for a site-wide script.

Svelte passes unknown elements through to the DOM, so the gate needs no special handling beyond an event listener.

## Installation steps for SvelteKit

### 1. Add the script and verification tag to src/app.html

Put the verification meta tag inside the head and the AdGrove player script before the closing body tag, alongside the SvelteKit placeholders.

Script and verification tag:

```html
<meta name="adgrove-site-verification" content="YOUR_VERIFICATION_TOKEN" />
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>
```

### 2. Render the gate in a route

Add the gate markup to the page you want gated. For custom unlock behaviour, attach the listener in onMount with bind:this.

Gate markup:

```html
<!-- 1. Load the AdGrove player once per page -->
<script
  src="https://gxztgogbzrpnzfceujno.supabase.co/functions/v1/player-js"
  data-api-key="YOUR_WEBSITE_API_KEY"
  data-placement-key="YOUR_PLACEMENT_KEY"
  defer
></script>

<!-- 2. Gate whatever the viewer wants to reach -->
<adgrove-gate>
  <button type="button">Watch a short ad to continue</button>
</adgrove-gate>
```

## Where your real values come from

- `YOUR_WEBSITE_API_KEY`: Issued per website when you register that website in AdGrove. It identifies the site the impression belongs to and is safe to appear in your page source.
- `YOUR_PLACEMENT_KEY`: Issued per placement. It tells AdGrove which ad slot on your site served the impression, so earnings are attributed correctly.
- `YOUR_VERIFICATION_TOKEN`: Issued when you add a website and shown on that website in your AdGrove dashboard. It proves you control the domain and is used once, during verification.

## How to verify your SvelteKit domain

1. Add the AdGrove verification meta tag to the site head, or add the TXT record to your DNS if your platform will not let you edit the head.
2. DNS records are added wherever your domain's DNS is managed: usually your domain registrar or DNS host, not inside your website builder. Some platforms host the domain themselves, in which case the DNS editor lives in that platform.
3. Publish the site so the tag or record is live on the public domain.
4. Open the website in your AdGrove dashboard and start verification. AdGrove fetches your public domain and looks for the tag, then falls back to a DNS lookup.
5. Once verification succeeds, your placement can serve ads. Verification only has to pass once per website.
6. With server rendering or prerendering, the meta tag is in the served HTML and verification works without JavaScript.

## Troubleshooting AdGrove on SvelteKit

### Why is the AdGrove gate not working after navigating in SvelteKit?

Re-attach your unlock listener in onMount for each mount of the component. The player script itself persists across client-side navigation.

## What happens after you sign up

Once your website is registered, AdGrove's Integration Assistant inspects your actual site, detects how it was built and gives instructions written for that specific site, with your real values already filled in.

The public guides here are deliberately generic. The Integration Assistant is the personalised version, and it is available to every publisher at no extra cost.

## Rules that hold on every platform

- AdGrove serves rewarded ads only. The viewer chooses to watch, so there are no interruptive placements and skipping is disabled.
- The ad always plays to its final frame before the content unlocks.
- If no suitable ad is available, AdGrove unlocks the content anyway rather than leaving a viewer stuck.
- The player is loaded from AdGrove and updates itself. You never have to replace the snippet to receive player updates.
- One player script per page is enough, however many gated items that page contains.

## Related guides

- [Astro](https://adgrove.io/docs/install/astro)
- [React](https://adgrove.io/docs/install/react)
- [Custom HTML](https://adgrove.io/docs/install/custom-html)

## Official SvelteKit references

- [SvelteKit: project structure and app.html](https://svelte.dev/docs/kit/project-structure)