Sveltekit Cookie Manager 🍪

Sveltekit Cookie Manager is an easy-use Svelte package to help control the visitor's cookie consent.

Disclaimer

Minimum required SvelteKit version: 1.0.0-next.581.

About 📝

Sveltekit Cookie Manager reduces the workload of creating and mantaining multiple cookie consents by centralizing them into this package. Enables cookie management of following services:

• Google Analytics Universal.
• Google Analytics 4.

Features ✨

• Display a customizable popup to accept or reject cookies.
• Create a cookie library showing:
  • Tables with details about site's necessary cookies and additional cookies: cookie name, provider name and url, cookie category, purpose, expiry and type.
  • Radio inputs (allow or reject all cookies) and a button to update preferences.

Installation 🧰

$ npm i @boxfish-studio/sveltekit-cookie-manager

or yarn

$ yarn add @boxfish-studio/sveltekit-cookie-manager

How to use 📝

Show a popup

Import the CookieManager component to your Svelte page and pass the configuration with your desired settings:

<script lang="ts">
    import { CookieManager } from '@boxfish-studio/sveltekit-cookie-manager'
    import type { SKCMConfiguration } from '@boxfish-studio/sveltekit-cookie-manager'

    const configuration: SKCMConfiguration = {
        disclaimer: {
            title: 'This website uses cookies',
            body: 'By using this site, you agree with our use of cookies'
        },
        services: {
            googleAnalyticsUniversalId: 'UA-XXXXXXXX',
            googleAnalytics4Id: 'G-XXXXXXXX'
        },
        theme: {
            primary: '#14cabf',
            dark: '#131f37',
            medium: '#b0bfd9',
            light: '#fff'
        }
    }
</script>

<CookieManager {configuration} />

Show the cookie library

Import the CookieLibrary component to your svelte file and pass the configuration with your desired settings, as shown in the example below.

You can also use the library without any configuration or you can pass a theme to the configuration:

<script lang="ts">
    import { CookieLibrary } from '@boxfish-studio/sveltekit-cookie-manager'
    import type { SKCMConfiguration } from '@boxfish-studio/sveltekit-cookie-manager'

    const configuration: SKCMConfiguration = {
        theme: {
            primary: '#14cabf',
            dark: '#131f37',
            medium: '#b0bfd9',
            light: '#fff'
        }
    }
</script>

<CookieLibrary {configuration} />

Using the internal store

You can use the servicesInitialized writable to know whether the services are running or not.

import { servicesInitialized } from '@boxfish-studio/sveltekit-cookie-manager'
import { get } from 'svelte/store'

const isRunning = get(servicesInitialized)

Configuration 🪛

Custom configuration must be of type SKCMConfiguration. All available props are shown below:

type SKCMConfiguration = {
    disclaimer: {
        title?: string
        body?: string
        policyText?: string
        policyUrl?: string
        acceptButtonText?: string
        rejectButtonText?: string
    }
    services: {
        googleAnalyticsUniversalId?: string
        googleAnalytics4Id?: string
        adCookiesEnabled?: boolean
        customNecessaryCookies?: {
            name: string
            provider: string
            providerUrl: string
            purpose: string
            expiry: string
            type: string
            showDisclaimerIfMissing?: boolean
        }[]
    }
    theme: {
        primary?: string
        dark?: string
        medium?: string
        light?: string
    }
}

Disclaimer props

Services props

You must use googleAnalyticsUniversalId or googleAnalytics4Id.

Custom necessary cookies

You can configure extra cookies that will also appear in the Cookie library by specifying them in the customNecessaryCookies property. They accept the following options:

Theme props

A 4-colour palette has been predefined following a custom style guide. You may overwrite these values in your custom configuration variable.

Built with

• Sveltekit.
• Typescript.

Release Package

npm run package && cd package && npm publish --access=public

License

Apache 2.0 © Boxfish Studio

Made with :heart: by Boxfish Studio.