Klaviyo

Configure Klaviyo

Copy the six-character public API key, also called the site ID, from Settings > Account > API keys in Klaviyo. It appears in every page that loads Klaviyo, so it is safe in browser code. Never put a private key (pk_...) in the browser. If you pass one, the helper logs an error and Klaviyo does not load.

npm install @c15t/integrations@alpha

pnpm add @c15t/integrations@alpha

yarn add @c15t/integrations@alpha

bun add @c15t/integrations@alpha

import { klaviyo } from '@c15t/integrations/klaviyo';

export const scripts = [klaviyo({ publicApiKey: 'YOUR_PUBLIC_API_KEY' })];

Remove Klaviyo's own snippet first. On Shopify, BigCommerce, WooCommerce and the other platforms where Klaviyo installs Klaviyo.js for you, turn that installation off, or c15t is not the only thing loading it.

Register the scripts

Complete your framework quickstart first. Keep its Inth endpoint, policy, styles and consent UI. Remove the vendor's original script, SDK initializer or tag-manager entry, so the vendor loads only through c15t.

The vendor pages put the helper in src/consent-scripts.ts. If your framework quickstart already has a scripts array, such as the one in c15t.config.ts in the Next.js guide, add the helper to that array instead of creating a second file. The scripts export is a configuration, not an initializer. Add it to the c15t provider you already have, at the registration point for your framework below. These are edits to that provider, not a second provider.

import { defineConsentConfig } from 'c15t/next';
import { scripts } from './src/consent-scripts';

export default defineConsentConfig({ scripts });

Options

Why Klaviyo needs two categories

One script, Klaviyo.js, serves both signup forms and Active on Site tracking. Klaviyo offers no setting or browser API to load one without the other. Forms grow your marketing lists, and tracking records which identified visitors are on the site and feeds segments, attribution and automated email and SMS flows. Klaviyo classifies its __kla_id cookie as a targeting cookie.

So by default klaviyo loads only when both marketing and measurement are allowed. With either category alone, or neither, c15t requests nothing from Klaviyo and Klaviyo writes no storage. Once the second category is allowed, Klaviyo.js loads without a page reload, once.

If your legal review classifies Klaviyo differently, or your account uses only part of it, pass your own condition:

klaviyo({ publicApiKey: 'YOUR_PUBLIC_API_KEY', category: 'marketing' });

Forms-only mode

mode: 'forms-only' loads Klaviyo.js once marketing is allowed and sets Klaviyo's __kla_off=true cookie before the bundle runs. Klaviyo documents this cookie as the switch that keeps forms working while it stops tracking.

klaviyo({ publicApiKey: 'YOUR_PUBLIC_API_KEY', mode: 'forms-only' });

In this mode Klaviyo.js sends no Active on Site events, and identify and track calls send nothing. It is not a cookieless mode:

• Klaviyo.js still writes an anonymous __kla_id cookie, plus the Web Storage keys listed in storage.
• Form views and steps are still reported to Klaviyo's form analytics, and each report carries the anonymous visitor ID from __kla_id.
• Forms cannot target by visitor type, such as hiding a form from existing subscribers.
• A submission still creates the profile and records the subscription, but the browser stays unidentified, so Klaviyo records no onsite activity for that person afterwards.
• The mode is fixed when the page loads. Allowing measurement later does not turn tracking on. Switch to mode: 'full' in your configuration for that.
• __kla_off is a session cookie, and the helper never deletes it, since a site or visitor may also set it to opt out. If you move a site from forms-only to full mode, visitors who saw the forms-only version keep tracking off until they close the browser.

There is no measurement-only mode. Klaviyo cannot suppress published forms while still tracking visitors.

Vendor switches, opt-out regions and IAB mode

The helper sets the vendor slug klaviyo, so a visitor can allow marketing and measurement and still switch Klaviyo off. Declare the vendor with a name and privacy policy URL so your preference UI can show the switch; until then c15t logs a warning in the console. See vendor consent for your framework.

• With the switch off, Klaviyo.js does not load. Switching it off after Klaviyo has loaded reloads the page, and the new page loads nothing from Klaviyo.
• clearOnRevocation runs per category, so switching off only the vendor leaves __kla_id and Klaviyo's other storage in place. Klaviyo stops reading them because it no longer loads.
• In regions whose policy allows marketing and measurement before a choice, such as most of the US, Klaviyo.js loads on the first page view. A visitor sending Global Privacy Control has both denied, so Klaviyo does not load.
• In IAB TCF mode, vendor switches are ignored. Klaviyo has no TCF vendor ID in this helper, so it loads once the TCF purposes behind marketing (2, 3 and 4) and measurement (7, 8 and 9) are all granted.

Send your own events only with consent

