# Callback & Events Customise the user's experience programmatically. # Event Broadcasts You can use this to read user's consent to cookie categories and services. View our docs on [Consent Callbacks & Events ›](/block-scripts-cookies/callbacks-events) ## Consent Callbacks ### `cc:onFirstConsent` Triggered the first time user expresses their choice of consent (accept/reject). ```js window.addEventListener("cc:onFirstConsent", function (event) { var detail = event.detail; // detail.cookie // do something }); ``` ### `cc:onConsent` This event is triggered the very first time the user expresses their choice of consent — just like `onFirstConsent` — but also on every subsequent page load. ```js window.addEventListener("cc:onConsent", function (event) { var detail = event.detail; // detail.cookie // do something }); ``` ### `cc:onChange` This event is triggered when the user modifies their preferences and only if consent has already been provided. ```js window.addEventListener("cc:onChange", function (event) { var detail = event.detail; /** * detail.cookie * detail.changedCategories * detail.changedServices */ // do something }); ``` ## Modal Callbacks ### `cc:onModalShow` The consent modal is visible. ```js window.addEventListener("cc:onModalShow", function (event) { var detail = event.detail; /** * detail.modalName */ // do something }); ``` ### `cc:onModalHide` The consent modal is hidden. ```js window.addEventListener("cc:onModalHide", function (event) { var detail = event.detail; /** * detail.modalName */ // do something }); ``` ### `cc:onModalReady` The consent modal is created and appended to the DOM. ```js window.addEventListener("cc:onModalReady", function (event) { var detail = event.detail; /** * detail.modalName */ // do something }); ``` # Actions ### `show` Shows the consent banner. If consent was previously expressed, the consent modal will not be generated; you'll have to pass the argument `true` to generate it on the fly. ```js CookieConsent.show(); // show modal (if it doesn't exist, create it) CookieConsent.show(true); ``` ### `hide` Hides the consent banner. ```js CookieConsent.hide(); ``` ### `showPreferences` Shows the preferences modal. ```js CookieConsent.showPreferences(); ``` ### `hidePreferences` Hides the preferences modal. ```js CookieConsent.hidePreferences(); ``` ### `acceptCategory` Programmatically accept or reject a cookie category. ```js // accept all categories CookieConsent.acceptCategory("all"); // reject all (accept only categories marked as readOnly/necessary) CookieConsent.acceptCategory([]); // accept currently selected categories inside the preferences modal CookieConsent.acceptCategory(); // accept only the "analytics" category CookieConsent.acceptCategory("analytics"); // accept only these 2 categories CookieConsent.acceptCategory(["analytics", "marketing"]); // accept all categories except the "analytics" category CookieConsent.acceptCategory("all", ["analytics"]); // accept all categories except these 2 CookieConsent.acceptCategory("all", ["analytics", "marketing"]); ``` ### `acceptedCategory` Returns `true` if the specified category was accepted, otherwise `false`. ```javascript if (CookieConsent.acceptedCategory("analytics")) { // "analytics" category was accepted } else { // not accepted } ``` ### `acceptService` Accepts or rejects services. ```javascript // accept all services in the 'analytics' category CookieConsent.acceptService("all", "analytics"); // reject all services CookieConsent.acceptService([], "analytics"); // accept only specified service and reject all the others CookieConsent.acceptService("Google Analytics", "analytics"); // accept only these 2 services and reject all the others CookieConsent.acceptService(["service1", "service2"], "analytics"); ``` ### `acceptedService` Returns `true` if the specified service was accepted, otherwise `false`. ```javascript if (CookieConsent.acceptedService("Google Analytics", "analytics")) { // "Google Analytics" service was accepted } else { // not accepted } ``` ### `validConsent` Returns `true` if consent is valid. Consent is **NOT** valid when at least one of following situations occurs: * consent is missing (e.g. user has not yet made a choice) * CookieChimp's cookie does not exist/has expired * CookieChimp's cookie is structurally not valid (e.g. empty) ```javascript if (CookieConsent.validConsent()) { // consent is valid } else { // consent is not valid } ``` ### `getUserPreferences` Returns user's preferences of accepted/rejected categories and services. Type: `function(): object` ```typescript function(): { acceptType: string, acceptedCategories: string[], rejectedCategories: string[], acceptedServices: {[category: string]: string[]} rejectedServices: {[category: string]: string[]} } ``` Possible acceptType values: * `'all'` * `'custom'` * `'necessary'` ```javascript var preferences = CookieConsent.getUserPreferences(); if (preferences.acceptType === "all") { console.log("Everything has been accepted!"); } if (preferences.acceptedCategories.includes("analytics")) { console.log("The analytics category was accepted!"); } ``` ### `reset` Resets CookieConsent by dropping all internal pointers and config. You can pass the argument `true` to delete CookieChimp's cookie which holds the user's consent & preferences. The user will be prompted again to express their consent. Once this method is called, CookieChimp won't be functional on the page. The webpage needs to be fully reloaded to re-initialise CookieChimp. ```js CookieConsent.reset(true); // Reload the page window.location.reload(); ``` # Custom CSS Customise the look and feel of the CookieChimp banner & modal. CookieChimp's dashboard allows you to customise the look and feel of the banner and modal. However, if you want to go beyond the options provided, you can use custom CSS. ## Color Schemes The widget includes light and dark themes. Enable dark mode by adding `cc--darkmode` class to the HTML element. You can also enabled auto dark mode by in the CookieChimp dashboard. This will automatically enable dark mode when the user's device is set to dark mode. ## CSS Variable Customisation Develop your own theme by modifying/overriding CSS variables. ```css /** Default color-scheme **/ :root { --cc-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --cc-modal-border-radius: 0.5rem; --cc-btn-border-radius: 0.4rem; --cc-modal-transition-duration: 0.25s; --cc-modal-margin: 1rem; --cc-link-color: var(--cc-btn-primary-bg); --cc-z-index: 2147483647; --cc-bg: #ffffff; --cc-primary-color: #2c2f31; --cc-secondary-color: #5e6266; --cc-btn-primary-bg: #30363c; --cc-btn-primary-color: #ffffff; --cc-btn-primary-border-color: var(--cc-btn-primary-bg); --cc-btn-primary-hover-bg: #000000; --cc-btn-primary-hover-color: #ffffff; --cc-btn-primary-hover-border-color: var(--cc-btn-primary-hover-bg); --cc-btn-secondary-bg: #eaeff2; --cc-btn-secondary-color: var(--cc-primary-color); --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg); --cc-btn-secondary-hover-bg: #d4dae0; --cc-btn-secondary-hover-color: #000000; --cc-btn-secondary-hover-border-color: #d4dae0; --cc-separator-border-color: #f0f4f7; --cc-toggle-on-bg: var(--cc-btn-primary-bg); --cc-toggle-off-bg: #667481; --cc-toggle-on-knob-bg: #ffffff; --cc-toggle-off-knob-bg: var(--cc-toggle-on-knob-bg); --cc-toggle-enabled-icon-color: var(--cc-bg); // yes (v tick) --cc-toggle-disabled-icon-color: var(--cc-bg); // no (x tick) --cc-toggle-readonly-bg: #d5dee2; --cc-toggle-readonly-knob-bg: #fff; --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg); --cc-section-category-border: var(--cc-cookie-category-block-bg); --cc-cookie-category-block-bg: #f0f4f7; --cc-cookie-category-block-border: #f0f4f7; --cc-cookie-category-block-hover-bg: #e9eff4; --cc-cookie-category-block-hover-border: #e9eff4; --cc-cookie-category-expanded-block-bg: transparent; --cc-cookie-category-expanded-block-hover-bg: #dee4e9; --cc-overlay-bg: rgba(0, 0, 0, 0.65); --cc-webkit-scrollbar-bg: var(--cc-section-category-border); --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg); --cc-footer-bg: var(--cc-btn-secondary-bg); --cc-footer-color: var(--cc-secondary-color); --cc-footer-border-color: #e4eaed; } /** Dark mode color-scheme **/ .cc--darkmode { --cc-bg: #161a1c; --cc-primary-color: #ebf3f6; --cc-secondary-color: #aebbc5; --cc-btn-primary-bg: #c2d0e0; --cc-btn-primary-color: var(--cc-bg); --cc-btn-primary-border-color: var(--cc-btn-primary-bg); --cc-btn-primary-hover-bg: #98a7b6; --cc-btn-primary-hover-color: #000000; --cc-btn-primary-hover-border-color: var(--cc-btn-primary-hover-bg); --cc-btn-secondary-bg: #242c31; --cc-btn-secondary-color: var(--cc-primary-color); --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg); --cc-btn-secondary-hover-bg: #353d43; --cc-btn-secondary-hover-color: #ffffff; --cc-btn-secondary-hover-border-color: var(--cc-btn-secondary-hover-bg); --cc-separator-border-color: #222a30; --cc-toggle-on-bg: var(--cc-btn-primary-bg); --cc-toggle-off-bg: #525f6b; --cc-toggle-on-knob-bg: var(--cc-btn-primary-color); --cc-toggle-off-knob-bg: var(--cc-btn-primary-color); --cc-toggle-enabled-icon-color: var(--cc-btn-primary-color); // yes (v tick) --cc-toggle-disabled-icon-color: var(--cc-btn-primary-color); // no (x tick) --cc-toggle-readonly-bg: #343e45; --cc-toggle-readonly-knob-bg: #5f6b72; --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg); --cc-section-category-border: #1e2428; --cc-cookie-category-block-bg: #1e2428; --cc-cookie-category-block-border: var(--cc-section-category-border); --cc-cookie-category-block-hover-bg: #242c31; --cc-cookie-category-block-hover-border: #232a2f; --cc-cookie-category-expanded-block-bg: transparent; --cc-cookie-category-expanded-block-hover-bg: var(--cc-toggle-readonly-bg); --cc-overlay-bg: rgba(0, 0, 0, 0.65); --cc-webkit-scrollbar-bg: var(--cc-section-category-border); --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg); --cc-footer-bg: #0c0e0f; --cc-footer-color: var(--cc-secondary-color); --cc-footer-border-color: #060809; } .cc--darkmode #cc-main { color-scheme: dark; } ``` You can also customise very specific elements by using inspect element in your browser and copying the CSS selector to override the styles. ## Disable transitions You can disable all transitions simply by setting the transition duration to 0: ```css #cc-main { --cc-modal-transition-duration: 0; } ``` # Create account invitation post /account-invitations Create a new account invitation # Delete account invitation delete /account-invitations/{id} Delete account invitation by ID # Get account invitation get /account-invitations/{id} Get account invitation by ID # List account invitations get /account-invitations List all account invitations # Update account invitation put /account-invitations/{id} Update account invitation by ID # Delete account user delete /account-users/{id} Delete account user by ID # Get account user get /account-users/{id} Get account user by ID # List account users get /account-users List all account users # Update account user put /account-users/{id} Update account user by ID # Get account get /accounts/{id} Get account by ID # List accounts get /accounts List all accounts # Get AI action get /ai-actions/{id} Get AI action by ID # List AI actions get /ai-actions Audit log of all actions performed by the AI # API Overview & Authentication Access all the data on CookieChimp through our RESTful API. Welcome to the CookieChimp API. We provide a RESTful API that allows you to access all the data on CookieChimp. You can use our API to integrate your applications, services, and workflows with our platform. # Authentication To authenticate with the CookieChimp API, you will need an API key. This key is a unique identifier for your account and is used to ensure that only authorized users have access to the data. ## Obtaining Your API Key Currently, you cannot generate the API key yourself. To request an API key, please [contact our support](mailto:support@cookiechimp.com?subject=Access%20to%20API) team. Once you have your API key, you can use it to authenticate your requests to the CookieChimp API. Include it in the header of your HTTP requests like so: ```http X-API-Key: YOUR_API_KEY ``` # Rate Limits To ensure fair usage of the API, we limit the number of requests you can make to the API. The rate limit is 100 requests per minute. If you exceed this limit, you will receive a `429 Too Many Requests` response. # Create category post /categories Create a new category # Delete category delete /categories/{id} Delete category by ID # Get category get /categories/{id} Get category by ID # List categories get /categories List all categories # Update category put /categories/{id} Update category by ID # Get consent get /consents/{id} Get consent by ID # List consents get /consents List all consents # Create group post /groups Create a new group # Get group get /groups/{id} Get group by ID # List groups get /groups List all groups # Update group put /groups/{id} Update group by ID # Create storage item post /storage-items Create a new storage item # Delete storage item delete /storage-items/{id} Delete storage item by ID # Get storage item get /storage-items/{id} Get storage item by ID # List storage items get /storage-items List all storage items # Update storage item put /storage-items/{id} Update storage item by ID # Block Tags with Google Tag Manager Trigger tags based on user consent with Google Consent Mode v2. Navigate to "Integrations" from the sidebar and enable the Google Consent Mode integration. Enable GCM

