GDPR Embed Consent Box

This can be used for map or video with little wording changes.

aaand it can be used with Elementor HTML widget just paste this and change the Map Widget ID as “#embed-consent” that’s it.

<div class="consentbox">
    <div class="consent-section">
        By loading the map, you agree to Google's privacy policy.
    </div>
    <div class="openthemap">Show Map</div>
    <div class="consent-section">
        <input type="checkbox" name="cc1" class="cc1" checked>
        <a href="https://policies.google.com/privacy" target="_blank">Google Privacy Policy</a>
    </div>
</div>
<style>
    #embed-consent{ display:none; height:auto; }
    .consentbox{ text-align: center; padding-top:100px; padding-bottom:100px; }
    .consent-section{ width:100%; padding-top:20px; padding-bottom:20px;}
    .openthemap{ width:200px; display:inline-block; padding:20px; background: green; color:white; font-size:21px; border-radius: 20px; cursor: pointer; }
    .openthemap:hover{ background: gray; }
</style>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var mapOpener = document.querySelector('.openthemap');
        var embedConsent = document.getElementById('embed-consent');
        var consentBox = document.querySelector('.consentbox');
        
        mapOpener.addEventListener('click', function() {
            embedConsent.style.display = 'block';
            consentBox.style.display = 'none';
            localStorage.setItem("googleconsent", 'true');
        });

        var consentgoogle = localStorage.getItem("googleconsent");
        console.log('Google Consent State: ' + consentgoogle);
        
        if (consentgoogle == 'true') {
            embedConsent.style.display = 'block';
            consentBox.style.display = 'none';
        }
    });
</script>

The box shows just ones after clicking the Show Map it doesn’t show again.

Browser local storage saves the user data and remembers it.

Leave the first comment