Skip to content
SpinLoop

How to add the SpinLoop game to any website

One script tag before the closing body tag, plus notes for apps and CSP.

Written by the SpinLoop team. Last reviewed .

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>
Example only. Copy your own snippet: the game id is different for every game.

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:

DirectiveAdd
script-srchttps://app.getspinloop.com https://challenges.cloudflare.com
connect-srchttps://app.getspinloop.com
frame-srchttps://challenges.cloudflare.com
img-srcthe 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

  1. Click Test install in the Install tab.
  2. Open your site in another tab.
  3. 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);
});

Questions

Can I load the snippet with a tag manager?

Yes, as a custom HTML tag that fires on all pages. Keep the data-campaign attribute on the script tag, because the loader reads it.

Do I need to change my cookie banner?

Our widget code does not set cookies. It keeps one localStorage entry so it does not show the game again too soon. Check with your own adviser how that fits your banner.