Open the Cookie Opt-in Dialog
To ensure that all examples are displayed correctly, you should not accept the external content. Click on the link on the right side and exclude the external content. Save and reload the page.
On the right side you see the source code that produces the link.
<button class="btn btn-md btn-primary" type="button" onclick="SgCookieOptin.openCookieOptin(); return false;">Open the cookie opt-in dialog</button>
Enable External Content
This is a YouTube video. You cannot see it yet, because it has an external source that could potentially set cookies. It is therefore registered by the Cookie OptIn plugin and replaced by a Cookie OptIn box. The video will be displayed only after your consent.
If you look closely at the source code, you will see that the source of the video comes from the domain youtube-nocookie.com. This is a special domain from Google, which does not set cookies unless you click on the play button. So in this case you can disable the Opt-In Box for better usability.
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/5J3-W28gMlo" allowfullscreen data-consent-description="A little extra description" > </iframe>
The OptIn box can be switched off by simply setting the data-iframe-allow-always="1" attribute. This will tell the Cookie Opt-In script that this element should always be displayed. You can do the same with the CSS class frame-external-content-protection.This is the frame class that you can set in the Appearance tab for each content element. You can read more about this in our documentation.
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/5J3-W28gMlo" allowfullscreen data-consent-description="A little extra description" data-iframe-allow-always="1"> </iframe>
Protect Content Elements
The reverse case can also occur, where elements store personal data in the background, but are not recognized by the Cookie OptIn script. This could be, for example, images that are generated via PHP and even set cookies. We have a similar solution for this: You can either set the attribute data-external-content-protection directly in HTML or select External Content in the Appearance tab of a content element.
<div style="height: 110px;" class="frame-external-content-protection"> This is an element that potentially stores personal data. </div>
This is very handy for Google Maps or other complex elements that can be integrated with JavaScript. In this example we used the frame class from the TYPO3 Backend.
Edit External Content after Loading
If you look closely at the source code, you will see that we have explicitly set the height of the element to 110 px. Otherwise it would be too small for the Opt-In box. However, we do not want the content element to take up that much space after we have loaded it on the page. Accordingly, we need to edit the element after loading so that it fits into the design. For this we use the API function SgCookieOptin.addAcceptHandlerToProtectedElements.
As first parameter we pass the callback function and as second parameter we pass the CSS selector, which uniquely addresses the element. This will get our element from the stack with the replaced external content and append our callback function as an EventListener. When the element is loaded, the function is executed.
In the callback function itself, we have the parameter/event that has property externalContent, there is our element. We then address this property and set the height back to "auto" and for fun we make the text green. Click on it and see what happens.
<div id="external-content-to-edit" style="height: 100px;" class="frame-external-content-protection">
This is an element that potentially stores personal data.
</div>
<script>
function doAfterLoad(event) {
event.detail.externalContent.style.height = 'auto';
event.detail.externalContent.style.color = '#629755';
}
SgCookieOptin.addAcceptHandlerToProtectedElements(doAfterLoad, '#external-content-to-edit');
</script>
Cookie Opt-In Extension for TYPO3
A solution for optional cookie and script integration in accordance with DSGVO (GDPR) and ePrivacy – Could you already convince yourself of our extension or do you need further information?