HOW TO: Customize Your Privacy Policy Banner

SOLVE
cbarley
HubSpot Alumni

***The method described in this article will only work on HubSpot-hosted subdomains. External domains do not have authorization to access the Header/Footer in Settings from within HubSpot. However, the actual code from the article can be used on externally hosted domains. The styles would just need to be placed in the Headers/Footers of your templates in whichever CMS you use, or within the stylesheet there.***

 

With GDPR looming right around the corner, companies are all working toward getting everything in order. That means updating the Privacy Policy banner that will need to appear at the top of your site in order to notify visitors that your site uses cookies.

 

Where can you find the settings for this banner?

 

To get to the Privacy Policy section in your Settings go to your Avatar in the top right corner > Settings

 

SettingsSettings

Then go down to Reports and Analytics Tracking

 

If you have the New Navigation enabled go ahead to the Settings Icon, then to Reports and Analytics Tracking

 

New NavNew Nav

 

Once there, head over to the Cookie Policy tab. Here is where you’ll find all settings on cookies. You can change the banner text, the button text to accept the terms, and the disclaimer text, but there’s no place to change the actual style!

 

new cookies settingsnew cookies settings

 

 

UPDATE: With the new Reports Settings beta we can change the location of the banner as well as the colors, but not much more than this. The code below can still help customize your banner further.

 

Here is a screenshot of the new styling tab of the Reports Settings:

 

styling colors and position of bannerstyling colors and position of banner

 

Hubspot’s default styling for the banner is great, but what if you want to customize its appearance to match your brand? Well, it’s not super obvious, but we can get around it using some CSS.

 

Here’s the default:

 

Default Privacy Policy BannerDefault Privacy Policy BannerThe styling of this cookie banner automatically gets injected into the Head HTML (we can’t access this, however Smiley Sad), so what we can do is place it in the Footer.

 

But why the Footer, you say?

 

If you’re familiar with CSS and the cascade, if there are two identical declarations with the same specificity (which is what will happen in our case since we are going to overwrite the default), the declaration that comes last will “win out”.

 

So for this, we’d want to do this globally. So let's head over to the Marketing section of the Settings and go to Web Pages.

 

To modify the styling for All Domains, we should have All Domains setting selected:

 

All DomainsAll Domains

NOTE: IF YOU HAVE ANYTHING IN THE FOOTER OR HEADER WHEN MODIFYING A SPECIFIC DOMAIN (instead of “All Domains”) THOSE SETTINGS WILL OVERWRITE THE DECLARATIONS WE PLACE IN THE FOOTER OF ALL DOMAINS.

 

So to style the banner, here’s the boilerplate you’d need:

 

<style>
/* Edit this section to change the main container of the banner */ div#hs-eu-cookie-confirmation.can-use-gradients { code in here }
/* Edit this section to change the inner wrapper of the banner i.e. add more padding */ div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner { code in here }
/* Edit this section to change the style of the text */ div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner p { code in here } /* Edit this section to change the style of the CONFIRM button */ div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button { code in here }
/* Edit this section to change the style of the DECLINE button */
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-decline-button { code in here }
/* Edit this section to change the style of the CONFIRM button when hovering */ div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button:hover { code in here }

/* Edit this section to change the style of the DECLINE button when hovering */
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-decline-button:hover { code in here } </style>

 

 

Be aware, most of the declarations you make here are going to require CSS !important tags and will need to be placed inside of <style>code here</style> tags.

For my site, I’m going to go with the following:

 

div#hs-eu-cookie-confirmation.can-use-gradients {
   background: #778899;
   border-bottom: none;
   box-shadow: 2px 2px 2px black;
   border-radius: 5px;
}

