How to Create a GDPR Modal Popup Using RoarJS

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

Added by Ciprian on Friday, May 18, 2018 in Blog, JavaScript

Unlimited Automated Page Speed Monitoring & Tracking. Completely free.
Use SpeedFactor to track your website. It’s simple, reliable, and best of all, it’s free forever.
See how real people experience the speed of your website. Then find (and fix) your web performance problems.
Get Started

Related Articles


Privacy Policy