HOW TO: Customize Your Privacy Policy Banner
SOLVE
.png "HubSpot Alumni"){kind=icon}
***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
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
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!
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:
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:
), 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:
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;
}
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
Accepted Solutions
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.
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...