The helper never calls identify, track or Klaviyo's Viewed Product and Added to Cart snippets. Send them from your own code.

Before Klaviyo.js loads, the helper installs the klaviyo object from Klaviyo's onsite snippet. Calls made before the bundle arrives are queued, and Klaviyo.js replays them. The object exists only after the helper's consent condition held on this page, so optional chaining drops calls made without consent:

window.klaviyo?.track('Added to Cart', {
	ProductName: product.name,
	Price: product.price,
});

This check assumes c15t reloads the page on revocation, which it does by default. With reloadOnConsentRevoked: false, the object stays after a revocation, so check the categories with your framework's consent API before each call. In forms-only mode, Klaviyo drops these calls even though the object exists.

Account settings that change what Klaviyo collects

c15t controls when Klaviyo.js loads. These Klaviyo account settings control what it does once loaded:

• Anonymous visitor activity backfill stores frontend events for unidentified visitors in local storage (kl-post-identification-sync) for up to 14 days, then sends them when the visitor is identified. Klaviyo says this needs both analytics and marketing consent. Turn it off under Settings > Account > Data, Enable anonymous visitor tracking.
• Extended ID and First-Party ID restore an identity after __kla_id expires; First-Party ID adds a __kle_id cookie. Klaviyo recommends updating your cookie notice before enabling either.
• Email and SMS click tracking identifies visitors who arrive from a Klaviyo message through the _kx URL parameter. It can only be turned off for the whole account.

Cookie consent is not subscription consent

Your c15t banner asks whether Klaviyo may run in the browser. A Klaviyo signup form asks whether someone wants your emails or texts. They are separate records: allowing marketing cookies does not subscribe anyone, and a subscription does not grant cookie consent. Keep collecting email and SMS consent in Klaviyo forms, with the wording your channels require.

Storage Klaviyo writes

Observed with Klaviyo.js in October 2026. Klaviyo can change these names.

The datadome and dd* names come from DataDome, the bot protection Klaviyo runs on form submissions.

To delete them when a visitor turns either category off, add them to clearOnRevocation under both categories:

const klaviyoStorage = {
	cookies: ['__kla_id', '__kle_id', 'datadome'],
	localStorage: [
		'klaviyoOnsite',
		'__kl_key',
		'$referrer',
		'$last_referrer',
		'kl-post-identification-sync',
		'ddSession',
	],
	sessionStorage: [
		'klaviyoPagesVisitCountV2',
		'klaviyoFormSubmit',
		'_kx',
		'ddCookieCandidateDomain',
	],
};

const clearOnRevocation = {
	marketing: klaviyoStorage,
	measurement: klaviyoStorage,
};

See clear on revocation for your framework for where the option goes. In forms-only mode, list the storage under marketing only.

Content Security Policy

Klaviyo.js appends its modules as new script elements without a nonce. A popup signup form with default styling used these hosts in testing:

When DataDome, the bot protection Klaviyo runs on submissions, challenges a visitor, it loads its check in a frame. Fonts, images and features differ between forms, so test each published form under your policy.

Verify Klaviyo

Filter DevTools Network by klaviyo:

1. Allow marketing only. Nothing loads from Klaviyo, and the Application tab shows no __kla_id cookie.
2. Allow measurement too. klaviyo.js loads from static.klaviyo.com/onsite/js/<your key>/, followed by Klaviyo's modules from static.klaviyo.com and static-tracking.klaviyo.com.
3. In full mode, await klaviyo.account() in the console returns your public API key. In forms-only mode it returns null.
4. A published signup form appears in both modes. The form request goes to static-forms.klaviyo.com/forms/api/v7/<your key>/full-forms.
5. In forms-only mode, the console shows Klaviyo's warning that tracking is disabled, and an identify call sends no request to a.klaviyo.com/client/.

Test in a private window with an opt-in policy. Open DevTools Network, disable the cache and filter by the vendor's domain:

1. Load the page. No request goes to the vendor before you choose.
2. Click Reject, then reload. There is still no vendor request.
3. Open Privacy settings and allow the helper's category. The vendor script loads without a page reload.
4. Turn the category off again and save. c15t reloads the page, and the new page makes no vendor request.

c15t reloads on revocation because removing a script element does not stop code that already ran. The vendor's listeners, timers and queued events stay alive until the page unloads. If you set reloadOnConsentRevoked: false, stop the vendor yourself. Register a callback-only script whose onConsentChange calls the vendor's opt-out API, as shown in custom integrations, and check the permission before each of your own event calls. The reload does not delete cookies the vendor already set; see clear on revocation for your framework.

The helper sets vendor to its script ID, so once you declare that vendor a visitor can turn it off inside an allowed category. See vendor consent for your framework. The consent verification guide covers navigation, expiry and hosting checks.