GDPR

cbarley
HubSpot Alumni
HubSpot Alumni

HOW TO: Customize Your Privacy Policy Banner

SOLVE

***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/

2 Accepted solutions
cbarley
Solution
HubSpot Alumni
HubSpot Alumni

HOW TO: Customize Your Privacy Policy Banner

SOLVE

Hi all,

 

Privacy policy customization won't need to be done through CSS soon! The beta for customization is out now. If you don't have it in your portal now, just keep an eye out for it. Here's a sneak peek of how it'll look: https://knowledge.hubspot.com/getting-started-with-hubspot-v2/how-to-customize-cookie-tracking-and-y...

View solution in original post

cbarley
Solution
HubSpot Alumni
HubSpot Alumni

HOW TO: Customize Your Privacy Policy Banner

SOLVE

Hi @MartinSherv1 , welcome!

 

1. I don't have any examples, but you could certainly use some CSS to position it in the middle of the screen when visitors come to your site.

- Something like this should position it in the middle of the screen:

body div#hs-eu-cookie-confirmation {
    max-width: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    box-shadow: 4px 4px 15px black;
}

2. No examples here. The only fields that exist are the ones built into your Tracking Code Settings where you edit the copy and options for your privacy policy banner. We don't give flexible customization on this front.

Screenshot 2019-02-19 10.20.11.png

 

3. Yes. If you implement the tracking code into your own website via these instructions, contacts that opt to be tracked or not tracked based on what they click. There isn't a contact property that holds this information, but you'll see page views on that contact if they did opt in. Here are more in depth instructions: https://knowledge.hubspot.com/articles/kcs_article/reports/customize-your-cookie-tracking-settings-a...

 

View solution in original post

39 Replies 39
Cory
Participant

HOW TO: Customize Your Privacy Policy Banner

SOLVE

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
HubSpot Employee

HOW TO: Customize Your Privacy Policy Banner

SOLVE

Hey, @Cory.

 

Would something like:

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

work?

 

Selector.jpg

Isaac Takushi

Associate Certification Manager
Cory
Participant

HOW TO: Customize Your Privacy Policy Banner

SOLVE

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
HubSpot Employee

HOW TO: Customize Your Privacy Policy Banner

SOLVE

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

Associate Certification Manager
0 Upvotes
Cory
Participant

HOW TO: Customize Your Privacy Policy Banner

SOLVE

Yes sir I am.

Thank you for your help!

I appreicate it.

Have a great week.

Cory
Participant

HOW TO: Customize Your Privacy Policy Banner

SOLVE

Isaac,

 

That worked perfectly!

Thank you.

One last thing.

How do i change the policy text color to white?

0 Upvotes
tommitchell
Contributor

HOW TO: Customize Your Privacy Policy Banner

SOLVE

This is great info, thanks. I'm still having problems though shifting the accept button in the center of the div due to the 'text-align: right !important' on div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-en-cookie-confirmation-buttons-area. This keeps overriding any further customisation (ie text align: center;) I try to do, even when I put it in the footer. Any advice would be much appreciated!

0 Upvotes
cbarley
HubSpot Alumni
HubSpot Alumni

HOW TO: Customize Your Privacy Policy Banner

SOLVE

Hi @tommitchell , try and make the selector more specific by adding body before it like so:

 

body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-en-cookie-confirmation-buttons-area {
   text-align: center!important;
}

If that does not work, can you please link an example page where you're running into the problem?

 

tommitchell
Contributor

HOW TO: Customize Your Privacy Policy Banner

SOLVE

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
HubSpot Alumni

HOW TO: Customize Your Privacy Policy Banner

SOLVE

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

HOW TO: Customize Your Privacy Policy Banner

SOLVE

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
HubSpot Employee

HOW TO: Customize Your Privacy Policy Banner

SOLVE

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

Associate Certification Manager
0 Upvotes
tommitchell
Contributor

HOW TO: Customize Your Privacy Policy Banner

SOLVE

Ah that has worked! Brilliant, thanks so much for your help!

