npm install
npm run serve
Open a browser at http://localhost:8000
The resulting javascript assets can be found in public/dist.
NODE_ENV=production npm run build
npm run watch
Add the Javascript library to your website. Note the requirement to specify the module attributes to load the JavaScript file.
<script>
window.cmpOptions = {
// Options to set, see below
...
}
</script>
<script src="/path/to/sdk.js" type="module"></script>or
<script>
// Load configuration from Axept.io's AWS S3 configuration bucket
// which contains a JSON file with below configuration options.
window.axeptioSettings = {
projectId: '01234567890123456789abcd'
}
</script>
<script src="/path/to/sdk.js" type="module"></script>or
<!--
Load configuration from Axept.io's AWS S3 configuration bucket by specifying
the projectId as a querystring parameter
-->
<script src="/path/to/sdk.js?projectId=01234567890123456789abcd" type="module"></script>| name | type | description |
|---|---|---|
| Consents | ||
| logo | string | URL of logo image to show in top right of modal |
| title | string | Title (required), default "We're the cookies" |
| subtitle | string | Subtitle (optional) |
| surtitle | string | Subtitle, above the title (optional) |
| introduction | html string | Introduction text which should include explanation which personal data is collected by what technology for what purposes and by how many vendors. Use the placeholder [VENDOR_COUNT] to replace with the number of vendors selected. Use <a href="#page-3"> to link to the vendor page. |
| privacy_policy_url | string | URL of cookie statement |
| cookie_statement_url | string | URL of privacy policy |
| vendors | number[] | An array with id's of selected vendors |
| stacks | number[] | An array of id's of selected stacks |
| purposes | number[] | An array of id's of selected purposes |
| consentLanguage | string | ISO 639-1 2 letter language code, default en |
| publisherRestrictions | object | JavaScript object that provides a number of publisher restrictions per vendor |
| Typography | ||
| font | string | Name of the font to use for text, default Source Sans Pro. The font itself should be loaded separately on the page. |
| font_title | string | Name of the font to use for titles, default Source Sans Pro. The font itself should be loaded separately on the page. |
| Widget Style | ||
| color_scheme | 'light' or 'dark' |
Color scheme to use, default 'light' |
| Colors | ||
| primary_text_color | hex color | The primary text color, e.g. for highlighted button text, default #ffffff |
| primary_color | hex color | The primary color to use, e.g. for button text, link color, default #0f6fde |
| backdrop_color | hex color | The color to use for the backdrop to show the modal on, default #00000080 (e.g. rgba(0, 0, 0, 50%)) |
| button_solid_text_color | hex color | The text color for the main call to action button |
| button_solid_background_color | hex color | The background color for the main call to action button |
| button_solid_border_color | hex color | The border color the main call to action button |
| button_solid_text_color_hover | hex color | The text color for the main call to action button, in hovered state |
| button_solid_background_color_hover | hex color | The background color for the main call to action button, in hovered state |
| button_solid_border_color_hover | hex color | The border color the main call to action button, in hovered state |
| button_outline_text_color | hex color | The text color for the secondary call to action button |
| button_outline_background_color | hex color | The background color for the secondary call to action button |
| button_outline_border_color | hex color | The border color the secondary call to action button |
| button_outline_text_color_hover | hex color | The text color for the secondary call to action button, in hovered state |
| button_outline_background_color_hover | hex color | The background color for the secondary call to action button, in hovered state |
| button_outline_border_color_hover | hex color | The border color the secondary call to action button, in hovered state |
The logo option should contain an absolute URL to a logo to be placed in the top right corner of the CMP modal window.
window.cmpOptions = {
consents: [
{
logo: 'https://www.example.com/logo.svg',
...
}
],
...
}The title, subtitle and surtitle options are shown in the top left of the CMP modal window.
window.cmpOptions = {
consents: [
{
title: 'We\'re the cookies',
subtitle: '',
surtitle: '',
...
}
],
...
}The introduction option specifies the introductory text in HTML format that is used to tell why cookies are necessary.
A TCF 2.2 requirement is to specify how many vendors you work with. This can be achieved by using the placeholder [VENDOR_COUNT] in the introduction which will be replaced with the number of vendors configured. Additionally, this should like to the vendor list.
The HTML is sanitized to prevent XSS attacks.
Additionally, use the following URLs to link to a particular 'page' in the CMP modal:
| URL | Links to |
|---|---|
| #page-0 | Introduction |
| #page-1 | Introduction with purposes or stacks |
| #page-2 | List of purposes, special purposes, features and special features |
| #page-3 | List of vendors |
window.cmpOptions = {
consents: [
{
introduction: '... We work together with <strong><a href="#page-4">[VENDOR_COUNT] third parties</a></strong> to ... ',
...
}
],
...
}Use either the purposes or stacks settings to specify the purposes to which a user has to consent. Stacks are groups of purposes with a description which would simplify the choices made by your users.
Please select stacks or purposes so your vendors can do what they need to do: don't select vendors which require a lot of consents without specifying these purposes / stacks too, and vice versa: don't select purposes / stacks that your vendors don't require consent for.
If you configure stacks, purpose 1 (Store and/or access information on a device) is automatically added as it's never part of any stack.
window.cmpOptions = {
consents: [
{
// Select either stacks or purposes
stacks: [1, 42],
purposes: [1, 2, 3, 4, 5, 6],
...
}
],
}The vendors option specifies which vendors you work with. Make a selection out of all the vendors in IAB's vendor-list. Try to limit the number of vendors to not overwhelm the user with too many choices.
Verify that the vendors you work with, adhere to the privacy standards that you would like your users to consent to.
window.cmpOptions = {
consents: [
{
vendors: [1, 2, 10, 12],
...
}
],
}A publisher can restrict what legitimate interests a vendor can use by explicitly requesting consent instead. THis setting is optional. Use the following syntax:
window.cmpOptions = {
publisherRestrictions = {
"253": { /* vendor id */
"2": 1, /* Purposes 2 and 7: require consent rather than legitimate interest */
"7": 1,
"10": 0 /* Purpose 10: not allowed
},
},
}
The allowed values for each purpose are:
| Restriction Type | Description |
|---|---|
| 0 | Not allowed |
| 1 | Require consent |
| 2 | Require legitimate interest |
Specify the language the modal should be shown in using the consentLanguage option. It should contain a two digit ISO 639-1 language code. Default is English (en). Select from one of the IAB provided languages / translations:
bg, ca, cs, da, de, el, es, et, fi, fr, hr, hu, it, ja, lt, lv, mt, nl, no, pl, ro, ru, sk, sl, sv, tr, uk, zh.
Specify the font to use in the CMP modal to have it comply with your visual identity, using the name of the font, default Source Sans Pro. The font files should be loaded separately. If the font is not loaded / cannot be found, the fallback is Arial, sans-serif.
window.cmpOptions = {
client: {
fonts: {
text: {
family: 'Comic Neue',
},
title: {
family: 'Roboto',
},
},
},
...
}
And load the font separately with, e.g.:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap">
...
</head>
<body>
...
Use color_scheme: 'dark' to select a darkmode style of the CMP modal, the default is light.
window.cmpOptions = {
client: {
widgetStyle: {
color_scheme: 'dark',
},
...
}
}
Specify the primary_color and primary_text_color to match your visual identity. The primary color is used as color for links, foreground color of buttons in non hovered state and background color of checkboxes and switches.
The primary text color is used as foreground color of buttons in hovered state and foreground color of checkboxes and switches.
For more control over button colors, use button_solid_text_color, button_solid_background_color and button_solid_border_color for the solid (main call-to action) button (e.g. accept).
Use button_solid_text_color_hover, button_solid_background_color_hover and button_solid_border_color_hover to specify their hovered colors.
Use button_outline_text_color, button_outline_background_color and button_outline_border_color for the outlined (secondary call-to action) button (e.g. let me choose).
Use button_outline_text_color_hover, button_outline_background_color_hover and button_outline_border_color_hover to specify their hovered colors.
Note that a TCF requirement is that text / background colors should have a contrast ratio of at least 5.
Specify the backdrop_color as a hex RGBA color for the color used to overlay the body, default is #00000080 which translates to rgba(0, 0, 0, 50%).
window.cmpOptions = {
client: {
colors: {
primary_color: '#ff0000',
},
...
}
}