Verstile Cookie Bar

Build library

yarn install
yarn build:lib

Standalone

please note that library uses page default font

<link rel="stylesheet" href="./cookieconsent.css">
<script src="./cookieconsent.umd.min.js"></script>

cookieconsent.default({
  content: {
    header: 'CookieConsent.header',
    message: 'CookieConsent.message',
  },
  services: [{
    key: 'required',
    required: true,
    label: 'CookieConsent.required',
    items: [{
      label: 'Cookie Consent',
      description: 'CookieConsent.servicesDescription.cookieconsent'
    },{
      label: 'Sentry',
      description: 'CookieConsent.servicesDescription.sentry'
    }],
  }, {
    key: 'analytics',
    label: 'CookieConsent.analytics',
    items: [{
      label: 'Google Analytics',
      description: 'CookieConsent.servicesDescription.googleAnalytics'
    },{
      label: 'YouTube',
      description: 'CookieConsent.servicesDescription.youtube'
    }],
  }],
  locale: 'de',
  locales: {
    en: {
      img: '/img/en.svg',
      Lang: {
        en: 'English',
        de: 'German',
      },
      CookieConsent: {
        header: 'We value your privacy.',
        message: 'This website uses cookies to ensure you get the best possible experience on our website. Intergrated third-party services may consolidate this information with further data. Cookies may contain personal data unless explicitly specified otherwise. By clicking "Select all and close", you agree to the use of these cookies and save your settings for the specified storage period. Alternatively, you can select which specific cookies you\'d like to enable and save your settings by clicking "confirm selection". You can find further information as well as the possibility of regulatory objections in our <a href="=/privacy-policy/">Privacy Policy</a>.',
        dismiss: 'Got it!',
        allow: 'Allow cookies',
        deny: 'Decline',
        link: 'Learn more',
        policy: 'Cookie Policy',
        acceptSelection: 'Confirm selection',
        acceptAll: 'Select all and close',
        analytics: 'Analytics (stored for 2 years)',
        required: 'Required (stored indefinitely)',
        services: 'Services',
        servicesDescription: {
          cookieconsent: 'Stores the user’s cookie consent state for the current domain (no personal data)',
          sentry: 'Provided by sentry.io for error reporting',
          googleAnalytics: 'General usage statistics',
          youtube: 'Usage statistics when viewing embedded videos'
        }
      },
    },
    de: {
      img: '/img/de.svg',
      Lang: {
        en: 'English',
        de: 'German',
      },
      CookieConsent: {
        header: 'Wir respektieren Ihre Privatsphäre',
        message: 'Diese Website verwendet Cookies, um Ihnen die bestmögliche Erfahrung zu gewährleisten. Integrierte Drittanbieter können diese Informationen mit weiteren Daten zusammenführen. Sofern nicht anders angegeben, enthalten die Cookies personenbezogene Daten. Durch Klicken auf "Alle wählen und schließen" erklären Sie sich mit der Verwendung dieser Cookies einverstanden und speichern Ihre Einstellungen. Alternativ können Sie auswählen, welche spezifischen Cookies Sie zulassen möchten und Ihre Einstellungen durch Klicken auf "Auswahl bestätigen" speichern. Weitere Informationen sowie die Widerspruchsmöglichkeit finden Sie in unseren <a href="/datenschutzerklaerung/">Datenschutzhinweisen</a>.',
        dismiss: 'Verstanden!',
        allow: 'Cookies zulassen',
        deny: 'Ablehnen',
        link: 'Erfahren Sie mehr',
        policy: 'Cookie-Richtlinie',
        acceptSelection: 'Auswahl bestätigen',
        acceptAll: 'Alle wählen und schließen',
        analytics: 'Analytics (2 Jahre Speicherdauer)',
        required: 'Notwendig (unbegrenzte Speicherdauer)',
        services: 'Dienste',
        servicesDescription: {
          cookieconsent: 'Speichert die Einwilligung des Nutzers zu Cookies für diese Webseite (keine personenbezogenen Daten)',
          sentry: 'Bereitgestellt von sentry.io zur Fehleranalyse',
          googleAnalytics: 'Speichert allgemeine Nutzungsstatistiken',
          youtube: 'Speichert Nutzungsstatistiken beim Ansehen von eingebetteten Videos'
        }
      },
    }
  },

  onchange: function (value) {
    if (value.indexOf('analytics')) {
      // enable GA
    } 
  }
})

Component

<template>
  <cookie-notification
      :content="$root.content"
      :services="$root.services"
      @change="$root.onchange"
  >
    <template slot="header-right-block">
      <short-lang-picker class="form-control" @change="changeLocale"/>
    </template>
  </cookie-notification>
</template>

<script>
import CookieNotification from './src/CookieNotification';
import ShortLangPicker from './src/ShortLangPicker';

export default {
  name: 'App',
  components: {
    CookieNotification,
    ShortLangPicker,
  },
  methods:{
    changeLocale(locale) {
      this.$i18n.locale = locale;
    }
  }
}
</script>

<style scoped type="text/css">
.form-control {
  display: block;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
</style>