How to Add a Cookie Banner to Your Website
Welcome to CookieYes! This guide will walk you through everything you need to know about creating a cookie banner, customizations, and implementing it on your website.
To get started with CookieYes, create your account and try for free.
If you are a new user or have signed up on CookieYes after 15 March 2022 refer to this setup guide to implement a cookie banner on your website.
After you sign up, you will be directed to a setup screen. Follow the instructions below to add a cookie banner to your website.
Step 1. Choose a cookie banner template
Select a template from the options available: Classic, Banner, Box, Popup and Recommended.
- You can choose the different templates and see the banner in default light and dark themes.
- You may choose the Recommended template which is auto-recommended based on your website’s colour scheme.
- You can select Preview and see how the cookie banner will appear on your website and proceed to the Next Step.
- If you want to further style your cookie banner, select Customize.
To implement your cookie banner faster, you can simply proceed to Step 3 with the default template that you have chosen. You can customize the cookie banner at any time later via the Dashboard > Consent banner. You can refer Step 2 on this guide to do the customizations.
Step 2. Customize your cookie banner
When you click on Customize a panel will appear where you can customize the banner as per your liking. Below, find the step-by-step instructions on how to customize your cookie banner layout, content, colour, behaviour and add custom CSS.
Select Layout from the left panel to choose the banner template, privacy law you want to comply with and to select the default language of your banner.
- In the Comply with dropdown, select the privacy law you want to comply with.
- Choose the Default language of your cookie banner from the dropdown list.
- In the Consent type, choose from the options (Implicit, Explicit, Info, Custom). Hover over the options to learn how it works.
- Select the banner template from the types available: Classic, Banner, Box, Popup
Note: You may choose the GDPR-CCPA if you want to comply with both the laws at the same time. This feature is available only on Pro and Ultimate plan.
Select Content from the left panel to customize the content of the banner and all banner elements including title, banner text, button texts and the preference centre.
- In the Preview language, choose the language that you want to edit the cookie banner content for.
Note: Your banner will auto-translate to any of the languages listed in the dropdown. You can add more languages later via Site Settings. Auto-translation feature is only available on Basic, Pro and Ultimate plans.
- How to add a multilingual cookie banner
- You can select each language and edit the content in that language. Or you may use the default content and translation provided by CookieYes.
- To edit content, select the Cookie Notice. Here you can edit or change the content of the Title and Default text.
- You can enable the Close [X] button if you want the banner to have a close button.
- If you want to show the cookie categories on the banner, you can enable Preview categories on banner.
- To personalize your banner, you can add your Brand logo (Available only on Basic, Pro, and Ultimate plan).
- Select Disable CookieYes branding to hide the ‘Powered by CookieYes’ logo that appears on the banner. (Availabe only for Ultimate plan)
- To edit the content of the buttons on your banner, select Buttons and edit the button labels.
- To edit the content of the audit table displayed in the second layer of your banner, select Audit Table. Here you can edit headings within the audit table – Cookies, Type, Duration and Description.
Select Colours on the left panel to customize the colour of banner and all banner elements including background, buttons and text.
- Choose from the different colour themes for the banner: Light, Dark, Custom, and Recommended.
- Under Customize colors, you will find options to customize the colours of the Cookie Notice, Button & Links and Category Display.
- You can customize the colour of background, border, title and text under each of these options.
Select Behaviour on the left panel to configure the behavior of the banner depending on the user’s location or action.
- You can enable the Revisit consent button to add a banner callback widget on your website. You can also add a label that will appear on your website.
- Under Geo-targeting cookie banner, you can enable ‘Show GDPR banner only for visitors from the EU and UK’ (Available only on Pro and Ultimate plan).
Note: If you have chosen CCPA under ‘Comply with’, you will be able to show your cookie banner only for visitors from California or the US.
- Enable Reload page on consent action if you want your web page to reload after the user accepts or rejects consent.
- Enable Show audit table if you want to display the cookie table in the second layer of your banner.
- You can also enable Load Analytics cookies prior to user consent so that analytic cookies will be loaded even before your website’s user gives consent.
Select Custom CSS on the left panel to add advanced CSS to personalize your banner style.
- Enter the custom CSS code in the given box (Available only on Basic, Pro and Ultimate plan).
- After you have done the required customizations and enabled features, you can click on Save My Template.
- Click Next Step to proceed to the next part of the setup.
Step 3. Copy cookie banner code
When you click Next Step, a popup appears that has the CookieYes installation code.
- Click on Copy code to copy the CookieYes installation code to add it to your website.
Next Step. Install cookie banner on your website
Now you have to paste the CookieYes installation code on your website. If you are using one of the CMS or website builders listed below, select to get the step-by-step instructions to add the code to your website.
Note: Don’t see your CMS in the list?
CookieYes can work on all major platforms and custom-coded sites. Add the installation code between the <head> and </head> tags of your website’s source code before any other script. Save changes, refresh your site and check if the banner is active on your website. If you are facing any issues, please get in touch with support.