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.
If you signed up on CookieYes before 15 March 2022, refer to this setup guide to implement a cookie banner on your website.
To get started with CookieYes, create your account for free.
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 layout
Select a cookie banner template from the options available: Classic, Banner, Box, Popup, and Recommended.
- You can choose any banner template in both the default light or dark themes.
- You may choose the Auto-generated Template layout which is auto-recommended based on your website’s colour scheme.
- If you want to customize your cookie banner, you can select the edit icon next to the selected layout.
To implement your cookie banner faster, you can simply proceed to Step 3 with the default layout that you have chosen. You can customize the cookie banner at any time later via the Dashboard > Consent banner. You can refer to Step 2 in 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 Consent Template dropdown, select the privacy law you want to comply with.
- Choose the Default language of your cookie banner from the dropdown list.
- Select the banner layout from the types available: Classic, Banner, Box, Popup
Note: You may choose the GDPR-CCPA Consent Template 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 Edit content in, choose the language that you want to edit the cookie banner content for.
- You can select each language and edit the content in that language. Or you may use the default content and translation provided by CookieYes.
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.
- To edit the message on your banner, select the Cookie Notice. You can edit or change the content of the Title and Message.
- You can enable the Close [X] button if you want the banner to have a close button.
- You can edit the button labels that appear on your banner – “Accept All”, “Reject All” and “Customize”.
- 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. (Available only on Ultimate plan)
- To edit the content of the second layer of your banner, select Preference Center. Here you can edit or change the content of the Title, Privacy overview, and the text of the “Save my preferences” button.
- To edit the content of the cookie list displayed in the second layer of your banner, select Cookie List and enable Show cookie list.
- You can also edit headings within the list for – Cookie, Duration, and Description.
- Select Revisit Consent option to display a consent callback button on your wesbite after the cookie banner is dismissed.
- Enable the Floating Button so that your website visitors can revisit consent i.e. change/withdraw consent easily. Here’s how the revisit consent button looks on this website.
- You can customize the position and also the Text on hover.
- In the Blocked Content, you can edit the Alt Text for Blocked Content. This is the content that will be displayed over embedded videos (Youtube, Vimeo etc.) in case the website visitor has rejected certain cookies that are required for the video to play.
Select Colours on the left panel to customize the colour of the 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, Preference Center, Revisit Consent Button, and Alt Text for Blocked Content.
- You can customize the colour of the background, border, title, and text under each of these options.
Select Behaviour on the left panel to configure the behaviour of the banner depending on the user’s location or action.
- Under the Consent Expiration, you can set the time after which your website’s visitors will be shown a consent banner again.
Note: By default, CookieYes sets 365 days as the expiration time for cookie consent. Visitors of your site who have given consent will be shown the cookie banner again after this duration.
- 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).
- If you choose CCPA under ‘Consent Template’, you can show the banner for visitors from California or the US.
Note: If you choose GDPR-CCPA under ‘Consent Template’, you can geo-target the banner as per the visitor’s location. You can select GDPR/CCPA option under the Preview banner for and enable geo-targeting for the respective locations.
- Enable Reload page on consent action if you want your web page to reload after the visitor accepts or rejects 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 & Publish.
- 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.
Note: You can share the code with a developer or your team by clicking on Send code to Developer link. Enter the email address and then click on Send Instructions. The recipient will get the code and instructions via email.
Next Step. Install cookie banner on your website
- Now you have to paste the CookieYes installation code on your website.
- Select the CMS or website builders listed below 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 CMS 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 technical support.