# 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](/api) and [Banner control](/banner-control).

## Script tag [#script-tag]

The universal install method for any website:

```html
<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](/install) for placement details.

After load, use the API:

```js
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:

* [Script tag](https://optinstack.com/integrations/script-tag)
* [Google Tag Manager](https://optinstack.com/integrations/google-tag-manager)

## Webflow [#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](https://optinstack.com/integrations/webflow)

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](/domain-scans) for details.

## Framer [#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](https://optinstack.com/integrations/framer)

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](/domain-scans) for details.

## Web [#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.

```html
<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 [#dashboard]

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

* [app.optinstack.com](https://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 [#all-integrations]

Browse the full integration catalog on the marketing site:

* [optinstack.com/integrations](https://optinstack.com/integrations)

## Programmatic control [#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](/banner-control) for examples.
