Guides

Embed the Cookie Consent Modal

Step-by-step guide to adding the Neostra cookie consent banner to your website.

Overview

The Neostra cookie consent modal (cpmp-modal) is a lightweight Svelte 5 widget that handles cookie consent collection, preference management, and automatic script blocking. It deploys via a single script tag.

Prerequisites

You need a Collection Point ID from your Neostra dashboard. Create one under CMP > Collection Points.

Step-by-Step Integration

Create a Collection Point

In the Neostra dashboard, go to CMP > Collection Points > New Collection Point. Configure:

Name and brand association
Cookie categories (Necessary, Analytics, Marketing, etc.)
Consent purposes
Banner text and translations

Publish the collection point to get your cpId.

Add the Script Tag

Add this script tag to your website's <head> section:

<script
  src="https://cdn.neostra.io/cpmp/modal.umd.latest.js"
  data-cp-id="YOUR_COLLECTION_POINT_ID"
  defer
></script>

The modal auto-initializes when the page loads. No additional JavaScript is needed.

Configure the Banner (Optional)

The banner appearance and behavior are controlled by your collection point configuration in the Neostra dashboard. You can customize:

Theme: Colors, button styles, fonts
Layout: Banner position (bottom, top, center modal)
Text: Multi-language banner copy
Behavior: Auto-block scripts before consent, GPC detection

Alternatively, pass a local JSON config:

<script
  src="https://cdn.neostra.io/cpmp/modal.umd.latest.js"
  data-cp-id="YOUR_COLLECTION_POINT_ID"
  data-config-url="/path/to/consent-config.json"
  defer
></script>

Listen for Consent Changes

The modal fires a custom event when consent preferences change:

document.addEventListener('cpmp-consent-change', (event) => {
  const { categories, subjectId } = event.detail;
  console.log('Consent updated:', categories);

  // Example: Enable analytics if consented
  if (categories.analytics) {
    initializeAnalytics();
  }
});

Enable Auto-Blocking (Optional)

The auto-blocker prevents third-party scripts from loading before consent is given. Include the auto-blocker script before any other third-party scripts:

<script src="https://cdn.neostra.io/cpmp/autoblocker.js" defer></script>
<script
  src="https://cdn.neostra.io/cpmp/modal.umd.latest.js"
  data-cp-id="YOUR_COLLECTION_POINT_ID"
  defer
></script>

Verify

Load your website — the consent banner should appear
Accept/reject cookies — check browser cookies for the consent record
In the Neostra dashboard, go to CMP > Dashboard to see consent analytics
Check the consent ledger at GET /api/v1/ledger/entries for the audit trail

Consent API

Consent submission and ledger query endpoints.

Was this page helpful?

Last updated 1 week ago

Built with Documentation.AI

Embed the Cookie Consent Modal

Overview

Prerequisites

Step-by-Step Integration

GPC (Global Privacy Control) Support

Testing

Next Steps