How to block resources (Google Maps, Fonts, Youtube, etc) content until user's consent

Modified on Tue, 12 Sep 2023 at 02:31 PM

In this article, we will show you how to block resources as Google Maps, Google Fonts, Youtube and Vimeo until user's consent.

The first step to block this from our platform is to go to the Side menu > Cookie Banner > Advanced Settings and activate the checkbox that says "Block resources until user's consent" (This will be disabled by default, so you just need to monitor it).

By enabling this option, when the page containing the resource loads, in case of videos you will see a brief loading of the blocked content with a grey overlay, followed by a notice with instructions to make the content visible. By default, this notice will place this content under the "Marketing" category.

If you want to avoid the loading before the content on your page, you can add the "allowIframe=true" query param to the source on our banner, like in the following example:

<script src="https://platform.illow.io/banner.js?siteId=QUERY_PPROVIDED_IN_HOME&allowIframe=true"></script>

Please note that this property also allows you to choose which iframes to block and which ones to allow across your different pages.

Can I change the category of my iframes?

To change this, you can add the "illow-category" property to the iframe tag and specify the category as shown in the code below:

<iframe width="663" height="373" illow-category="statistics" src="https://www.youtube.com/embed/mQE0LQFFn3s" title="Sesame Street: Cookie Monster Eating Mashup" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Can I block other iframes besides Youtube or Vimeo?

While currently we only natively block iframes from YouTube and Vimeo, if you need to manually block others, you can do so by adding the "illow-src" property to the src attribute, and this will activate the blocking of the iframe by illow. It should look like this:

<iframe width="663" height="373" illow-category="statistics" illow-src="https://www.youtube.com/embed/mQE0LQFFn3s&allowIframe = true" title="Sesame Street: Cookie Monster Eating Mashup" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

IMPORTANT: In case you are using Google Tag Manager, make sure to add the "illow-src" to the src attribute so we can block this earlier.

And it's done!
Now you blocked the iframes on your site until the user gives his consent!