MartinSherv1
Contributor | Diamond Partner
Contributor | Diamond Partner

HOW TO: Customize Your Privacy Policy Banner

SOLVE

Hey @cbarley !
I am a new UK Partner, digging deep into GDPR, and came across this post. Thank you.

I have a few questions if you have time...

1. Do you have any examples of the code you've shown being used as a 'pop up' or overlay on any sites? (And, is this possible to do?)
2. Do you have any examples where there is a more granular approach to acceptance e.g. a series of tick boxes for the various cookies?

Taking the example of a Wordpress site...

3. Even if the Hubspot code is implemented site wide, as I understand it, the custom code would need to be installed via Wordpress itself - if this is the case, would a person's contact record in Hubspot still reflect the state of their cookie preferences? (which is a great feature) 

Many thanks, Martin

 

0 Upvotes
cbarley
Solution
HubSpot Alumni
HubSpot Alumni

HOW TO: Customize Your Privacy Policy Banner

SOLVE

Hi @MartinSherv1 , welcome!

 

1. I don't have any examples, but you could certainly use some CSS to position it in the middle of the screen when visitors come to your site.

- Something like this should position it in the middle of the screen:

body div#hs-eu-cookie-confirmation {
    max-width: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    box-shadow: 4px 4px 15px black;
}

2. No examples here. The only fields that exist are the ones built into your Tracking Code Settings where you edit the copy and options for your privacy policy banner. We don't give flexible customization on this front.

Screenshot 2019-02-19 10.20.11.png

 

3. Yes. If you implement the tracking code into your own website via these instructions, contacts that opt to be tracked or not tracked based on what they click. There isn't a contact property that holds this information, but you'll see page views on that contact if they did opt in. Here are more in depth instructions: https://knowledge.hubspot.com/articles/kcs_article/reports/customize-your-cookie-tracking-settings-a...

 

Adriane
Participant | Platinum Partner
Participant | Platinum Partner

HOW TO: Customize Your Privacy Policy Banner

SOLVE

Hello cbarley,

 

thank you for the pop-up solution you gave in your first point. We'd appreciate it if this would be an option in the drop down menu of the notification type in the settings of the cookie notification style. A few of our customers wish to test this option but at the moment we have to involve a coder to get this done so it's very time-consuming and inconvenient for us. It would be great if we could do it ourselves by a few clicks.

 

Also, we urgently need flexible customization in the cookie policy settings which you talked about in your second point. According to https://datenschutz-generator.de/ we have to list all the cookies we use in detail and it must be possible to accept or disable every single one of them. We and our customers put emphasis on this and would resent to fall back on a 3rd party solution. 

 

Best regards

Adriane

Phone: +49 202 963114 - 0
Email: adriane@pinetco.com
Web: https://www.pinetco.com/
MartinSherv1
Contributor | Diamond Partner
Contributor | Diamond Partner

HOW TO: Customize Your Privacy Policy Banner

SOLVE

Fantastic. Thank you again Connor

heatherm
Participant

HOW TO: Customize Your Privacy Policy Banner

SOLVE

Hello, I'd like to customise the font size on the data privacy & consent messages that HubSpot allows users to enabled on forms. Can someone please point me in the right direction?

0 Upvotes
ShariM
Contributor | Platinum Partner
Contributor | Platinum Partner

HOW TO: Customize Your Privacy Policy Banner

SOLVE

The tool for this cookie notification has been updated and now requires the use of TWO buttons. Will this code shown above still work?

 

Also, Hubspot, can't you please add in some functions to allow the tool to style the font and background colors of the notification?

0 Upvotes
cbarley
Solution
HubSpot Alumni
HubSpot Alumni

HOW TO: Customize Your Privacy Policy Banner

SOLVE

Hi all,

 

Privacy policy customization won't need to be done through CSS soon! The beta for customization is out now. If you don't have it in your portal now, just keep an eye out for it. Here's a sneak peek of how it'll look: https://knowledge.hubspot.com/getting-started-with-hubspot-v2/how-to-customize-cookie-tracking-and-y...