# How to Add a Cookie Banner to Your Website Add a custom cookie banner to your website in 3 steps and get GDPR/CCPA compliant. Free signup. No credit card required. --- **Categories:** , **Published:** July 31, 2026 **URL:** https://www.cookieyes.com/documentation/add-cookie-banner-to-website/ --- Welcome to CookieYes! This guide will walk you through everything you need to know about creating a cookie banner, customisations, and implementing it on your website. > **Note:** > If you signed up on CookieYes before 15 March 2022, refer to [this setup guide](https://www.cookieyes.com/cookieyes-setup-guide/) to implement a cookie banner on your website. > > > **To get started with CookieYes, **[**create your account**](https://app.cookieyes.com/trial?plan=pro-monthly&ref=CHAPTER1V6)**. ** 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. Configure your cookie banner Select a cookie banner layout from the options available: Box, Banner and Popup. > **Note:** > Pro and Ultimate plan users will have access to the Popup template. > > > ![](https://assets.cookieyes.com/setup_screen_c04823dcc4.jpg) - You can also select the Banner Language of your cookie banner. You will be able to edit this and add multiple languages later. - You can choose any banner template from the default light and dark themes, and if you want to further customise it, click Customise beneath to tailor it to your specific requirements. . - You may choose the Auto-generated Template layout, which is auto-recommended based on your website’s colour scheme. > **Pro Tip:** > To implement your cookie banner faster, you can simply proceed to Step 4 with the default layout that you have chosen. You can customise the cookie banner at any time later via the Dashboard > Cookie banner. You can refer to Step 2 in this guide to do the customisations. > > > ## Step 2. Customise your cookie banner When you click on **Customise** a panel will appear where you can customise the banner as per your liking. Below, find the step-by-step instructions on how to customise your cookie banner layout, content, colour and add custom CSS. **General** In the General tab, you can set the **Consent Template**. You can choose the consent template for your website: GDPR, US STATE LAWS or GDPR & US STATE LAWS. ![cookie-banner-tab.png](https://assets.cookieyes.com/cookie_banner_tab_fe40cb584d.png) > **Note: ** > You may choose the GDPR & US STATE LAWS Consent Template if you want to comply with both laws at the same time. This feature is available only on Pro and Ultimate plans. - Under the **Geo-target banner**, you can set your geo-targeting rules for your cookie banner. - For **GDPR Consent Template**, you can enable **Support IAB TCF v2.2** (Available only on Pro and Ultimate plan) if you run ads on your website. When enabled, a banner will appear on your site, allowing visitors to set granular advertising tracking preferences. - You can click on **Show advanced settings** to see advanced options. ![cookie-banner-tab-advanced.png](https://assets.cookieyes.com/cookie_banner_tab_advanced_f70b938ba2.png) - Under the **Consent expiration**, you can set the time after which your website’s visitors will be shown a consent banner again. - Enable **Reload page on consent action** if you want your web page to reload after the visitor accepts or rejects consent. > **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. **Layout** Select **Layout** from the left panel to edit/change your banner type. There are currently three banner layouts available: Box, Banner, Popup. **1. Box - **There are four available positions: Bottom left, Bottom right, Top left, and Top right. ![box.gif](https://assets.cookieyes.com/box_960aaf6f24.gif) **2. Banner** - There are two available positions: Bottom and Top. ![banner-layout.gif](https://assets.cookieyes.com/banner_layout_5a3b33726a.gif) **3. Popup **- Center. ![popup-banner.png](https://assets.cookieyes.com/popup_banner_cfa3e974fc.png) **Preference Center** **1. Box** - There are 2 options available: Center and Sidebar. ![pref-centre-box.gif](https://assets.cookieyes.com/pref_centre_box_052ac06d93.gif) **2. Banner **- The three configurations are Centre, Sidebar, and Push down. ![pref-centre-banner.gif](https://assets.cookieyes.com/pref_centre_banner_533da7b6a9.gif) The **Categories on first layer** feature is available with **Banner + Push down** layout only. **3. Popup** - There are 2 options available, Center and Sidebar. ![pref-centre-popup.gif](https://assets.cookieyes.com/pref_centre_popup_d554589720.gif) **Content** Select **Content** from the left panel to customise the content of the banner and all banner elements including title, banner text, button texts, and the preference centre. - To edit the message on your banner, select the **Cookie Notice. **You can edit or change the content of the **Title** and **Message. ** ![content-1.png](https://assets.cookieyes.com/content_1_a9aa74d399.png) - 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 “**Customise**”. - You can enable the “**Cookie Policy**” link and provide the URL to your privacy policy page or cookie policy page. You can also change the label name. - To personalize your banner, you can add your **Custom 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 the 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. ![content-2.jpg](https://assets.cookieyes.com/content_2_4060b5077f.jpg) - You can enable the **Show Google Privacy Policy** option, which ensures that the Google Privacy Policy is displayed on the second layer of your banner. This is necessary if you use services provided by Google, such as AdSense, Firebase and Analytics on your website, as mandated by the Digital Markets Act (DMA). ![content-3.jpg](https://assets.cookieyes.com/content_3_eb4657abb4.jpg) - You can also edit/change the content of the **Message**, **Link Text** and **URL** of the **Google Privacy Policy**. ![content-4.jpg](https://assets.cookieyes.com/content_4_582e84d112.jpg) - 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. ![content-5.png](https://assets.cookieyes.com/content_5_4d7d601cab.png) - Select the **Revisit Consent Button** option to edit the settings of the consent callback button. - The Revisit Consent Button will enable your website users to change/withdraw consent easily. ![content-6.png](https://assets.cookieyes.com/content_6_b4db9a4fea.png) - You can change the position of the **Floating Button**, set **Custom icon** (Available only on the Ultimate plan) and also the **Text on hover****.** Here's what the button will look like. ![content-7.png](https://assets.cookieyes.com/content_7_c62166b766.png) - 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. **Colours** Select **Colours** on the left panel to customise 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 and Auto Generate. - Under **Customise colors, **you will find options to customise the colours of the Cookie Notice, Preference Center, Revisit Consent Button, and Alt Text for Blocked Content. ![color-1.png](https://assets.cookieyes.com/color_1_7a9ca4dc4f.png) - You can customise the colour of the background, border, title, and text under each of these options. ![color-2.png](https://assets.cookieyes.com/color_2_cdbc0d488c.png) **Custom CSS** Select **Custom CSS **on the left panel to add advanced CSS to personalize your banner style. ![custom-css.png](https://assets.cookieyes.com/custom_css_3d2d8baadf.png) - Enter the custom CSS code in the given box (Available only on Basic, Pro, and Ultimate plan). **Hide Category from Banner** You can hide categories from the banner so that it does not appear on your banner’s second layer. To enable this feature, follow the below steps: 1. Navigate to the **Cookie Manager > Cookie Category**. 2. Click the edit icon. 3. Toggle the button (to the right) labelled “**Hide category from banne**r”. 4. Click the** Save Draft** button to save the change made. 5. Now, click the **Publish** **changes** button. ![Hide-Category-from-Banner.jpg](https://assets.cookieyes.com/Hide_Category_from_Banner_ea0e63b77f.jpg) - After you have done the required customisations, you can click on **Save My Template**. - Click **Next Step** to proceed to the next part of the setup. ## Step 3. Select an Installation Method To manually install CookieYes to your website, click on the** Install manually on website** option. ![](https://assets.cookieyes.com/method_to_install_1_449553ef85.jpg) > **Alternative Option:** > If you prefer to use Google Tag Manager, select Install with Google Tag Manager instead. For step-by-step instructions on this method, please refer to the [Getting Started with Google Tag Manager and CookieYes Guide.](https://www.cookieyes.com/documentation/getting-started-with-google-tag-manager-and-cookieyes/) > ## Step 4. Copy cookie banner code Click on **Copy Code **to copy the CookieYes installation code to add it to your website. ![](https://assets.cookieyes.com/copy_code_c508b4348c.jpg) > **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. **Installation Guides** - [Ghost](/documentation/cookie-banner-ghost) - [HubSpot](/documentation/cookie-banner-hubspot) - [WordPress](/documentation/cookie-banner-wordpress) - [Matomo](/documentation/cookie-banner-matomo) - [Angular](/documentation/cookie-banner-on-angular) - [HTML](/documentation/cookie-banner-on-an-html-website) - [Blogger](/documentation/cookie-banner-blogger) - [Drupal](/documentation/cookie-banner-drupal) - [Framer](/documentation/how-to-add-cookie-banner-on-framer-website) - [Gatsby](/documentation/cookie-banner-on-gatsby) - [ImpressPages](/documentation/cookie-banner-impresspages) - [Joomla](/documentation/cookie-banner-joomla) - [Kajabi](/documentation/cookie-banner-kajabi) - [Kartra](/documentation/cookie-banner-kartra) - [Magento](/documentation/cookie-banner-magento) - [MODX](/documentation/cookie-banner-modx) - [Next.js](/documentation/cookie-banner-on-next-js) - [Nuxt.js](/documentation/cookie-banner-on-nuxt-js) - [React.js](/documentation/cookie-banner-on-react-js) - [Shopify](/documentation/cookie-banner-shopify) - [Squarespace](/documentation/cookie-banner-squarespace) - [Vue.js](/documentation/cookie-banner-on-vue-js) - [WebFlow](/documentation/cookie-banner-webflow) - [Weebly](/documentation/cookie-banner-weebly) - [Wix](/documentation/cookie-banner-wix) > **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 `` and ` `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](https://www.cookieyes.com/support/?query=troubleshoot). > --- ## Structured Data ```json { "@context": "https://schema.org", "@graph": [ { "@type": "Article", "headline": "How to Add a Cookie Banner to Your Website", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://www.cookieyes.com/documentation/add-cookie-banner-to-website/" }, "url": "https://www.cookieyes.com/documentation/add-cookie-banner-to-website/", "publisher": { "@type": "Organization", "name": "CookieYes", "url": "https://www.cookieyes.com", "logo": { "@type": "ImageObject", "url": "https://assets.cookieyes.com/cookieyes.png", "width": 250, "height": 60 } }, "description": "Add a custom cookie banner to your website in 3 steps and get GDPR/CCPA compliant. Free signup. No credit card required.", "datePublished": "2022-03-15T10:38:19+00:00", "dateModified": "2026-03-03T19:22:30+00:00", "author": { "@type": "Person", "name": "CookieYes Doc Team" }, "image": [ "https://assets.cookieyes.com/cookieyes.png" ] }, { "@type": "BreadcrumbList", "@id": "https://www.cookieyes.com/documentation/add-cookie-banner-to-website/#breadcrumb", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.cookieyes.com/" }, { "@type": "ListItem", "position": 2, "name": "Documentation", "item": "https://www.cookieyes.com/documentation/" }, { "@type": "ListItem", "position": 3, "name": "Getting Started", "item": "https://www.cookieyes.com/category/documentation/getting-started/" }, { "@type": "ListItem", "position": 4, "name": "Banner Design", "item": "https://www.cookieyes.com/category/documentation/getting-started/banner-design/" }, { "@type": "ListItem", "position": 5, "name": "How to Add a Cookie Banner to Your Website" } ] }, { "@type": "WebSite", "@id": "https://www.cookieyes.com/#website", "url": "https://www.cookieyes.com/", "name": "CookieYes", "description": "CookieYes is a Google-certified consent management platform that helps businesses comply with GDPR, CCPA, and other global privacy laws.", "inLanguage": "en-US", "publisher": { "@id": "https://www.cookieyes.com/#organization" }, "potentialAction": { "@type": "SearchAction", "target": { "@type": "EntryPoint", "urlTemplate": "https://www.cookieyes.com/?s={search_term_string}" }, "query-input": { "@type": "PropertyValueSpecification", "valueRequired": true, "valueName": "search_term_string" } } }, { "@type": "Organization", "@id": "https://www.cookieyes.com/#organization", "name": "CookieYes", "url": "https://www.cookieyes.com/", "logo": { "@type": "ImageObject", "@id": "https://www.cookieyes.com/#/schema/logo/image/", "inLanguage": "en-US", "url": "https://assets.cookieyes.com/cookieyes.png", "contentUrl": "https://assets.cookieyes.com/cookieyes.png", "width": 19701, "height": 3176, "caption": "CookieYes" }, "image": { "@id": "https://www.cookieyes.com/#/schema/logo/image/" } } ] } ```