{"id":1326,"date":"2022-05-26T16:25:10","date_gmt":"2022-05-26T16:25:10","guid":{"rendered":"https:\/\/www.cookiebot.com\/en\/?page_id=1326"},"modified":"2023-04-25T14:59:10","modified_gmt":"2023-04-25T12:59:10","slug":"manual-implementation","status":"publish","type":"page","link":"https:\/\/www.cookiebot.com\/en\/manual-implementation\/","title":{"rendered":"Cookiebot Setup"},"content":{"rendered":"\n

To correctly implement Cookiebot CMP on your website, and manually mark up cookie-setting scripts, follow the 4 steps below. Please note that you can make use of our automatic cookie blocking feature instead. Follow our 3-step guide<\/a>.<\/p>\n\n\n\n

Step 1 - Create a Cookiebot CMP account and add your domain<\/h3>\n\n\n\n

Sign up<\/a> to create a Cookiebot CMP account. Log in<\/a> to your account and add your website domain name(s). Save. The website will now be scanned (please allow up to 24 hours for the scan to complete).<\/p>\n\n\n\n

Step 2 - Choose the cookie consent banner you want to display on your website<\/h3>\n\n\n\n

Go to \u201cSettings\u201d and \u201cDialog\u201d and choose your cookie consent banner. The default banner is configured with the strictest settings possible (suitable for cookie consent under GDPR and ePR).<\/p>\n\n\n\n

Under \u201cSettings\u201d and \u201cContent\u201d, edit the default banner text so it fits your website and legal requirements.<\/p>\n\n\n\n

Step 3 - Insert 2 scripts on your website to make the cookie consent banner and Cookie Declaration appear<\/h3>\n\n\n\n

Go to \"Settings\" and \"Your scripts\".<\/p>\n\n\n\n

1. Cookie consent banner<\/strong>: Copy the top script and insert it to the header of your website template.<\/p>\n\n\n\n

Example:<\/p>\n\n\n\n

<html>\n<head>\n<script id=\"Cookiebot\" src=\"https:\/\/consent.cookiebot.com\/uc.js\" data-cbid=\"00000000-0000-0000-0000-000000000000\" type=\"text\/javascript\" async><\/script>\n<\/head>\n<body>\n  ...\n<\/body>\n<\/html> \n<\/code><\/pre>\n\n\n\n
2. Cookie Declaration<\/strong>: Copy the second script and insert it in the HTML on the specific page and at the exact position<\/strong> where you would like the Cookie Declaration to appear.<\/p>\n\n\n\n
This could be as a separate page on your website or embedded into an existing privacy policy. The standard Cookie Declaration lists all cookies and trackers discovered on your website and allows the user to withdraw (or change) a consent at any time \u2013 as required under e.g. GDPR.<\/p>\n\n\n\n
Example:<\/p>\n\n\n\n
<html>\n  ...\n<body>\n  <h1>Cookie Declaration<\/h1>\n  <script id=\"CookieDeclaration\" src=\"https:\/\/consent.cookiebot.com\/00000000-0000-0000-0000-000000000000\/cd.js\" type=\"text\/javascript\" async><\/script>\n<\/body>\n<\/html> \n<\/code><\/pre>\n\n\n\n
Step 4 \u2013 Mark up cookie-setting script tags on your website to control cookies<\/h3>\n\n\n\n
When the website scan is complete, check your scan report. If there are any unclassified cookies, log in<\/a> to your account and under \u201cCookies\u201d make sure to classify them and add a short purpose description.<\/p>\n\n\n\n
Then, all \"preferences\", \"statistics\" and \"marketing\" cookies and trackers must be marked up for prior consent. This is to ensure that until the website user has given a consent, no cookies other than those strictly necessary are set. Only those categories of cookies the user has consented to will be activated upon consent \u2013 all other cookies will be held back automatically.<\/p>\n\n\n\n
Information about where in the source code a cookie-setting script is located is listed in the scan report (where applicable). To enable prior consent, apply the attribute \"data-cookieconsent\" to cookie-setting script tags on your website. Set the comma-separated value to one or more of the cookie categories \"preferences\", \"statistics\" and \"marketing\" in accordance with the types of cookies being set by each script. Finally change the attribute \"type\" from \"text\/javascript\" to \"text\/plain\".<\/p>\n\n\n\n
Example on modifying an existing Google Analytics Universal script tag:<\/p>\n\n\n\n
<script type=\"text\/plain\" data-cookieconsent=\"statistics\"> \n    (function(i,s,o,g,r,a,m){\n    i['GoogleAnalyticsObject']=r;\n    i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();\n    a=s.createElement(o),m=s.getElementsByTagName(o)[0];\n    a.async=1;\n    a.src=g;\n    m.parentNode.insertBefore(a,m)})(window,document,'script','\/\/www.google-analytics.com\/analytics.js','ga'); \n    ga('create', 'UA-00000000-0', 'auto'); \n    ga('send', 'pageview'); \n<\/script> \n<\/code><\/pre>\n\n\n\n
Example on modifying an existing JavaScript file classified in the scan report as a marketing cookie:<\/p>\n\n\n\n
<script type=\"text\/plain\" data-cookieconsent=\"marketing\" src=\"\/\/widget.manychat.com\/1234567891011.js\"><\/script> \n<\/code><\/pre>\n\n\n\n
If your website is loading scripts dynamically, use the functions of the JavaScript SDK<\/a> for full control.<\/p>\n\n\n\n
<\/h2>\n\n\n\n
Additional resources<\/h3>\n\n\n\n