Placeholder after script customization
- Karl Horstmann
Often, customizing the script does not cause any problems as long as the customized script is not a visual element on the page (e.g. Google Analytics).
However, when customizing visual elements like YouTube, there is a problem that a content block is missing on the page. To solve this problem we used placeholders, which show the user what should actually be displayed here.
We divide the areas into a JavaScript, HTML and styling part.
1. Script Part
The first block consists of a normal script tag that has the appropriate data-cookieconsent value for the service. In our example it is YouTube Video. We assign this to the preferences category.
This script has the type="text/plain" which is not recognized by the browser as JavaScript and therefore is not played.
As soon as the approval for the service is given, the type changes and the JavaScript in the brackets is executed.
In our example the Youtube iframe is inserted into a div we created with the id youtubePlaceholder.
Important the script should be inserted under the HTML part. So that the HTML placeholder is loaded before the script, otherwise there may be problems when setting the iframe.
<script type="text/plain" data-cookieconsent="preferences">
document.getElementById('youtubePlaceholder').innerHTML = '';
document.getElementById('youtubePlaceholder').innerHTML += '<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com" frameborder="0" allowfullscreen=""></iframe>';
</script>Alternatively, the following script can be used.However, it is then necessary to set an empty div in the place where the YouTube video should be displayed.
<script type="text/plain" data-cookieconsent="preferences">
document.getElementById('youtubePlaceholder').style.display = 'none';;
document.getElementById('positionYouTubeVideo').innerHTML = '<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com" frameborder="0" allowfullscreen=""></iframe>';
</script> <div id="postitionYouTubeVideo"></div>
2. HTML part
The second block consists of a div with the id youtubePlaceholder the content of this div will be overwritten with the YouTube iframe from the first block as soon as the approval for Youtube is granted.The background image can also be easily removed if needed.
In line 2-3 is the YouTube icon, which is set as background image (Base64 Encoded).This is the YouTube logo in the template, but can be changed for other services or as needed.
A button is displayed in lines 13-16.Clicking the button opens the cookie banner.
In line 17-21 a button is displayed, when clicking on the button Youtube is accepted and the placeholder disappears and is replaced with the real Youtube video
Here the function
Cookiebot.submitCustomConsent(bool optinPreferences,bool optinStatistics,bool optinMarketing)is used for. The desired consent for the respective categories is given as a parameter.Since the YouTube service is assigned to the preferences category, the function is thus used as follows:
Cookiebot.submitCustomConsent(true, Cookiebot.consent.statistics, Cookiebot.consent.marketing)
OptIn to specific category | Function |
|---|---|
Preferences | Cookiebot.submitCustomConsent(true, Cookiebot.consent.statistics, Cookiebot.consent.marketing) |
Statistics | Cookiebot.submitCustomConsent(Cookiebot.consent.preferences, true, Cookiebot.consent.marketing) |
Marketing | Cookiebot.submitCustomConsent(Cookiebot.consent.preferences, Cookiebot.consent.statistics, true) |
3. Styling
For the placeholder to be styled correctly, CSS is still needed. This can of course be adjusted as desired, so that this corresponds to the style of the page.
In line 3-6 the width and height of the placeholder can be set.
In line 34 the color of the "More Information" button can be adjusted.
In line 55 the color of the "Accept" button can be customized.