Create or update a tag and add any additional consent checks for the tag to fire. Navigate to "Advanced Settings" > "Consent Settings". Check the "Require additional consent for tag to fire" button and add any additional consent checks from the dropdown of options. This can be a service name as added on the platform.

This is required to listen for changes in consent state. This event will be triggered by CookieChimp on page load and when the user changes their consent settings. Add Trigger

Choose "Custom Event" Choose Custom Event

Set up the custom trigger with event name `cookiechimp_consent_update` and save the tag. Create custom trigger

This tag is now set up and will only fire when the required consent is granted. ## Category Mapping GTM supports 7 different default consent types. CookieChimp maps these Google consent types into the following categories: | CookieChimp Category ID | Google Consent Type | | ----------------------- | ------------------------------------------------ | | essential | functionality\_storage, security\_storage | | marketing | ad\_storage, ad\_user\_data, ad\_personalization | | analytics | analytics\_storage | | personalization | personalization\_storage | These categories are setup by default. When a user opts-in to a consent category or a Google service in the category is consented to, the linked Google consent type will change from 'denied' to 'granted' and vice versa. Apart from the default 7 consent types, we will also send the consent state of your services to Google.\ e.g. When a user consents to a service named "Hotjar", the consent for this service is updated as 'granted'. # Consent Callbacks & Events Run code after callbacks and events are triggered. ## Code Examples The `cc:onConsent` event can be used to execute code based on user consent. ```javascript window.addEventListener("cc:onConsent", function (event) { if (CookieConsent.acceptedCategory("analytics")) { // "analytics" category enabled } if (CookieConsent.acceptedService("Google Analytics", "analytics")) { // "Google Analytics" service enabled } }); ``` The `cc:onChange` event can be used to execute code when the user changes their consent. ```javascript window.addEventListener("cc:onChange", function (event) { var detail = event.detail; /** * detail.cookie * detail.changedCategories * detail.changedServices */ if (detail.changedCategories.includes("analytics")) { if (CookieConsent.acceptedCategory("analytics")) { // "analytics" category was just enabled } else { // "analytics" category was just disabled } if (detail.changedServices["analytics"].includes("Google Analytics")) { if (CookieConsent.acceptedService("Google Analytics", "analytics")) { // "Google Analytics" service was just enabled } else { // "Google Analytics" service was just disabled } } } }); ``` [View all available callbacks & events ›](/callback-events) # Block Script Tags with Code Only enable scripts when a user has given consent. ## Script Attributes and Usage Control your scripts using these attributes: * `data-category`: Assigns the script to a consent category. You can find the ID of each category from your CookieChimp dashboard. * `data-service` (optional): Name of the company, service or a group of scripts. Can be used to disable a single service in a category while leaving others enabled - or the other way around. * `data-type` (optional): Defines a custom script type. * `data-src` (optional): Can be used instead of `src` for validation purposes. ## Code Examples ```html ``` You can also run scripts when a category or service is disabled (if it was previously enabled) by prepending the '!' character to the name. ```html ``` # Banner Designer Customise the consent banner & preferences modal to match your branding.

