Sveltekit Cookie Manager is an easy-use Svelte package to help control the visitor's cookie consent.
Minimum required SvelteKit version: 1.0.0-next.581
.
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:
$ npm i @boxfish-studio/sveltekit-cookie-manager
or yarn
$ yarn add @boxfish-studio/sveltekit-cookie-manager
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} />
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} />
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)
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
}
}
Name | Description | Default value |
---|---|---|
title | The title of the popup | "Cookie Preferences" |
body | Body message of the popup | "By using this site, you agree with our use of cookies." |
policyText | Text that links to Privacy Policy | "Read our Cookie Policy" |
policyUrl | Privacy Policy url | "/privacy-policy" |
acceptButtonText | Text shown in 'Accept' button | "Accept Additional Cookies" |
rejectButtonText | Text shown in 'Reject' button | "Reject Additional Cookies" |
You must use googleAnalyticsUniversalId
or googleAnalytics4Id
.
Name | Description | Default value |
---|---|---|
googleAnalyticsUniversalId | Your Google Analytics Universal key | |
googleAnalytics4Id | Your Google Analytics 4 key | |
adCookiesEnabled | Whether cookies with the category Advertising should be set in the browser and shown in the library | true |
customNecessaryCookies | Cookies that should be present in the Necessary Cookies table to inform the user their usage. To configure them see below |
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:
Name | Description | Default value | Required | Example |
---|---|---|---|---|
name | Name of the cookie | Yes | Boxfish Cookie | |
provider | Name of it's provider | No | Boxfish | |
providerUrl | URL of it's provider | No | https://boxfish.studio | |
purpose | Usage of the cookie | Yes | "Stores the user's consent" | |
expiry | Time that the cookie with remain in the user's browser since it's creation | Yes | "30 days" | |
type | Type of cookie | Yes | "HTTP" | |
showDisclamerIfMissing | Show the accept/reject popup if this cookie is missing | false | No | true |
A 4-colour palette has been predefined following a custom style guide. You may overwrite these values in your custom configuration variable.
Name | Description | Default value |
---|---|---|
primary | Used in buttons backgrounds, anchors | #14cabf (teal) |
dark | Used in headings, body | #131f37 (black) |
medium | Used in table headings, table borders | #b0bfd9 (gray) |
light | Used in banner background colour, buttons text colour | #fff (white) |
npm run package && cd package && npm publish --access=public