Integrations

OptinStack loads the consent runtime from a single script tag. The runtime fetches your project configuration and renders the banner UI. Every integration uses the same browser API documented in JavaScript API and Banner control.

Script tag

The universal install method for any website:

<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 the tag as the first element 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:

Webflow

Install the OptinStack Webflow app to configure and preview consent in Designer, then add the OptinStack runtime snippet as the first script in your site <head>. Publishing the app configuration does not inject the runtime automatically.

Webflow integration guide

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

Install the OptinStack Framer plugin to configure and preview consent in your canvas, then add the OptinStack runtime snippet as early as possible in your published site <head>. The plugin does not embed the runtime automatically.

Framer integration guide

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.

Web

Load the OptinStack runtime 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 runtime -->
  <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>

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

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 install snippet. Copy the script tag from the Implementation step in your project settings.

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.