Adding a GDPR Banner to a Svelte Site

Published: July 3, 2021

Do you wanna setup a GDPR banner in a few minutes?

Recently a lot of countries have passed laws which require sites to prompt consent banners for users. These regulations include the California Consumer Privacy Act (CCPA) and the General Digital Protection Regulations. Both laws define plenty of rights for the final users, but everything starts with only retaining users' data by obtaining their consent.

So, since 2019 a lot of websites have started asking for consent through banners to store their cookies, which could be used for tracking, analyzing, offering targeted content and so on. This blog does exactly that too, in order to respect your privacy. To make this consent prompt easier, there are a few javascript npm libraries to add it to a certain site.

The library used here is https://github.com/beyonk-adventures/gdpr-cookie-consent-banner. Now I would like to show how simple it is to add this gdpr-consent to your Svelte site (also, there is a version of that library for Vanilla or library-less Javascript, however it will not be examined here). First and foremost, you need to include the gdpr-cookie-consent-banner lib to your project. One of the ways is to open your package.json and add it in the dev dependencies section (please check the repo to choose an updated version), like this:

            {
                "name": "Vinicode",
                ...
                "devDependencies": {
                    "@beyonk/gdpr-cookie-consent-banner": "^7.1.1"
                    ...
                }
            }
                

Then, run npm install. Now you should proceed to requiring it in the .svelte file in routes that functions as the entrance of your site. I use svelte with sapper, as both a background and front-end application, providing the pages, essentially, in a server-side rendering way. In my case, I added the requirement of the library in the script tag:

            <script>
                import '@beyonk/gdpr-cookie-consent-banner/dist/style.css'; // optional, you can also define your own styles
                import GdprBanner from '@beyonk/gdpr-cookie-consent-banner';

                function initAnalytics() {
                    // do some stuff here
                }
            </script>

            <GdprBanner description="Welcome! Please consider letting us to have your consent to store cookies" on:analytics={initAnalytics} />
                

That is it. You can also customize other options, but it is better to take a look at the project's README.me. Try it and tell us about your experience in the comments.