Does the install slow down my page?

Both tags are plain synchronous scripts so the browser parses them as the page loads. The banner itself renders inside an isolated Shadow DOM and does not interfere with your page styles.

Where should I place the tags?

Place both tags as the first children of the on every page where the banner should appear, bootstrap then runtime, before any third-party scripts you want consent to govern. No async or defer.

Do I need a different snippet per domain?

No. One project install works on every domain added to that project. Add each domain in the dashboard so OptinStack recognizes it.

Does pinning break automatic updates?

It freezes runtime code, not configuration. Banner copy, tracker inventory, region context, and translations continue to update via bootstrap and JSON. To pick up runtime code changes, select a newer pinned version in the dashboard and update the install.

Why are the root and banner SRI hashes different?

They hash different artifacts. optinstack.js is the consent kernel and banner.js is the Shadow DOM UI bundle. Each has its own sha384 hash in the release manifest. The hash for a given artifact only changes when a new runtime release is published.

Getting started

Install OptinStack on your site

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

OptinStack is one install with two ordered script tags. Bootstrap loads your site configuration while the parser is paused; the runtime tag loads the consent kernel. Place both as early as possible in your page head, before third-party scripts. Once loaded, the kernel renders the consent banner inside a Shadow DOM, so the component is isolated from most host-page CSS. This guide walks through copying the snippet, placing both tags, 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 install code. The snippet already contains your project ID and both tags (bootstrap then runtime), so it works as-is on any domain you have added to that project.

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

2. Add both tags

Paste both tags into the <head> of every page where you want the banner to appear. Place them as the first children of the head, before any third-party scripts. Do not add async or defer.

OptinStack two-tag install (stable runtime channel)

HTML

<script src="https://api.optinstack.com/v1/cdn/bootstrap.js?projectId=YOUR_PROJECT_ID"></script>
<script
  src="https://api.optinstack.com/v1/js/runtime/stable/optinstack.js"
  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

Stable installs keep the same bootstrap tag and update the runtime tag automatically through the stable channel. Every project can instead pin the runtime tag to an immutable version URL 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 update the install.

Pinned two-tag install with runtime SRI

HTML

<script src="https://api.optinstack.com/v1/cdn/bootstrap.js?projectId=YOUR_PROJECT_ID"></script>
<script
  src="https://api.optinstack.com/v1/js/runtime/{version}/optinstack.js"
  integrity="{optinstack_sri}"
  crossorigin="anonymous"
  data-optinstack-site="YOUR_PROJECT_ID"
></script>

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

Configure a pinned install from the dashboard

Open the project and go to Settings → Runtime, or choose a runtime version on Implementation.
Select Pinned and choose the immutable release you want to install. SRI is included for pinned versions.
Copy the generated two-tag install from Implementation and place it in your site head exactly as provided.

To receive runtime code updates on a pinned install, return to Runtime settings, select a newer pinned version, and update the installed tags. Switching back to Stable returns the runtime tag to the automatic-update channel.

Both the root optinstack.js and the split banner.js are integrity-protected on pinned installs. The runtime applies banner integrity when loading banner.js, so the snippet only needs the root runtime integrity attributes.

Getting started

Add your first domain and verify the banner

Add your first public hostname, configure the consent banner, install the snippet, and run or schedule the first scan.

OptinStack Team · 2 min read

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.