🍪 Elektrocode Cookies Manager 🍪

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 ☀️ / 🌙
  • Image / Icon
  • Text and information
  • Button labels
  • "More Info" popup

Installation

    npm install elektrocode-cookies-manager

Usage

First step

(If your project does not use Tailwind SKIP)

For Projects that use Tailwind. You should import the library to be scanned from Tailwind. (Link from TW documentation)

module.exports = {
    content: [
        './components/**/*.{html,js}',
        './pages/**/*.{html,js}',
        './node_modules/elektrocode-cookies-manager/**/*.js'
    ],
    // ...
}

Second step

//Layout.vue

<script setup>
import CookiesManager from 'elektrocode-cookies-manager';
import 'elektrocode-cookies-manager/dist/index.css'; //for Tailwind projects remove this line
</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 ☀️ / 🌙

• ☀️ Light theme is the default. Check it out 👀 👀

• 🌙 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: