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.

NOTE: In case an external element is not blocked by default, you can manually block cookies

External elements are usually scripts, iframes or images that reference an external resource with the src attribute. As described above, scripts are prevented from setting cookies by setting the type to "text/plain".
Iframes and images do not have a type attribute though, which is why another approach is used for elements of this type::

1. Change the src attribute to data-cookieblock-src. This disables the image/iframe since the src attribute, which defines what content to display, is now technically missing.
2. Add the data-cookieconsent attribute and assign it one of these values: "preferences", "statistics" or "marketing".
   This attribute defines the condition under which the Cookiebot script needs to enable and load the script.

An example of marking up an iframe:

This iframe loads a video from YouTube:

<iframe src="https://www.youtube.com/embed/fyvwLAPNfXY"></iframe>

To mark up this iframe to require consent to cookies in the "marketing" category:

<iframe
data-cookieconsent="marketing"
data-cookieblock-src="https://www.youtube.com/embed/fyvwLAPNfXY"
> </ iframe >

You can find more information about manual cookie blocking here:

When an external element is blocked, 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.