## Geo Targeting Banners can be configured to show only in specific countries or U.S. states. This lets you create multiple banners customised for different regions and their regulations.

## Force Consent The force consent option can be toggled to increase consent rates. When this option is enabled, the user is forced to accept/deny consent before interacting with the website.

## Layouts The layout, position and button placement of banners can be customised to fit your website's style.

Similarly, the layout of the preferences modal can also be customised.

## Banner Buttons The weights, position and text of banner buttons can be customised. Some regulations like GDPR require banner buttons to be equally weighted. Some regulations might require specific text for buttons.

## Privacy Trigger The privacy trigger is a floating button that allows users to update their consent preferences at any time. This can be enabled/disabled and its position can be customised. Most regulations mandate that users must be able to update their consent preferences after giving their initial consent. You can enable this using our Privacy Trigger or by [adding your own button or link](/docs/advanced/callbacks-events#showpreferences) to open the preferences.

## Preferences Control Level The preferences modal can be customised to only show categories or to show their services and cookies and allow users to have more granular control. Some regulations require all storage items and services to be shown.

## Theme The banner's appearance can be customised with various theme options: * Dark/Light mode - Choose between light, dark, or auto mode that follows the user's system preferences * Colors - Customise the banner's primary colors, text colors, and button colors to match your brand * Border radius - Adjust the roundness of corners on the banner, buttons and modal * Logo - Add your company logo to reinforce brand identity These theme settings apply to both the consent banner and preferences modal to maintain a consistent look across all consent UI elements.

