:cookie: Elektrocode Cookies Manager :cookie:

This manager is developed to act as an informational banner only. It does not have any functionality to reject cookies. Once accepted it creates cookie that is being checked and if it exists cookiesManager is not shown again.

You can open our website to check it out!

• Installation
• Usage
• Customizations
  • CookiesManager's cookie name
  • Theme :sunny: / :crescent_moon:
  • Image / Icon
  • Text and information
  • Button labels
  • "More Info" popup

Installation

    npm install elektrocode-cookies-manager

Usage

//Layout.vue

<script setup>
import CookiesManager from 'elektrocode-cookies-manager';
import 'elektrocode-cookies-manager/dist/index.css';
</script>

<template>
    <slot/>
    <CookiesManager/>
</template>

Customizations

CookiesManager's cookie name

By default, the cookie is called elektrocode_cookies_popup. To change that use cookieName prop.

<CookiesManager cookieName="my_new_cookie_name"/>

Theme :sunny: / :crescent_moon:

• :sunny: Light theme is the default. Check it out :eyes: :eyes:

| | | |:-----------------------------:|:---------------------------------------------------:|

• :crescent_moon: Dark theme
  • use the dark prop to activate

<CookiesManager dark/>

| | | |:---------------------------:|:-------------------------------------------------:|

Image / Icon

By default, CookiesManager popup comes without image or icon. You can set one with the image prop.

<!-- you can use saved image -->
<CookiesManager :image="CookieSvg"/>

<!-- or you can use url -->
<CookiesManager image="{image url}"/>

Text and information

CookiesManager comes with default title and description of the popup, but you can change it anytime using title and description props. They accept strings as values.

Button labels

If button labels are not to your taste you can easily change that.

| prop name | default value | |:------------------------------|:-------------:| | acceptCookieButtonLabel | Accept | | moreInfoButtonLabel | More info | | closeMoreInfoPopupButtonLabel | Close |

"More Info" popup

"More Info" popup is designed to provide additional information and explanation of the cookies that are being used in the website. This information needs to be provided by you in the cookiesInfo prop. If not, cookiesManager will not show the More info button.

cookiesInfo prop accepts array of object. Each object is separate section inside the "More info" popup and should have this build:

   {
        name: '...',
        description: '...',
        cookies: [
            {
                key: 'XSRF-TOKEN',
                description: '...'
            },
            {
                ...
            },
            ...
        ]
    }

Preview:

| | | |-------------------------------------------|-----------------------------------------|