Support > Designing and Building Your Website > Approved CSS Code
Within your Create account, you can enable our Cookie Consent Pop-up which allows visitors to block non-essential cookies from running on your website. We have further details on how to enable this feature in this help guide.
If you have any custom HTML added to your site, either within an HTML fragment or in the Custom Head of a page, you will need to make some minor alterations to the code in order to assign a cookie consent level and allow the code to be blocked via the Cookie Consent Pop-up.
Currently, Create supports three different cookie consent levels:
- cookie_consent/functional - Scripts/includes that add functionality to the site - e.g. Instagram widgets, PayPal Buy buttons, Embedded Video
- cookie_consent/tracking - Scripts/includes that track user behaviour - e.g. Google Analytics, Google Tag Manager, Pinterest tracking
- cookie_consent/marketing - Scripts/includes that are used for marketing purposes - e.g. Google Adwords
Any code you need to adjust will either be wrapped in <script> or <iframe> tags.
Script Tags will begin with <script>. An example of this would be similar to the code below, which is provided to you by Google Tag Manager.
<script async src="https://www.googletagmanager.com/gtag/js?id=ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag({dataLayer.push(arguments);}
gtag("js", new Date();
gtag("config", "ID");
</script>
As you can see in the above code, there are 2 script tags in place (shown in red) which need to be amended, the final closing </script> doesn’t need to be amended.
You will need to either add or update the type= attribute on each script tag to reflect the level of consent, by using one of the 3 consent level tags shown in the section above, e.g. type="cookie_consent/tracking" as this is a tracking type of script from Google.
The tags may have no type already in which case you can just add it, or they may have type="text/javascript" in which case you need to replace it.
As the example above doesn’t have a script type, it needs to be added after the script tag.
Below is the code before any changes and after, with the changes shown in red.
Before:
<script async src="https://www.googletagmanager.com/gtag/js?id=ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag({dataLayer.push(arguments);}
gtag("js", new Date();
gtag("config", "ID");
</script>
After:
<script type="cookie_consent/tracking" async src="https://www.googletagmanager.com/gtag/js?id=ID"></script>
<script type="cookie_consent/tracking">
window.dataLayer = window.dataLayer || [];
function gtag({dataLayer.push(arguments);}
gtag("js", new Date();
gtag("config", "ID");
</script>
Some of your custom code might be added in the form of an iframe, such as embedded video content for example. This does not relate to videos added to your pages via our Video Blocks.
You can add a consent level to iframes in a similar way to script tags, however for iframes, there will be two alterations you need to make, adding a consent level after the iframe tag and updating the src attribute. Using the following iframe code for a YouTube video as an example, the elements in red are what need to be amended.
<iframe width="560" height="315" src="https://www.youtube.com/embed/4lLaOZE5EG8?si=-3O8SmKKc-Gm_2aX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
As a YouTube video adds function to a website, the consent level would be data-cookie-consent="functional" and the src needs to be altered to data-src
Below is the code before any changes and after, with the changes shown in red.
Before:
<iframe width="560" height="315" src="https://www.youtube.com/embed/4lLaOZE5EG8?si=-3O8SmKKc-Gm_2aX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
After:
<iframe data-cookie-consent="functional" width="560" height="315" data-src="https://www.youtube.com/embed/4lLaOZE5EG8?si=-3O8SmKKc-Gm_2aX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
If you have any code you are unsure how to adjust or if it needs any adjustment, please contact your Account Manager who will be happy to advise further.
If you have any further questions, please get in touch and we will be happy to help.
Get in Touch