Integrations

Choose an integration

Each vendor helper in @c15t/integrations returns a script configuration that you register with your c15t provider. Importing a helper installs nothing on its own. Set up consent with your framework quickstart first, then follow the vendor guide.

npm install @c15t/integrations@alpha

pnpm add @c15t/integrations@alpha

yarn add @c15t/integrations@alpha

bun add @c15t/integrations@alpha

@c15t/integrations is a separate package. Keep importing c15t itself from c15t, for example c15t/react or c15t/next.

The Loading behavior column shows when each helper requests the vendor. Most wait for the category to be allowed. A few load on every page and pass the permission to the vendor's own consent API, so the browser contacts the vendor before a choice.

Embeds

Both guides include all nine framework examples. React and Svelte use ConsentGate; Vue conditionally renders the iframe, and Astro and JavaScript use the existing kernel to control its DOM lifecycle. Embeds do not require @c15t/integrations.

Tag managers

Analytics

Chat and support

Email and SMS

Ads and pixels

Load each vendor once

Remove the vendor's own snippet, tracking image, framework plugin or tag manager entry before adding its helper. c15t cannot gate a copy it did not load. Tag managers and data pipelines such as Segment can load further destinations, which need consent settings of their own.

Framework packages are loaders too. To move their vendors to c15t, see migrate from @next/third-parties for Next.js, and migrate from @nuxt/scripts or migrate from nuxt-gtag for Nuxt.

When a visitor turns off a category they had allowed, c15t reloads the page so that code which already ran stops. Each vendor guide lists what its helper does on revocation and how to check it.

Vendor switches and cookie cleanup

Every helper sets a vendor slug, so once you declare that vendor a visitor can allow its category and still switch the vendor off. Gating also leaves behind the cookies a vendor already wrote; clearOnRevocation deletes them when their category is denied. Each framework documents both in its Scripts and embeds group:

Send events only to allowed integrations

createEventDispatcher from @c15t/integrations/events sends one named event to every registered integration that has an event API and is allowed right now. It drops events while measurement is denied, and one vendor's error does not stop delivery to the others:

import { createEventDispatcher } from '@c15t/integrations/events';

const events = createEventDispatcher({
	scripts,
	getSnapshot: () => runtime.kernel.getSnapshot(),
	pageviews: ['segment'],
});

events.track('docs_search', { resultCount: 4 });
events.pageview(location.pathname);

Pass the same scripts you registered and a function that returns the live consent snapshot. track supports Google Tag Manager, Google Tag, PostHog, Mixpanel, Segment, Hightouch, Heap, Amplitude, LogRocket, Adobe Analytics, Databuddy, Plausible, Fathom, Pirsch, Microsoft Clarity, Hotjar, Vercel Analytics, OneDollarStats, Umami, Rybbit, RudderStack and Matomo. pageview sends single-page-app page views only to the integrations named in pageviews: PostHog, Segment or Hightouch. Call it from your router's navigation hook. The first call records the path without sending, and repeated paths or hash-only changes are skipped.

Add a vendor without a helper

Use custom integrations for a vendor without a helper, or an SDK your app already loads. Test every integration with the consent verification guide.