getButterfly
Resume

NAVIGATION

ATTRIBUTION

getButterfly
Dublin, Ireland

All Content Copyright ©2018
getButterfly

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!


Leave a Reply

Your email address will not be published. Required fields are marked *

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


My Battle Tested Recommendations

Jetpack
Dreamhost
WordPress.com
CodeCanyon
SEMrush

Disclaimer: These recommendations contain affiliate links.