Add a placeholder for blocked content

The Cookie Consent product ensures that any non-essential scripts or iframes are not allowed to load and set cookies on a website until a visitor has provided an active consent.

For example, if you've embedded a Youtube video through the HTML module, it won't be allowed to load on the published website prior to a visitor-given consent because it is setting marketing cookies. On the website, an empty white space will show:

Having empty space on a page is obviously not a good visitor experience. To resolve this, you can add a placeholder to substitute for the blocked content until the visitor has accepted the relevant cookies. The visitor can change their consent preference on cookie declaration module, or through the cookie consent widget, if you have enabled it.

On the placeholder, you can inform the visitor that content is present and will load once they have accepted cookies.

The placeholder also contains a link that, when clicked, displays the cookie banner to the visitor. Here is how the placeholder looks:

You should add the placeholder in the same HTML module as your embedded content, and you can customize the styling of it with Custom CSS. Follow these steps to set it up:

See how

1. Start by adding styling for the placeholder in Global Design > Custom CSS. You can style it any way you want but feel free to use our version (as seen on the screenshot above):
   

   .cookieconsent-placeholder {
   background-color: #f1f3f6;
   border: 1px solid #d2d3d6;
   border-radius: 4px;
   color: #3e3e42;
   font-size: 16px;
   margin: 0 auto;
   padding: 24px;
   text-align: center;
   width: 100%;
   }

2. Add an HTML module and paste the embed code for the content you wish to add (Youtube video, booking widget, etc.)
3. In the same HTML module just above the snippet you've just pasted, add the following code:
   

   <div class="cookieconsent-placeholder">
   Please
   <a href="javascript:Cookiebot.renew()">accept marketing cookies</a>
   to watch this video.
   </div>

   You can change the text to anything you like as long as you keep the <a href="javascript:Cookiebot.renew()"> part of the code intact.

4.  Save your changes, publish your site, and you're good to go!

Please note that if you use the Video Module, a notification will automatically show up on the video, telling visitors they must allow cookies to view the content, and giving them a button to do so with a single click.