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
By bentzibentz