HOW TO: Customize Your Privacy Policy Banner

SOLVE
Highlighted
HubSpot Moderator

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

 

unnamed.pngSettings

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

 

Settings.pngNew 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!

 

Settings 2.pngnew 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:

 

Settings.pngstyling 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:

 

Screenshot 2018-05-08 11.26.52.pngDefault 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:

 

unnamed-1.pngAll 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

Accepted Solutions
HubSpot Moderator

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...

HubSpot Moderator

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...

 

30 Replies 30
New Contributor

It would be awesome to be able to only show this visitors with an IP in the EU. Can you add this to the development list?

Reply
0 Upvotes
HubSpot Moderator

Hey Jill!

 

Thanks for the comment. I agree that could be a useful feature for some. The best way to get this in front of our Product Team's eyes is to create or upvote an idea in the Ideas Forum: https://community.hubspot.com/t5/HubSpot-Ideas/idb-p/HubSpot_Ideas/tab/most-kudoed

 

Thanks!

 

Connor 

Community Manager

This is terrific - thanks for sharing @cbarley!


@Grovewilks@djackouk@AlisonRenwick@Mela@GrandLedge@shearn I thought you might find this interesting!

Reply
0 Upvotes
New Contributor

Thanks @roisinkirby, I had already activated the banner, but my question was how can I create a list to record those who enter the website and click on the accept button of the banner?

Reply
0 Upvotes
Regular Contributor

Thanks @cbarley

 

I'm trying to work through this but no changes are happening to the cookie confirm button. 

 

I may have mis understood your instructions. This is what I've done. This code is pretty much what you have given me but the background is now #f0069b (pink).

 

Can you see where I may have gone wrong here:

Thanks,Stewart.Footer Cookie Style.PNG

Reply
0 Upvotes
HubSpot Moderator

Hi @Stewartbennett, if you can send over a page on which this cookie banner should show up, and your HubID, I can look into this a bit further for you Smiley Happy

 

Connor

Reply
0 Upvotes
Regular Contributor

The banner is showing throughout the site:http://www.activeprofile.co.uk/

HUB ID: 2498665

 

Thanks @cbarley

Reply
0 Upvotes
HubSpot Moderator

Ah @Stewartbennett - so in my example, I did not give the option to click the decline button, so the CSS IDs used for the decline and accept buttons are a little bit different. To target the background of that button, you'll just need this code :

<style>
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button { background: #f0069b!important; }
</style>

That said, hopping into your portal it looks like your www. subdomain is not hosted on HubSpot. In order to change the banner for that domain, you'd need to place the code in the footer of whichever CMS you use. This styling I provided in this post would only apply to HubSpot hosted domains, but the general principals still apply.

Reply
0 Upvotes
Regular Contributor

Just looked at one of my HS LPs and the style has changed. Either you did something or what I already had was working. Either way, thanks. 

 

I'll now need to populate this in WordPress and I should be good to go Smiley Happy 

Reply
0 Upvotes
HubSpot Moderator

Hey @Stewartbennett, yup - I edited that code for you already so it was me haha! Good luck with implementing it on Wordpress too! 

Reply
0 Upvotes
Occasional Contributor

Hey Stewart!

I am very new, and very much learning here.

As such, I'm checking out various approaches to cookie/privacy approaches and noticed your question. 
Please treat me as a (dumb) novice when I ask this, but I tested your website using an incognito window, declined your cookie policy, then looked at 'Inspect' - this is what I see: https://www.screencast.com/t/yLMsPJNngp i.e. there seems to be a Facebook cookie placed on my computer.  Should that be there? And if yes, could you let me know the nature of that cookie; and if no, do you know the reason it got triggered? 
As I say, keen to learn (myself and my wife are a new Hubspot partner).

Thanks, Martin (&Elisa)

Reply
0 Upvotes
Top Contributor

How do you add a hyperlink to your Privacy Policy in the banner?

HubSpot Moderator

Hi @Siddall, you should be able to go to the cookies section when you're editing the text and click the little link icon in the editor. This should allow you to hyperlink.

 

I'm not aware of an active way to opt in, but many people already have this feature and I'd expect almost all portals to have this very soon, if not already.

HubSpot Moderator

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...

Top Contributor

 @cbarley - Is there any way to 'opt-in' to the beta?

Reply
0 Upvotes
Regular Contributor

@cbarley  

 

The description you linked to says that the notification can be "styled". However the options allow styling of the accent color. How do we change the BACKGROUND color of the pop up? It's currently white. We'd like to make it darker. 

 

Also, is there a way to show only the "accept" button and not the "decline" button? I tried to set it up with only accept but the system wasn't allowing that.

Reply
0 Upvotes
HubSpot Moderator

Hi @ShariM, as stated in the article you should be able to change the background color of the main container using the following code. For example, you can change the background of the banner to be pink by using:

 

<style> 
   /* Edit this section to change the main container of the banner including the background color */
   div#hs-eu-cookie-confirmation.can-use-gradients { 
      background: pink!important 
   }
</style>

 

The code will still work regardless of what you're trying to do. Almost anything can be styled using CSS - you'll just need to look at the boilerplate I've provided and apply the necessary styles there. If you don't want a decline button, that can be done in the settings by disabling "require opt in".

 

Hope this helps!

Reply
0 Upvotes
Regular Contributor

@cbarley Thanks. I can't seem to get it to work.

 

Question: does the cookies tool only work for COS hosted domains? The main part of the website is not hosted on Hubspot, only the landing pages and blog are, but I thought it would work like lead-flows does? It doesn't seem to be adding the cookies notification on the main domain.

Reply
0 Upvotes
HubSpot Moderator

Hi @ShariM, yes this styling would only work on your HubSpot hosted domains. The default styling is loaded in via JavaScript that loads on externally hosted domains, but those external domains to do not have permissions access to the site footers/headers from the HubSpot platform. You can still place your styles you've declared in your footer into the styelsheet or site footer that your external domain uses and your alterations should still work.

Reply
0 Upvotes
Top Contributor

@cbarley just tried the new feature and it messes up the banner design completely.

Ours now work fine, other than in IE (and yes, some of our customers still use IE).

Reply
0 Upvotes
Regular Contributor

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?

Reply
0 Upvotes
Occasional Contributor

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?

Reply
0 Upvotes
Occasional Contributor

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

 

Reply
0 Upvotes
HubSpot Moderator

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...

 

Occasional Contributor

Fantastic. Thank you again Connor

Regular Contributor

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: centerSmiley Wink I try to do, even when I put it in the footer. Any advice would be much appreciated!

Reply
0 Upvotes
HubSpot Moderator

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?

 

Reply
0 Upvotes
Regular Contributor

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

Regular 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!!

Reply
0 Upvotes