awesome-cookie-consent

Awesome Cookie Consent

A simple and responsive Cookie Consent Banner Webcomponent build with Stencil.

How to use it?

Npm

Include it in your project like this in the head of your index.html:

  <script src="https://unpkg.com/awesome-cookie-consent@0.0.3/dist/awesome-cookie-consent.js"></script>

Node Modules

• Run npm install awesome-cookie-consent --save
• Put a script tag similar to this <script src='node_modules/awesome-cookie-consent/dist/awesome-cookie-consent.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install awesome-cookie-consent --save
• Add an import to the npm packages import awesome-cookie-consent;
• Then you can use the element anywhere in your template, JSX, html etc

Usage

Add Webcomponent with your data to your html file just before the closing body tag:

  <awesome-cookie-consent
            url=""
            link=""
            headline=""
            description=""
            button=""
            fontsize=""
            buttoncolor=""
            buttonbackgroundcolor=""
            backgroundcolor=""
            textcolor=""
            headlinecolor=""
    >
    </awesome-cookie-consent>

Properties

url:

URL link to your privacy policy page

link:

Text which is shown at the privacy policy page link

headline

Headline of the banner

description

Description text of the banner

button

Text which is shown at the accept button

fontsize

Font size in pixel used for the banner ( e.g. 18px ), the fallback is 16px

buttoncolor

Hex color code used for the button text ( e.g. #000000 ), the fallback is #ffffff

buttonbackgroundcolor

Hex color code used for the button background ( e.g. #000000 ), the fallback is #e74c3c

backgroundcolor

Hex color code used for the banner background ( e.g. #000000 ), the fallback is #34495e

textcolor

Hex color code used for the banner text ( e.g. #000000 ), the fallback is #ffffff

headlinecolor

Hex color code used for the banner headline ( e.g. #000000 ), the fallback is #ffffff

License

MIT License

---

By bentzibentz