For more detailed styling options, refer to the [Custom CSS](/docs/advanced/custom-css) documentation page. ## Banner Languages & Translations For more detailed information about banner languages and translations, refer to the [Multilingual Banners](/docs/features/multilingual-banners) documentation page. # Block 3rd Party Iframes Disable 3rd party iframes and display a notification regarding their use. Load iframes after user consent is obtained. To comply with privacy regulations, you can prevent 3rd party iframes from loading before gaining user consent. Enable this feature in the CookieChimp dashboard, then update your website's embeds. ## Basic Usage ```html

``` ## Customised Embedding Example ```html

``` ### Configuration Options * `data-service`: \[String, Required] Service name (e.g., YouTube, Vimeo, Google Maps). * `data-id`: \[String, Required] Unique resource ID (e.g., video ID). * `data-title`: \[String] Notice title. * `data-params`: \[String] Iframe query parameters. * `data-thumbnail`: \[String] Path to custom thumbnail. * `data-ratio`: \[String] Custom aspect ratio (e.g., "16:9"). * `data-autoscale`: Responsive iframe that fills parent width and scales proportionally. * `data-widget`: Use for custom widgets with explicit width and height. ## Supported Services * YouTube * Vimeo * Google Maps Looking for a service that's not listed? [Let us know](mailto:support@cookiechimp.com). # Manage User Consents View consent history of users on your website. ### Data Privacy & Storage * CookieChimp generates a random UUID for each visitor. * No Personal Identifiable Information (PII) is stored in our database. ### IP Address Handling * IP addresses are processed only to determine visitor's country & region. * IPs are masked before storage. * Only country & region information is retained in logs. ### Finding User Records You can search for specific consent records using the visitor's UUID, which can be found in the banner: Consents

### Consent Details You can click on consent records to see more details.

# Identify Users Set User's ID to match cookie consent records with your database. Identify consent records stored on CookieChimp with your application's user IDs. This allows you to search for consent records and cookies set on each session. Add the following code to your HTML page, replacing `your_user_ID_123` with your user's ID. Add this as high up in the `` as possible. This code needs to have executed before CookieChimp loads. ```html ``` **Don't use any Personal Identifiable Information (PII) as the user ID.** It's best to use a unique ID that you can match with your database. If you use an email address, IP address or any other personal information, CookieChimp will discard this information and no user ID will be set. # Multilingual Banners Translate your consent banner into different languages. ## Language Detection We can detect language based on: 1. The HTML document language - controlled by the [lang attribute](https://www.tpgi.com/using-the-html-lang-attribute/) in the `html` element. 2. The user's browser language - set by the user's browser.

The default language is used if the visitor's language is not supported or there is no translation available for the visitor's language. ## Translations Consent banners can be translated into multiple languages. We offer AI auto translate for paid accounts to quickly translate into another language. Always check and verify AI translations before saving.

Similarly categories, services and storage items can be individually translated.

# Embed Vendors List Embed up-to-date vendor information for your cookie or privacy policy pages. Copy and paste the following script into the `` section of your website, replacing `{account_id}` with your CookieChimp account ID. ```html ``` Add the following div where you want to embed the vendor list. ```html

