Before you start
- You can edit the HTML that every page of your site shares, such as a layout or footer template.
- Your game is saved in SpinLoop. Nothing shows to visitors until it is live.
1. Copy your snippet
In SpinLoop, open your game and go to the Install tab. Copy the snippet. It looks like this, with your own game id:
<script src="https://app.getspinloop.com/embed.js" data-campaign="c_0123456789abcdef" async></script>2. Paste it before the closing body tag
Put the snippet just above </body> in the template that every page uses. Keep the async attribute, so the script never blocks your page from rendering.
Single-page apps (React, Vue, Svelte and others)
Add the snippet once, to the HTML file that loads your app (often index.html), not inside a component that mounts and unmounts. The URL include and exclude rules are checked against the address of the first page a visitor loads, not each in-app page change. If you rely on URL rules, test them with the pages people usually land on.
Tag managers
You can add the snippet as a custom HTML tag that fires on all pages. Keep the data-campaign attribute on the script tag: the loader reads it to know which game to show.
3. Allow your site's address
In the Install tab, under Where it can run, add every address the site uses, one per line. Include staging sites if you want to test there.
4. Content Security Policy
If your site sends a Content-Security-Policy header, allow these:
| Directive | Add |
|---|---|
| script-src | https://app.getspinloop.com https://challenges.cloudflare.com |
| connect-src | https://app.getspinloop.com |
| frame-src | https://challenges.cloudflare.com |
| img-src | the address of your logo, if it is not on your own site |
Turnstile is Cloudflare's bot check. It is the only third-party script the game loads.
5. Check it works
- Click Test install in the Install tab.
- Open your site in another tab.
- The Install tab shows "Installed" once we see the snippet running.
Listen for leads on your own page
When someone plays, the widget fires a spinloop:lead event on window. You can use it to fire your own analytics or ad pixels. We never add pixels to your site ourselves.
window.addEventListener("spinloop:lead", (event) => {
// event.detail has the campaign id, the prize label and hasCode. Never the email.
console.log("New lead", event.detail);
});