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

pnpm add @c15t/integrations

yarn add @c15t/integrations

bun add @c15t/integrations

@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 and the vendor's name and privacy policy. Vendor switches are optional: the preference dialog shows only categories until you declare a vendor. Once you do, it lists each helper's vendor with its own switch, and a visitor can allow a category and still switch one vendor off. c15t then does not load that vendor's script. Helpers that load on every page, such as Google Tag Manager, Microsoft UET and Mixpanel, still load and send the vendor a denied signal instead. The dialog lists necessary helpers without a switch. Declare a vendor with the same slug to replace its name and links, for example when you self-host Matomo or PostHog. 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

The event dispatcher 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. Each framework gives you the provider's dispatcher, so you don't pass the scripts or the consent snapshot yourself:

import { useEventDispatcher } from 'c15t/react';
import { useEffect } from 'react';

export const DocsSearch = ({ path }: { path: string }) => {
	const events = useEventDispatcher({ pageviews: ['posthog'] });
	useEffect(() => {
		events.pageview(path);
	}, [events, path]);
	return (
		<button onClick={() => events.track('docs_search', { resultCount: 4 })}>
			Search
		</button>
	);
};

The dispatcher sends to the scripts registered on the provider. Pass scripts to add more. It reads consent when an event goes out, so an event sent right after a visitor withdraws consent is dropped. Every dispatcher for the same provider shares one pageview history, so a component that remounts or a consent change does not resend or lose a pageview.

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. Each framework's scripts page shows where to call it.

Without a provider, createEventDispatcher from @c15t/integrations/events takes scripts and a getSnapshot function that returns the live consent snapshot. Create it once and keep it: a new dispatcher starts a new pageview history.

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.