The easy way to inform users that your website is using cookies.
Open Source
You’re free to copy, modify and use as commercial.
Design Your Own
Use our configurator to customize cookeBubble and export
Versatility
You can use CookieBubble as React.js component or JQuery plugin for now.
Instalation
yarn add react-cookie-bubble
or
npm i react-cookie-bubbleImporting
import CookieBubble from react-cookie-bubbleUsage
<Cookiebubble
messageTextColor="#eee"
iconVisibility={false}
...
/>Props
| name | Default | Options |
|---|---|---|
| messageText | 'We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies.' | String |
| messageTextColor | '#000000' | hex, rgb, rgba |
| messageFontSize | '18px' | px, em, rem |
| buttonText | 'Got It' | String |
| buttonColor | '#00a4ff' | hex, rgb, rgba |
| buttonFontSize | '14px' | px, em, rem |
| iconColor | '#00a4ff' | hex, rgb, rgba |
| iconVisibility | true | Bool |
| cookiePolicyButtonText | 'Read our cookie policy.' | String |
| cookiePolicyButtonUrl | 'http://allaboutcookies.org/' | Url |
| cookiePolicyButtonTarget | '_blank' | '_blank' or '_self' |
| boxPosition | 'bottom-left' | 'bottom-left', 'bottom-center', 'bottom-right', 'top-left', 'top-center', 'top-right' |
| maxAge | 30 | Number |
| boxColor | '#ffffff' | hex, rgb, rgba |
Instalation
yarn add jquery-cookie-bubble
or
npm i jquery-cookie-bubbleInclude cookieBubble.min.css somewhere in your head tag
<link href="https://unpkg.com/jquery-cookie-bubble@1.0.0/dist/cookieBubble.min.css"/>Include cookieBubble.min.js at the bottom of your body tag
<script src="https://unpkg.com/jquery-cookie-bubble@1.0.0/dist/cookieBubble.min.js"/>Usage
<script>
(function($) {
$.cookieBubble({
messageText:"My custom message",
iconVisibility:false
...
});
})(jQuery);
</script>Props
| name | Default | Options |
|---|---|---|
| messageText | 'We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies.' | String |
| messageTextColor | '#000000' | hex, rgb, rgba |
| messageFontSize | '18px' | px, em, rem |
| buttonText | 'Got It' | String |
| buttonColor | '#00a4ff' | hex, rgb, rgba |
| buttonFontSize | '14px' | px, em, rem |
| iconColor | '#00a4ff' | hex, rgb, rgba |
| iconVisibility | true | Bool |
| cookiePolicyButtonText | 'Read our cookie policy.' | String |
| cookiePolicyButtonUrl | 'http://allaboutcookies.org/' | Url |
| cookiePolicyButtonTarget | '_blank' | '_blank' or '_self' |
| boxPosition | 'bottom-left' | 'bottom-left', 'bottom-center', 'bottom-right', 'top-left', 'top-center', 'top-right' |
| maxAge | 30 | Number |
| boxColor | '#ffffff' | hex, rgb, rgba |
I drink a lot of coffees per day to make crazy things on internet.
Could you buy me a coffee?