🍪 Galletita

Extra simple privacy policy solution.
Can be used as either a plugin or a vueJS library.

Installation

Plugin version

1. Add script to web page

<script id="galletita-js" type="module" src="https://unpkg.com/@allomambo/[email protected]/dist/index.js"></script>

2. Define your configuration

<script>
const galletita = {
    cookie_name: "privacy_policy_consent",
    text_content: {
        title: "...",
        description: "...",
        consent_button_label: "...",
        reject_button_label: "...",
        learn_more_button_label: "...",
    },
    privacy_policy_url: "https://...",
};
</script>

<script>
# Multilingual
const galletita = {
    cookie_name: "privacy_policy_consent",
    fr: {
        text_content: {
            title: "...",
            description: "...",
            consent_button_label: "...",
            reject_button_label: "...",
            learn_more_button_label: "...",
        },
        privacy_policy_url: "https://...",
    },
    en: {
        text_content: {
            title: "...",
            description: "...",
            consent_button_label: "...",
            reject_button_label: "...",
            learn_more_button_label: "...",
        },
        privacy_policy_url: "https://...",
    },
};
</script>

VueJS library version

Requirements

• Node ^20.8.10
• VueJS ^3.3.4

Installation

1. Install the package

# With Yarn:
yarn add @allomambo/galletita

# With npm:
npm install @allomambo/galletita

2. Use the component in your project

<template>
    <galletita :cookie-name="..." :text-content="{...}" :privacy-policy-url="..." />
</template>

<script setup>
import { Galletita } from "@allomambo/galletita";
</script>

Props

| Property | Type | Description | Default Value | | -------------------- | ----------------------- | -------------------------------------------------------------------------------- | ---------------------------------- | | cookie_name | string | The name of the cookie. | galletita_privacy_policy_consent | | text_content | GalletitaTranslations | Contains the textual elements | See table below | | privacy_policy_url | string | The complete URL of the privacy policy. Ex. "https://example.com/privacy-policy" | null |

text_content

| Sub-properties | Type | Description | Default Value (English EN) | Default Value (Français FR) | | ----------------------- | -------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | title | string | The title of the privacy policy. | We value your privacy | Nous respectons votre vie privée | | description | string | The description of the privacy policy. | <p>We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic.</p><p>By clicking "Accept", you consent to our use of cookies.</p> | <p>Nous utilisons des cookies pour améliorer votre expérience de navigation, diffuser des publicités ou des contenus personnalisés et analyser notre trafic.</p><p>En cliquant sur « Accepter », vous consentez à notre utilisation des cookies.</p> | | consent_button_label | string | The label of the consent button. | Accept | Accepter | | reject_button_label | string | The label of the reject button. | Reject | Refuser | | learn_more_button_label | string | The button label to learn more about the privacy policy. | Learn more | En savoir plus |

Slots

| Name | Description | | ----------------- | --------------------------------------------- | | default | Wrap the entirety of .galletita-box | | copy | The text content (title and description) | | copyTitle | The title | | copyDescription | The description | | actions | The buttons to consent, reject and learn more | | actionConsent | The consent button | | actionReject | The reject button | | actionLearnMore | The "learn more" button |

Exposed data on every slots

| Name | Type | Description | | -------------------- | ----------------------- | -------------------------------------------------------------------------------------- | | isGalletitaVisible | boolean | If modal is visible of not | | cookieName | string | The name of the cookie | | textContent | GalletitaTranslations | The complete object containing the text content (title, description and button labels) | | privacyPolicyUrl | string | The privacy policy url | | openGalletita | function | Open modal | | closeGalletita | function | Close modal | | consent | function | Add cookie with positive consent and trigger closeGalletita | | reject | function | Add cookie with negative consent and trigger closeGalletita |

Emits

| Name | Description | | ------------------- | ------------------------------ | | galletita:open | When modal is opened | | galletita:close | When modal is closed | | galletita:consent | When consent button is clicked | | galletita:reject | When reject button is clicked |