@allomambo/galletita
Extra simple privacy policy solution
4,509
| Install | |
|---|---|
npm install @allomambo/galletita |
|
| Latest Version: | 1.0.1 |
| Vue: | 3 |
| License: | MIT |
| Last Updated: | Jun 12, 2024 |
| Links: | npm |
Maintainer: aurelvigne
🍪 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/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>
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 |
Related Packages
vue-cookie-accept-decline
Show a banner with text, a decline button, and an accept button on your page.
120,908
146
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 1.0.1 | ^3.3.4 | MIT | |
| 1.0.0 | ^3.3.4 | MIT | |
| 0.0.4 | ^3.3.4 | MIT | |
| 0.0.3 | ^3.3.4 | MIT | |
| 0.0.1 | ^3.3.4 | MIT |