The Privacy Suite for WordPress

Placeholders for iFrames

Get compliant today in the European Union, United States, Canada, United Kingdom, Australia & South Africa with the only Privacy Suite for WordPress that offers a fully-featured plugin for Worldwide Compliance.

From 4.6.11 onwards, you can also use consent shortcode wrappers. An instruction can be found here.
From 6.0 onward you will be able to add your placeholder in the script center directly

You’re able to block iFrames with Complianz with the built-in script center. (under Integrations). But preventing an iFrame from loading third-party cookies won’t strip the HTML from your website, and you’re left with a content block on your page, without content prior to consent.

To signify the iFrame is blocked before consent and the content block is usually reserved for loaded content, you can add a placeholder with an accept cookies button.

Refresher: Blocking iFrames

Under Complianz > Integrations > Script Center, you will find the last editor reserved for iFrames. Here you can add the URL, or multiple URL’s comma-separated to block your iFrames. Sometimes an iFrame adds a script as well. This script can be blocked with the second editor, reserved for scripts.

script center iframe

Example:

 div class="calendly-inline-widget placeholder-inactive" style="min-width: 320px; height: 730px;" data-url="https://calendly.com/username">/div
script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js">/script

Script Center

Blocking script URL: calendly.com/assets/external/widget.js
Blocking iFrame URL: calendly.com

Adding the Placeholder

In the above example, I added a class name called “placeholder inactive”. This is done to add custom CSS to the iFrame.

To add the placeholder, you can add the following HTML below the iFrame:

div class="cmplz-blocked-content-notice cmplz-accept-cookies placeholder-active" style="text-align: center; cursor: pointer;">Click here to accept marketing cookies before loading this iFrame./div

You can, of course, use your own wording. In this div, a class called “placeholder-active” is added.

At this moment, please check if your iFrame is blocked before consent. Also, check if the placeholder sentence is displayed before and removed after consent.

Customized for Styling

To fill in the gap of your iFrame and add some styling to the button, please remember the beforementioned classes added to the divs. This will resolve in this example: demo.complianz.io/placeholders/regular-iframe.

If you need help, or something is unclear, we’re happy to help!

For the iFrame “placeholder-inactive” and for the placeholder “placeholder-active”:

.placeholder-active {
    background: #f2f2f2;
    min-width:320px;
    height:inherit;
    color:#333;
    border-radius:3px;
    vertical-align: middle;
    text-decoration:underline;
    font-size:1.2em;
    align-content: center;
    padding:50px;
    margin-top: -475px;
}
.placeholder-inactive {
border: 1px solid #dedede;
border-radius:3px;
}

Recent articles

The Privacy Suite for WordPress
Get compliant today with the only Privacy Suite made for WordPress

Categories

Popular articles

LGPD Brazil and WordPress

The “Marco Civil” and the Brazilian General Data Protection Law (LGPD) In Complianz 5.4 we will add full support for the Civil Rights Framework for

Read More

Join our mailing list - 8 Tips & Tricks in your inbox over the next 8 weeks!