How to Create a GDPR Modal Popup Using RoarJS

👋 Ciprian on Friday, May 18, 2018 in Blog, JavaScript
Last modified on Monday, August 17, 2020

Learn JavaScript by example. Code snippets, how-to's and tutorials. Try now!

GDPR modal using RoarJS

RoarJS is a wonderful, responsive, customisable, accessible (WAI-ARIA), zero-dependency, vanilla JavaScript alert/confirm replacement. RoarJS automatically centers itself on the page and looks great no matter if you’re using a desktop computer, mobile or tablet. RoarJS is free, tiny and it works in any browser.

The script below will check for a localStorage variable, which is the explicit user consent. If the variable exists, the modal popup is not shown. If the variable does not exist, the modal popup will be displayed with the chosen text.

First of all, don’t take my advice without consulting a lawyer. Every online business is different and requirements may vary.

Second, get RoarJS and a nice reassuring icon:

Use the code below to initialise your GDPR modal popup:

document.addEventListener("DOMContentLoaded", () => {
    /*
     * GDPR modal popup using RoarJS and localStorage
     *
     */
    if (!localStorage.getItem('gdprDisclaimer')) {
        var gdprOptions = {
            cancel: true,
            cancelText: 'Learn more',
            cancelCallBack: (event) => {
                location.href = '/your-privacy-policy-url-here/';
            },
            confirm: true,
            confirmText: 'I accept',
            confirmCallBack: (event) => {
                localStorage.setItem('gdprDisclaimer', true);
            }
        };

        roar(
            '',
            '<div class="roar-gdpr-badge"><img src="/your-badge-url-here/" alt="GDPR Badge"></div><div class="roar-gdpr-title">We value your privacy!</div><p class="roar-gdpr-body">We and our partners use technology such as cookies on our site to personalise content and analyse our traffic.</p><p class="roar-gdpr-body">Click below to consent to the use of this technology across the web. You can change your mind and change your consent choices at anytime by returning to this site.</p><p class="roar-gdpr-body">Check our <a href="/your-privacy-policy-url-here/">Privacy Policy</a> to see what data we are collecting.</p>',
            gdprOptions
        );
    }
});

Enjoy!

Find more JavaScript tutorials, code snippets and samples here or more jQuery tutorials, code snippets and samples here.

Buy me a coffee to support my work!

👋 Added by Ciprian on Friday, May 18, 2018 in Blog, JavaScript. Last modified on Monday, August 17, 2020.

Leave a Reply

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Privacy Policy