getButterfly
Resume

NAVIGATION

ATTRIBUTION

getButterfly
Dublin, Ireland

All Content Copyright ©2019
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!

Do you want better SEO? More traffic? More conversions? More growth? We help companies exponentially grow their traffic and conversions, while outranking their competitors. With more than 10 years of experience, we’ve learned what is valuable to our clients.
SEO Dublin | SEO Malta

My Battle Tested Recommendations

Jetpack
Dreamhost
WordPress.com
CodeCanyon
SEMrush

Disclaimer: These recommendations contain affiliate links.


Privacy Policy