weble / laravel-cookiebar
Laravel Cookies Consent Management for the new EU Cookie LAW
Installs: 1 652
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 1
Requires
- php: ^8.0
- illuminate/cookie: ^8.0|^9.0|^10.0|^11.0
- illuminate/support: ^8.0|^9.0|^10.0|^11.0
- illuminate/view: ^8.0|^9.0|^10.0|^11.0
- spatie/laravel-googletagmanager: ^2.6
- spatie/laravel-package-tools: ^1.9
Requires (Dev)
- fakerphp/faker: ^1.9
- orchestra/testbench: ^6.0|^7.0|^8.0|^9.0
README
Laravel package for the new EU Cookie LAW. Provides a nice toolbar with a modal to select which consent
Installation
composer require weble/laravel-cookiebar
Publish Assets
Copy the assets required to run the laravel cookiebar into your project. This includes the javascript file, the language files and the views.
Publish All
php artisan vendor:publish --provider="Weble\Cookiebar\CookiebarServiceProvider"
Publish Only Views
php artisan vendor:publish --tag=cookiebar-views
Publish Only Assets
php artisan vendor:publish --tag=cookiebar-assets
Publish Only Translations
php artisan vendor:publish --tag=cookiebar-translations
Config - Optional
You can also optionally publish the configuration file.
php artisan vendor:publish --provider="Weble\Cookiebar\CookiebarServiceProvider" --tag="cookiebar-config"
Also, remember to follow the installation instructions for Spatie GoogleTagManager, which is included in this package and required to correctly use the cookeibar.
Usage
Once you've correctly Setup Spatie GoogleTagManager, be sure to set the option in the cookiebar configuration file to fit your needs.
Most of all, remember to enable the cookiebar and set the consents you need.
Include cookiebar::index
in your layout according to your needs, usually before closing the body tag;
Include cookiebar::default-consents
before googletagmanager::head
;
Reopening the consent modal.
You can reopen the consent modal by calling
window.gtmCookieBar.editConsents()
Usually this is done in a link / button in the footer of your website.
Customizations
By default the cookiebar is styled using Tailwind CSS.
Add this configuration to your tailwing.config.js
file to set the colors
cookiebar: { banner: { 'primary': '', // bg - button 'secondary': '', // text - buttont }, modal: { 'drop': '', 'primary': '', // title 'secondary': '', // text checkbox: { 'primary': '', // checked - border color 'secondary': '', // unchecked color }, button: { save: { 'primary': '', // button bg color 'secondary': '', // button text color 'hover': '', // button hover color }, cancel: { 'secondary': '', // button text color } } },
Add this configuration to your tailwing.config.js
file to set the checkbox icon
... backgroundImage: theme => ({ ... 'cookiebar-modal-checkbox-icon': 'url("data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'%3e%3cpath fill=\'none\' stroke=\'%23fff\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'3\' d=\'M6 10l3 3l6-6\'/%3e%3c/svg%3e")' ... }), ...
You can publish the views, assets and translations, and then edit the files in resources/view/vendor/cookiebar/
to better suit your needs.