Skip to content
ptinStack
Community
Getting started

Install OptinStack on your site

By OptinStack Team - Jun 28, 2026 - 3 min read

OptinStack ships as a single script tag. Place it as early as possible in your page head so it can block known trackers before they load. Once it loads, it fetches your project configuration and renders the consent banner inside a Shadow DOM, so the component is isolated from most host-page CSS. This guide walks through adding the tag, placing it for the strongest enforcement, and verifying the banner appears.

1. Copy your project snippet

In your OptinStack dashboard, open Implementation for the project you want to install and copy the snippet from the Script Installation card. The snippet already contains your project ID, so it works as-is on any domain you have added to that project.

Add every domain you operate under the same project. One snippet, one project, many domains. Subdomains count as separate domains for billing and scanning.

2. Add the script tag

Paste the snippet into the <head> of every page where you want the banner to appear. Place it as the first child of the head, before any third-party scripts you want consent to govern. The browser parses a plain script synchronously, which gives OptinStack its earliest chance to install blocking before later trackers run.

OptinStack install tag (stable channel, auto-update)
HTML
<script
  src="https://api.optinstack.com/v1/js/runtime/stable/optinstack.js"
  data-optinstack-sdk="consent"
  data-optinstack-site="YOUR_PROJECT_ID"
></script>

3. Verify the banner

Load your site in a fresh browser session (or an incognito window) and confirm the banner appears. The banner renders once per visitor until they make a choice. If it does not appear, check that the project ID matches and that the current domain is added to the project.

Always test in a session with no prior consent. If you already accepted, the banner will not re-show until consent expires or is reset.

Pinned runtime with SRI (Enterprise)

Standard installs follow the stable channel and receive runtime updates automatically. Enterprise and internal beta projects can instead pin the runtime to an immutable version URL and protect it with Subresource Integrity. Pinned installs are reviewable and tamper-evident, but they do not receive automatic runtime hotfixes: to pick up runtime code changes, select a newer pinned version and republish.

Pinned runtime tag with root SRI
HTML
<script
  src="https://api.optinstack.com/v1/js/runtime/{version}/optinstack.js"
  integrity="{optinstack_sri}"
  crossorigin="anonymous"
  data-optinstack-sdk="consent"
  data-optinstack-site="YOUR_PROJECT_ID"
></script>

Pinning only freezes the executable runtime bytes. Banner configuration, tracker inventory, region context, and translations still load as JSON data, so publishing banner copy, scanning, or translating your preferences dialog does not change the pinned runtime bytes and never requires re-issuing the SRI hash.

Configure a pinned install from the dashboard

  1. Open the project and go to Settings → Runtime.
  2. Under Pinned runtime version, choose the immutable release you want to install. Enabling SRI requires a pinned version.
  3. Turn on Root runtime SRI. The dashboard shows the root and banner SRI hashes for the selected release so you can copy them into a security review before publishing.
  4. Copy the generated pinned snippet from Implementation and install it in your site head exactly as provided.

To receive runtime code updates, return to Settings → Runtime, select a newer pinned version, and republish. Disabling SRI or clearing the pinned version returns the install to the selected channel (stable by default).

Verify integrity in production

  1. Fetch the versioned manifest. It lists the optinstack and banner integrity hashes for the release.
Fetch the release manifest
bash
curl -s https://api.optinstack.com/v1/js/runtime/{version}/manifest.json
  1. Download both artifacts, compute a sha384- hash (base64 of the SHA-384 digest), and compare against the manifest. The recomputed values must match exactly.
Recompute SRI from served bytes
bash
curl -s https://api.optinstack.com/v1/js/runtime/{version}/optinstack.js \
  | openssl dgst -sha384 -binary | base64
# -> sha384-...
  1. Confirm the snippet in your page head carries both integrity and crossorigin="anonymous". If either is missing or the bytes do not match, the browser refuses to execute the runtime.

Both the root optinstack.js and the split banner.js are integrity-protected on pinned installs. The runtime reads the banner integrity from the release manifest and applies it when loading banner.js, so you only need to add the root SRI to your snippet.

Related articles

Implementation

Embed in Framer, Webflow, and Next.js

Install OptinStack in Framer, Webflow, and Next.js using the same runtime with platform-specific entry points.

OptinStack Team · 2 min read

Implementation

Integrate OptinStack with Google Tag Manager

Configure OptinStack with Google Tag Manager from start to finish, including the GTM template, Consent Mode v2 signals, defaults, triggers, consent settings, and testing.

OptinStack Team · 7 min read

Implementation

Block trackers before they load

How OptinStack blocks trackers before they load, how scripts are tagged to consent categories, and how to allowlist essential scripts.

OptinStack Team · 2 min read

How helpful was this article?