div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner p { font-family: sans-serif!important; } div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button {    background: #2d3e50!important;    border: none!important;    box-shadow: 2px 2px 1px black;    font-family: sans-serif!important;    transition: 0.2s ease;    -webkit-transition: 0.2s ease;    -moz-transition: 0.2s ease;    -o-transition: 0.2s ease;    -ms-transition: 0.2s ease; } div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button:hover {    box-shadow: 3px 3px 1px black;    transition: 0.2s ease;    -webkit-transition: 0.2s ease;    -moz-transition: 0.2s ease;    -o-transition: 0.2s ease;    -ms-transition: 0.2s ease; }

 

Screenshot 2018-05-08 11.56.48.png

 

And that’s it! Good luck

 

Useful Links

 

GDPR: https://www.hubspot.com/data-privacy/gdpr

 

CSS: 

https://developer.mozilla.org/en-US/docs/Web/CSS

https://css-tricks.com/ 

https://www.w3schools.com/

39 Replies 39
tommitchell
Contributor

Sorry @cbarley  I have one more question - is it possible to change the layout of the cookie notice? ie move the confirm button to be in line with the text rather than beneath it? Thanks in advance!!

0 Upvotes
cbarley
HubSpot Alumni

Sure @tommitchell , pretty much any layout you might want is possible with CSS. Making the container that holds the buttons to be displayed as inline-block rather than block should help: 

 
0 Upvotes
Exp
Member

I have a question about this - not a visual change, but I want to have the banner with the HS cookie collection message that pops up on top of website when first enterting it - can it be uploaded with a 5 min delat? Is there a way to configure this? 

Thanks!

0 Upvotes
IsaacTakushi
HubSpot Employee

Hi, @Exp.

 

I wouldn't recommend doing that, but one way you could approach this by hiding the cookie banner by default with CSS:

 

#hs-eu-cookie-confirmation {
  display: none;
}

and then using JavaScript to reveal it with the setTimeout() method:

 

setTimeout(function(){
    document.getElementById("hs-eu-cookie-confirmation").style.display = "block";
}, 300000);

 

Isaac Takushi

Alumnus, HubSpot Developer Support
0 Upvotes
Cory
Participant

I want the background to be black.

What did i do wrong?

 

<style>
/* Edit this section to change the main container of the banner */
div#hs-eu-cookie-confirmation.can-use-gradients {
background: #050505;
border-bottom: none;
box-shadow: 2px 2px 2px black;
border-radius: 5px; }

/* Edit this section to change the style of the text */
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner p {
font-family: sans-serif!important; }

/* Edit this section to change the style of the CONFIRM button */
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button {
background: #cccccc!important;
border: none!important;
box-shadow: 2px 2px 1px black;
font-family: sans-serif!important;
transition: 0.2s ease;
-webkit-transition: 0.2s ease;
-moz-transition: 0.2s ease;
-o-transition: 0.2s ease;
-ms-transition: 0.2s ease; }


/* Edit this section to change the style of the CONFIRM button when hovering */
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button:hover {box-shadow: 3px 3px 1px black;
transition: 0.2s ease;
-webkit-transition: 0.2s ease;
-moz-transition: 0.2s ease;
-o-transition: 0.2s ease;
-ms-transition: 0.2s ease; }

</style>

 

Cookie Policy.png

0 Upvotes
IsaacTakushi
HubSpot Employee

Hey, @Cory.

 

Would something like:

div#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom {
  background: #050505;
}

work?

 

Selector.jpg

Isaac Takushi

Alumnus, HubSpot Developer Support
Cory
Participant

Isaac,

 

That worked perfectly!

Thank you.

One last thing.

How do i change the policy text color to white?

0 Upvotes
Cory
Participant

Isaac,

 

Is this correct?

/* Edit this section to change the style of the text */
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner p {
font-family: sans-serif!important;
color: #ffffff;
}

 

0 Upvotes
IsaacTakushi
HubSpot Employee

Hey, @Cory.

 

Apologies for the delayed response.


I just took a look at the site and it seems like the white text is in place. Are you good to go here?

 

White text.png

Isaac Takushi

Alumnus, HubSpot Developer Support
0 Upvotes
Cory
Participant

Yes sir I am.

Thank you for your help!

I appreicate it.

Have a great week.