Extra simple privacy policy solution.
Can be used as either a plugin or a vueJS library.
1. Add script to web page
<script id="galletita-js" type="module" src="https://unpkg.com/@allomambo/galletita@1.0.1/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>
- Node ^20.8.10
- VueJS ^3.3.4
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>
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 |
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 |
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 |
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
|
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 |