``` # Vendor Management Organize and manage storage items used your website. ## Categories Categories are used to organize vendors into groups. You can create as many categories as you need and edit the default ones. The default categories are: * Essential * Analytics * Marketing * Personalization

A category becomes active when it contains an active service or storage items. Only active categories are shown to visitors in the banner. ## Vendors Storage items set by a vendor/service can be grouped together. Services must be associated with a category and each service will have a toggle inside its category section to allow users to opt-in or opt-out of the service. You can then use the services attribute to [block scripts until consent](/docs/block-scripts-cookies). CookieChimp offers a vendor library of popular services that contain storage items set by the service. Simply select the ones used in your site and add.

If you are using a service that is not in our vendor library, you can create a service manually. ## Storage Items Storage items can be of three types: * Cookie * Local Storage * Session Storage Storage items can be grouped together into a service or be added to a category directly. Cookie

# Vendor Scanning Understand how CookieChimp scans your website for vendors.

We scan your website to find the vendors and storage items used on your site. We detect services and storage items set before and after consent was granted. We will flag each service with one of the following status: * `Ran before consent` - A service that is not part of a required category ran before consent is granted. * `Not shown in banner` - We detected storage items from a service that is not shown in your banner. * `Not part of a category or service` - We detected storage items that are not in your banner and we cannot match to a vendor/service. * `All good` - Everything is set up correctly. We also check if users can update their preferences after their initial consent. ## Manual Scanning Scans can be created from the Website Scan page.

Accounts on free plans are limited to 1 scan per day. Accounts on paid plans have access to 5 scans per day. ## Auto Scanning Auto scanning can be enabled through the Vendor Scanner integration. Scan page

Automatic weekly scanning is only available to accounts on paid plans. Accounts on free plans only have access to automatic monthly scanning. # Wildcards Group similar storage items, reducing the need to categorize each one individually. Platforms that generate unique storage item names, for each session or user, can create an overwhelming number of individual cookies. Wildcards streamline this by grouping these under a single pattern. Use `*` in storage item names to match any storage item that follows a certain pattern. ## Usage * Standard Naming: `session_12345`, `session_67890`, etc. * Wildcard Usage: `session_*` This wildcard pattern will match any storage item of the same type that starts with `session_`, treating them as a single group. # Installation Add CookieChimp CMP to your website in under 5 minutes ## Step 1: Sign Up * **Create an Account**: Sign up at [CookieChimp.com](https://cookiechimp.com/signup). * **Configure**: Access your dashboard to set up your cookie consent preferences. ## Step 2: Integration Choose the integration method suitable for your platform: ### HTML Add your website's CookieChimp JS snippet in the `` tag of your HTML: The CookieChimp script needs to be added at the top of the `` section, so that it can run first, in order to ensure other scripts are only run based on consent. If other scripts are added before, they may set cookies and other storage items before consent is granted. ```html ``` You need to replace `abc123` with your website's unique CookieChimp ID. If you are using a Single Page Application (SPA), you need to ensure to reinitialize the CookieChimp widget on page navigation. You can do this by including the CookieChimp script in the following way (example is for Astro JS): ```html ``` ### WordPress For detailed information on setting up CookieChimp with your WordPress site, see the [WordPress Plugin section](/docs/installation/wordpress). ### Shopify Add the CookieChimp [Shopify app](#) and set it up in your Shopify admin. ## Step 3: Customisation and Testing * [Customise the appearance](#) and settings of the cookie consent widget from your CookieChimp dashboard. * Test to ensure it functions correctly on your site. * CookieChimp will automatically start scanning for [cookies on your website](#). You can view these in your CookieChimp dashboard and organize them. {" "} If you have [CookieChimp AI copilot](/ai) enabled, CookieChimp will automatically fill in the missing information & categorize these cookies for you. ## Step 4: Block Scripts/Cookies To ensure compliance with GDPR regulations, it's crucial not only to display a consent banner but also to actively block all non-essential scripts and cookies until the user has given explicit consent. For comprehensive instructions on how to effectively manage and block scripts and cookies, please refer to our [Scripts Management Section](/block-scripts-cookies/script-attributes). ## Step 5: Allow users to update their preferences ### 5a. Privacy Trigger (Floating Privacy Icon) CookieChimp provides a floating privacy icon (Privacy Trigger) that allows users to manage their cookie preferences at any time. You can enable this in the banner settings. Optionally, you can specify location where the Privacy Trigger is added to the DOM by placing a div with the ID `cookiechimp-container` on the page. ```html

