README

This package provides headless blade-components for building consents, e.g. cookie-consents. Consents are being stored in local-storage.

Installation

Install via composer:

composer require aw-studio/laravel-consent

Components

The Laravel Consent package comes with three blade components: <x-consent-wrapper>, <x-consent> and <x-consent-toggle>.

Consent Wrapper

The <x-consent-wrapper> component is used to group consents. You can style each wrapper to your liking. Every wrapper needs an unique id. Each wrapper component shows the full list of consents and a Save-Button. After saving the wrapper is hidden.

<x-consent-wrapper id="group-1" save="Save">
    <!-- consents go here -->
</x-consent-wrapper>

Consent

The <x-consent> component is used for actually giving a consent and MUST be wrapped by a <x-consent-wrapper> and neeeds a unique id. Each consent has a label and and checkbox. The label text is filled with the content of the default slot.

When giving a consent, you may want to execute a local script or load a script from a source.

If you want to load an external script after the consent the component should look as follows:

<x-consent
    id="google-maps"
    preselect
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"
    callback="initMap"
>
    I consent to use google maps.
</x-consent>

The script will be appended to the <head>.

If you want to execute a local script you can provide the code in the <x-slot name="script"> of your <x-consent>:

<x-consent id="analytics" preselect>
    I consent to use google analytics.
    <x-slot name="script">
        (function (w, d, s, l, i) { console.log('consent a') w[l] = w[l] || [];
        w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js', }); var
        f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l !=
        'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
        'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
        f.parentNode.insertBefore(j, f); })(window, document, 'script',
        'dataLayer', 'GTM-ABCDEFG');
    </x-slot>
</x-consent>

Consent Toggle

Sometimes you may want to provide a 'one-time-consent'. This can be achieved using the <x-consent-toggle> component. You may place it anywhere in your markup where a corresponding <x-consent> exists. A toggle is linked to a consent by providing the same id to the toggle. A toggle may be styled to your liking.

The following toggle will fire the callback of the google-maps consent:

<x-consent-toggle
    id="google-maps"
    class="p-4 text-xs bg-gray-100"
    button="Show Map"
    button-class="inline-block px-2 py-1 mt-2 text-xs text-white bg-green-400 rounded-md cursor-pointer"
>
    I consent to using google maps.
</x-consent-toggle>

Full example

In this example, a consent wrapper with to consents is presented:

<x-consent-wrapper
    id="google-group"
    class="fixed bottom-0 left-0 w-full p-8 bg-gray-200"
    button-class="px-2 py-1 mt-2 text-xs text-white bg-green-400 rounded-md cursor-pointer"
    save="Speichern"
>
    <x-consent
        id="google-maps"
        preselect
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"
        callback="initMap"
    >
        I consent to use google maps.
    </x-consent>
    <x-consent id="analytics" preselect>
        I consent to use google analytics.
        <x-slot name="script">
            (function (w, d, s, l, i) { console.log('consent a') w[l] = w[l] ||
            []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js',
            }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl
            = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
            'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f); })(window, document, 'script',
            'dataLayer', 'GTM-ABCDEFG');
        </x-slot>
    </x-consent>
</x-consent-wrapper>

aw-studio / laravel-consent

Maintainers

Details