# Welcome



OptinStack is a Consent Management Platform (CMP) runtime for websites. It renders a consent banner and preferences dialog inside a Shadow DOM, manages visitor consent state, blocks and unblocks third-party scripts and iframes, and records consent updates for reporting.

This site documents the browser runtime, JavaScript API, consent events, and integration patterns for developers adding OptinStack to a site. Product setup, compliance guides, and platform walkthroughs live on [optinstack.com](https://optinstack.com).

## Key topics [#key-topics]

<Cards>
  <Card title="Install" href="/install">
    Add the OptinStack runtime script to your site.
  </Card>

  <Card title="JavaScript API" href="/api">
    Read and update consent state through `window.OptinStack`.
  </Card>

  <Card title="Banner control" href="/banner-control">
    Open preferences, reset consent, custom flows, and iframe placeholder messaging.
  </Card>

  <Card title="Events" href="/events">
    Subscribe to consent changes, blocking events, and reporting errors.
  </Card>

  <Card title="Consent cookie" href="/consent-cookie">
    Understand stored consent state and sharing across subdomains.
  </Card>

  <Card title="Google Consent Mode" href="/consent-mode">
    How OptinStack drives gtag Consent Mode v2 and dataLayer events.
  </Card>
</Cards>

## Quick start [#quick-start]

Add the OptinStack script to your page. It loads the consent runtime, which fetches your project configuration and renders the banner:

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

Once loaded, the API is available at `window.OptinStack`:

```js
await window.OptinStack.ready;
console.log(window.OptinStack.choices);
```

<Callout type="info">
  Replace `{projectId}` with your project ID from the dashboard. See [Getting started](/getting-started) for
  installation details.
</Callout>