``` This is useful for single page applications (SPA) where you want the floating icon to be persistent across different pages. Ensure to add this in a location which does not get replaced when navigating between pages. If you are using [Turbo](https://turbo.hotwired.dev/handbook/building#persisting-elements-across-page-loads) or [Astro JS with View Transitions](https://docs.astro.build/en/guides/view-transitions/), you can add specific attributes to the div to ensure it persists across navigations. ```html

``` ### 5b. Manually Open Preferences Modal You can open the preferences modal with a custom link or button by adding a button with the data attribute `data-cc="show-preferencesModal"`: ```html ``` ## Troubleshooting * If the widget doesn't display, ensure there are no conflicts with other scripts or styles on your website. * Clear your browser cache and cookies, then reload the website. ## Need Help? If you encounter any issues or require further assistance, please reach out to us at [support@cookiechimp.com](mailto:support@cookiechimp.com). # WordPress Plugin Add CookieChimp to your WordPress site Enable the WordPress integration from the Integrations page. Enable WordPress Integration

Install the [WP Consent API plugin](https://wordpress.org/plugins/wp-consent-api/) from the WordPress plugin directory. This allows other Wordpress plugins that support WP Consent API to run tags based on user's consent. Install WP Consent API plugin

Download the [CookieChimp WordPress Plugin](https://github.com/IdentitySquare/CookieChimp-WP/archive/refs/heads/main.zip). Our plugin ensures that CookieChimp's JS code is run before other scripts on your Wordpress site. Upload the file to your WordPress site and install. Install CookieChimp WordPress plugin

Open the CookieChimp plugin settings.

Enter your CookieChimp account ID and save. Add account id to plugin

Your account ID can be found in the general settings page on CookieChimp. CookieChimp Account ID

CookieChimp will now inform the WP Consent API plugin the user's consent state. This API is listened to by other WP plugins such as Google Site Kit to enable/disable their scripts. For details and supported plugins see the [WP Consent API plugin](https://wordpress.org/plugins/wp-consent-api/). # Overview Developer-First Consent Management Platform (CMP) Technical Cookie

CookieChimp is a versatile, developer-first Consent Management Platform (CMP) that specializes in storing and managing user consent records. Our platform is built upon the robust foundation of the [open-source](https://github.com/orestbida/cookieconsent) CookieConsent JS library. With a focus on API accessibility and customisation, CookieChimp offers a comprehensive solution for GDPR and CCPA compliance. ## Key Features ### Comprehensive Consent Management CookieChimp provides a secure and scalable solution for handling user consent across websites. Leverage the power of AI to make cookie management on your website effortless. By handling the intricate details of cookies, our platform ensures your website is both compliant and user-centric without the need for continuous manual input. Securely store and manage user consent records, ensuring compliance with privacy regulations. Full API access to manage consents, providing developers with the flexibility to integrate and manipulate data as needed. ### Customisation and Flexibility Our platform offers extensive customisation options to match your website’s unique style and functionality. Leverage the Javascript functionality and CSS customisation options of the CookieConsent plugin to tailor the consent interface to your website’s design. Use CookieChimp as a headless platform, storing consent records while implementing your own UI, offering unparalleled customisation.. ### Developer-Friendly Integration CookieChimp is designed to seamlessly integrate with any web platform or framework, making it a versatile choice for developers. Integrate CookieChimp with any web platform or framework, ensuring seamless compatibility and integration. A minimal impact on website performance, combined with adherence to a11y best practices for accessibility. ### Compliance Assurance We prioritize compliance with data protection laws, ensuring that your website adheres to the latest regulations. Automatically block scripts until explicit consent is obtained and provide clear opt-out options, aligning with the strictest data protection laws. Privacy by design, with a focus on data minimization and security, ensuring that only the necessary data is collected and stored. ## For Developers, By Developers CookieChimp is crafted with a developer-first mindset, ensuring ease of use, extensive customisation, and comprehensive API support. Whether you're looking to integrate a ready-made consent widget or build a completely custom solution, CookieChimp offers the tools and flexibility you need. ## Getting Started Dive into the world of streamlined cookie consent management with CookieChimp. For detailed guidance on integration, API usage, and customisation, visit our [Getting Started](#) section.