Integrations

OptinStack is one install with two ordered script tags (bootstrap, then runtime). Every integration uses the same browser API documented in JavaScript API and Banner control.

Install snippet

The universal install method for any website:

<script src="https://api.optinstack.com/v1/cdn/bootstrap.js?projectId={projectId}"></script>
<script src="https://api.optinstack.com/v1/js/runtime/stable/optinstack.js" data-optinstack-site="{projectId}"></script>

Replace {projectId} with your project ID from the dashboard. Place both tags first inside <head>, before any third-party trackers you want blocked. See Install for placement details.

After load, use the API:

await window.OptinStack.ready;
window.OptinStack.events.on('consent-updated', (detail) => {
  console.log(detail.choices);
});

Platform-specific setup guides with screenshots and dashboard steps are on the marketing site:

Install the OptinStack Webflow app from the Webflow Marketplace to configure and preview consent in Designer, then paste the two-tag OptinStack install as the first entry in Site settings → Custom code → Head code. Publishing the app configuration does not inject the install automatically.

The runtime includes Webflow-specific blocking for map embeds and integrates with Webflow Analyze consent APIs when analytics consent changes.

Register the Webflow development hostname and activate Free or a paid plan for live runtime testing. Confirm the public production hostname visitors use before launch, especially if a custom domain or reverse proxy sits in front of Webflow. Free can also activate on the production host; paid plans include one self-service move. See Domain Scans for details.

Framer

Open the OptinStack plugin from the Framer Marketplace (Open Plugin, then select the project). Configure and preview consent in the canvas, then add the two-tag install at Start of head from Implementation and publish. Framer plugins open immediately; they do not need a separate install step.

Register the Framer development hostname and activate Free or a paid plan for live runtime testing. Confirm the public production hostname visitors use before launch, especially if a custom domain or reverse proxy sits in front of Framer. Free can also activate on the production host; paid plans include one self-service move. See Domain Scans for details.

Google Tag Manager

Install the OptinStack two-tag snippet before the GTM container. Import the downloadable OptinStack template when you need Consent Mode defaults inside GTM, and fire it on Consent Initialization - All Pages. Deleting the GTM consent tag does not remove a two-tag head install.

See Google Consent Mode v2 for signal mapping and dataLayer events.

Web

Load the OptinStack two-tag install as early as possible in your document <head>, before any third party scripts that may set cookies or access storage.

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- OptinStack: bootstrap then runtime -->
  <script src="https://api.optinstack.com/v1/cdn/bootstrap.js?projectId={projectId}"></script>
  <script
    src="https://api.optinstack.com/v1/js/runtime/stable/optinstack.js"
    data-optinstack-site="{projectId}"
  ></script>

  <!-- Google Tag Manager -->
  <script>
    /* GTM bootstrap */
  </script>

  <!-- Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>

  <script>
    /* gtag configuration */
  </script>

  <!-- Other third party scripts -->
  <script src="https://example.com/widget.js"></script>

  <!-- Your application scripts -->
  <script src="/app.js"></script>
</head>

Both OptinStack tags should be the first third-party resources in the document so the runtime can evaluate consent before any other resources load. Place analytics, advertising, chat, embedded widgets, and other third party scripts after them.

For custom resources that have not yet appeared in your tracker inventory, use the data-optinstack-categories attribute to assign the appropriate consent category.

Dashboard

Configure projects, consent rules, tracker blocking, and banner design in the OptinStack dashboard:

app.optinstack.com

The dashboard generates your project ID and two-tag install snippet. Copy the install code from Implementation in your project.

All integrations

Browse the full integration catalog on the marketing site:

optinstack.com/integrations

Programmatic control

Regardless of platform, you interact with the banner and consent state through the same API:

Goal	Approach
Read consent	`OptinStack.choices` or category getters
Accept / reject	`OptinStack.acceptAll()` / `rejectAll()` or category setters
Open preferences	Dispatch `optinstack:open-preferences` on `window`
Reset and re-prompt	`OptinStack.renew()`
React to changes	`OptinStack.subscribe()` or `events.on('consent-updated')`

See Banner control for examples.

Integrations

On this page