Consent manager demo

First, define the controller for the consent manager.

Controller should be defined in the header or footer or an another recurring element.

<div data-controller="easy-cm"></div>

Styling

The manager does come with 8 different templates in dark or light schema which can be set with the configuration 'template'

<div
data-controller="easy-cm"
data-easy-cm-template-value="red-dark"
></div>

This will render the manager in a dark red theme.

To find all available template refer to the Easy Consent Manager page.

Languages

The entire manager is built around the languages - as it has two main jobs:

Providing information in a specific language and toggling actions from the user.

As this consent manager is simple and free, the languages and special designs (if needed) must be provided in the language fetching process.

<div
data-controller="easy-cm"
data-easy-cm-base-language-value="es"
data-easy-cm-supported-languages-value="es/Español,en/English,de/Deutsch"
data-easy-cm-lang-fetch-link-value="/cm/languages"
></div>

The standard language is displayed in Spanish and the user can switch between Spanish, English or German.

As no changes to the fetching method are made, the request will be send via POST to the path '/cm/languages' with the parameter { lang: (selected ISO 639 code) }.

Additionally the GET parameter lang=(selected ISO 639 code) will be appended to the URL.

Visit the Consent Manager documentation page to see an example about how the response must look like.

Minimal working example

The code below creates a minimal working example with one language and one category.

IMPORTANT: The example requires a backend response for the language and content. To learn more about that refer the Consent Manager documentation page.

<div
    data-controller="easy-cm"
    data-easy-cm-categories-value="1"
    data-easy-cm-update-link-value="/cm-langs"
    data-easy-cm-lang-fetch-link-value="/cm-handle"
>
    <div
        data-controller="easy-cm-category"
    ></div>
</div>

We have defined one category with data-easy-cm-categories-value="1" and one controller data-controller="easy-cm-category" as a child controller.

data-easy-cm-categories-value and the number of category controllers should match.

data-easy-cm-update-link-value="/cm-langs" tells the manager to where send the request to.

Finally with data-easy-cm-lang-fetch-link-value="/cm-handle" we have configured where to send the submitted data to.

Adding more categories

Multiple categories can be added and configured.

<div
    data-controller="easy-cm"
    data-easy-cm-categories-value="3"
    data-easy-cm-update-link-value="/cm-langs"
    data-easy-cm-lang-fetch-link-value="/cm-handle"
>
    <div
        data-controller="easy-cm-category"
        data-easy-cm-category-category-value="Session"
    ></div>
    <div
        data-controller="easy-cm-category"
        data-easy-cm-category-category-value="Tracking"
        data-easy-cm-category-is-essential-value="false"
        data-easy-cm-category-expires-value="86400"
        data-easy-cm-category-str-values-value="key1=value1;key2=value2;"
    ></div>
    <div
        data-controller="easy-cm-category"
        data-easy-cm-category-category-value="Analytics"
        data-easy-cm-category-is-essential-value="false"
        data-easy-cm-category-expires-value="86400"
    ></div>
</div>

Don't forget to provide the content for every category and language.