# Welcome to Admeet

Welcome to our Admeet developer documentation. This space holds all information you or your web developer might need for the integration of your Admeet products on your website.&#x20;

We offer integration option tailored to several platforms:&#x20;

* Standard integration
* WordPress plugin&#x20;
* Shopify integration
* Google Tag Manager (for our cookie banner)&#x20;

If you have any questions, or any information seems to be missing, don't hesitate to contact us directly via <support@admeet.eu> or via our [website](https://www.admeet.eu/).&#x20;


# Standard integration

In the standard integration process, the Admeet code will be inserted directly into your website code. As these steps tend to be technical, we advice you to follow them in cooperation with your website developer. They will be able to assure everything is implemented correctly.&#x20;

On the following pages you will see how you can integrate the individual aspects of your policies.&#x20;


# Privacy policy (iFrame)

The integration of our iFrames can be done in a quick few steps. Before starting these steps, please make that following conditions are met however:&#x20;

* Your privacy policy has been published and is accessible via the "How to integrate my privacy policy and my banner?" button on your policy dashboard.&#x20;
* The website page where you want to integrate the policy should allow iFrames.&#x20;

## Step 1: Copying the iFrame code

You can copy the iFrame code directly from the integration page. To do so, simply go the integration page via your dashboard.&#x20;

![](https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2Fnecgs3CUKAweYfciLCDE%2FIntegration%20page%20link.png?alt=media\&token=05d3c105-ee91-4279-a5d7-da7dca2cbccd)

Once you are on the integration page, you can choose which iFrame you would like to install. The different languages indicate the default language of the document, however it is always possible to switch languages in the document itself.&#x20;

{% hint style="info" %}
&#x20;You can easily copy the full code by clicking the "Copy" button at the end of the code block.&#x20;
{% endhint %}

<figure><img src="https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2FOG5Hag3AHfeV1F7EJ5de%2FPP%20iFrame%20integration.png?alt=media&amp;token=15bf1827-8136-4d49-9872-386606bf6d1f" alt=""><figcaption></figcaption></figure>

## Step 2: Adding the code to your website

Once the code has been copied, you can add it directly to the relevant page of your website. It is as simple as pasting the code wherever you want it.&#x20;

If you have a website with multiple languages, you can copy the different codes on their specific page. This will assure the default language shown is the same as the language of the website.&#x20;

<figure><img src="https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2F2NSEYGF8V63lU3BfHBbd%2FWebsite%20integration.png?alt=media&amp;token=fcb07a9c-c489-443a-91fc-11cf49a95046" alt=""><figcaption></figcaption></figure>

## Step 3: Adapting the default size

If you wish to change the default size of the document, you can do so by adding width and height attributes in the code. An example below:&#x20;

```
// <iframe src="https://yourdomain.admeet.eu/reader/products/html/en/7335231f-0c27-4513-a74f-891d5a349610" width='100%' height='1200px'></iframe>
```

{% hint style="info" %}
Regardless of your chosen width and height, our policy will always adapt to be mobile responsive. The adapted size should be considered as the maximum values.&#x20;
{% endhint %}

## Step 4: Updating your policy

Whenever you create a new version of the policy in your Admeet application, your policy will update automatically on your website. This means that other than publishing the new version in the Admeet application no work needs to be done.&#x20;

This way your policy is always up-to-date on your website, without having to adapt any code or text on your website.

Done with your privacy policy? Good news, our cookie policy installation follows the exact same strucure. Easy right?&#x20;


# Cookie policy (iFrame)

The integration of our iFrames can be done in a quick few steps. Before starting these steps, please make that following conditions are met however:&#x20;

* Your cookie policy has been published and is accessible via the "How to integrate my cookie policy and my banner?" button on your policy dashboard.&#x20;
* The website page where you want to integrate the policy should allow iFrames.&#x20;

## Step 1: Copying the iFrame code

You can copy the iFrame code directly from the integration page. To do so, simply go the integration page via your dashboard.&#x20;

<img src="https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2Fnecgs3CUKAweYfciLCDE%2FIntegration%20page%20link.png?alt=media&amp;token=05d3c105-ee91-4279-a5d7-da7dca2cbccd" alt="" data-size="original">

Once you are on the integration page, you can choose which iFrame you would like to install. The different languages indicate the default language of the document, however it is always possible to switch languages in the document itself.&#x20;

{% hint style="info" %}
You can easily copy the full code by clicking the "Copy" button at the end of the code block.&#x20;
{% endhint %}

<figure><img src="https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2Fnzy5UqEy4APVJ5QkYYDZ%2FCP%20iFrame%20integration.png?alt=media&amp;token=ff50836b-d10d-4e33-9f36-85f6d3128b4f" alt=""><figcaption></figcaption></figure>

## Step 2: Adding the code to your website

Once the code has been copied, you can add it directly to the relevant page of your website. It is as simple as pasting the code wherever you want it.&#x20;

If you have a website with multiple languages, you can copy the different codes on their specific page. This will assure the default language shown is the same as the language of the website.&#x20;

<figure><img src="https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2FPIfWGXP7iTXG2FEeubS4%2FCP%20Website%20integration.png?alt=media&amp;token=8674b101-9c3f-40f8-874d-c71c2f189e60" alt=""><figcaption></figcaption></figure>

## Step 3: Adapting the default size

If you wish to change the default size of the document, you can do so by adding width and height attributes in the code. An example below:&#x20;

```
// <iframe src="https://yourdomain.admeet.eu/reader/products/html/en/7335231f-0c27-4513-a74f-891d5a349610" width='100%' height='1200px'></iframe>
```

{% hint style="info" %}
Regardless of your chosen width and height, our policy will always adapt to be mobile responsive. The adapted size should be considered as the maximum values.&#x20;
{% endhint %}

## Step 4: Updating your policy

Whenever you create a new version of the policy in your Admeet application, your policy will update automatically on your website. This means that other than publishing the new version in the Admeet application no work needs to be done.&#x20;

This way your policy is always up-to-date on your website, without having to adapt any code or text on your website.

Done with your cookie policy? Perfect, that means only your cookie banner is left to do. We're almost there!


# Cookie banner

The integration of the  cookie banner is quite a bit more technical than the iFrames, and the work required will be impacted by the number of cookie scripts used. However if you follow the steps below, installing the banner should be no problem.&#x20;

Before starting these steps, please make that following conditions are met however:&#x20;

* Your cookie policy has been published and is accessible via the "How to integrate my cookie policy and my banner?" button on your policy dashboard.&#x20;
* You know which are the scripts used to install cookies on your website, and you are able to make slight modifications to them.&#x20;

## Step 1: Copying the banner code

You can copy the banner code directly from the integration page. To do so, simply go the integration page via your dashboard.&#x20;

![](https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2Fnecgs3CUKAweYfciLCDE%2FIntegration%20page%20link.png?alt=media\&token=05d3c105-ee91-4279-a5d7-da7dca2cbccd)

Once you are on the integration page, scroll down to the banner section. ![](https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2FpPpGKGOlimlk3rGsDIaf%2FCP%20Banner%20integration.png?alt=media\&token=26c0df08-460c-4578-9259-111533c3d611)

{% hint style="info" %}
You can easily copy the full code by clicking the "Copy" button at the end of the code block.&#x20;
{% endhint %}

## Step 2: Adding the code to your website

Once the code has been copied, it is important that it is added to every page of your website. This is usually done via the header or footer of the website.&#x20;

The banner will automatically adapt to the language of the website, based on the language settings of the website. It is therefor important to properly set up the languages of your website.&#x20;

If for any reason the banner won't automatically adapt, or you would like to manually override the language, you can add the following attribute to the banner code:&#x20;

```
data-admeet-lang='fr'
where 
fr = French
en = English
nl = dutch
```

## Step 3: Adapting your cookie scripts

To allow our banner to properly identify your cookie scripts, it is important that their code gets slightly modified. This will allow our banner to block or allow a script to be run, based on the decisions made by the user.&#x20;

Once you have found the relevant cookie script(s), following changes should be made:

1. Change the attribute `type` to `text/plain`
2. Add an attribute `data-cookieconsent={scriptType }`, where `{scriptType }` should be replaced by the relevant cookie category, according to the following conventions:&#x20;
   * necessary
   * functional
   * marketing
   * statistic

## Step 4: Updating your banner

Whenever you create a new version of the banner in your Admeet application, your banner will update automatically on your website. This means that other than publishing the new version in the Admeet application no work needs to be done.&#x20;

This way your banner is always up-to-date on your website, without having to adapt any code or text on your website.

If you also add new cookies on your website as a result of your new version, please refer to step 5.&#x20;

## Step 5: Adding new cookie scripts to your website

If you decide to start using some new cookie scripts on your website, you will need to do two things:&#x20;

* Adapt the cookie script, in the same way as mentioned above in Step 3, to assure that our banner can properly identify the new script.&#x20;
* Update your cookie policy and banner in the Admeet application, as mentioned above in Step 4, to make sure your website is always up to date.&#x20;

Done with your cookie banner? Good news, you just finished the most challenging part!&#x20;


# Shopify integration

The Shopify integration process is very similar to our standard integration process. However there are some specific steps to be taken on the Shopify platform. As some of these steps tend to still be somewhat technical, we advice you to follow them in cooperation with your website developer. They will be able to assure everything is implemented correctly.&#x20;

On the following pages you will see how you can integrate the individual aspects of your policies.&#x20;


# Privacy policy (iFrame)

The integration of our iFrames can be done in a quick few steps. Before starting these steps, please make that following conditions are met however:&#x20;

* Your privacy policy has been published and is accessible via the "How to integrate my privacy policy and my banner?" button on your policy dashboard.&#x20;
* The website page where you want to integrate the policy should allow iFrames.&#x20;

## Step 1: Copying the iFrame code

You can copy the iFrame code directly from the integration page. To do so, simply go the integration page via your dashboard.&#x20;

![](https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2Fnecgs3CUKAweYfciLCDE%2FIntegration%20page%20link.png?alt=media\&token=05d3c105-ee91-4279-a5d7-da7dca2cbccd)

Once you are on the integration page, you can choose which iFrame you would like to install. The different languages indicate the default language of the document, however it is always possible to switch languages in the document itself.&#x20;

{% hint style="info" %}
&#x20;You can easily copy the full code by clicking the "Copy" button at the end of the code block.&#x20;
{% endhint %}

<figure><img src="https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2FOG5Hag3AHfeV1F7EJ5de%2FPP%20iFrame%20integration.png?alt=media&amp;token=15bf1827-8136-4d49-9872-386606bf6d1f" alt=""><figcaption></figcaption></figure>

## Step 2: Adding the code to your website

Once the code has been copied, you can add it directly to the relevant page of your website. To properly install the iFrame, you will need to access the HTML code of your page.&#x20;

To do so, simply open the page where you would like to add the policy, and in the “Content“ block, click the HTML symbol (<>). This will open the HTML code of the page, where you can simply paste the iFrame code.&#x20;

{% hint style="info" %}
If this does not work, you might need to change the theme template to “Default page“. If for some reason this is not possible, you can add the iFrame code directly to the page code via the “Themes“ module.&#x20;
{% endhint %}

If you have a website with multiple languages, you can copy the different codes on their specific page. This will assure the default language shown is the same as the language of the website.&#x20;

<figure><img src="https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2FfvqUoJzmZsee97lq7zGe%2FShopify%20iFrame%20integration.png?alt=media&amp;token=7c6d9393-9f42-4253-b91b-d50d23930b0b" alt=""><figcaption></figcaption></figure>

## Step 3: Adapting the default size

If you wish to change the default size of the document, you can do so by adding width and height attributes in the code. An example below:&#x20;

```
// <iframe src="https://yourdomain.admeet.eu/reader/products/html/en/7335231f-0c27-4513-a74f-891d5a349610" width='100%' height='1200px'></iframe>
```

{% hint style="info" %}
Regardless of your chosen width and height, our policy will always adapt to be mobile responsive. The adapted size should be considered as the maximum values.&#x20;
{% endhint %}

## Step 4: Updating your policy

Whenever you create a new version of the policy in your Admeet application, your policy will update automatically on your website. This means that other than publishing the new version in the Admeet application no work needs to be done.&#x20;

This way your policy is always up-to-date on your website, without having to adapt any code or text on your website.

Done with your privacy policy? Good news, our cookie policy installation follows the exact same strucure. Easy right?&#x20;


# Cookie policy (iFrame)

The integration of our iFrames can be done in a quick few steps. Before starting these steps, please make that following conditions are met however:&#x20;

* Your cookie policy has been published and is accessible via the "How to integrate my cookie policy and my banner?" button on your policy dashboard.&#x20;
* The website page where you want to integrate the policy should allow iFrames.&#x20;

## Step 1: Copying the iFrame code

You can copy the iFrame code directly from the integration page. To do so, simply go the integration page via your dashboard.&#x20;

<img src="https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2Fnecgs3CUKAweYfciLCDE%2FIntegration%20page%20link.png?alt=media&amp;token=05d3c105-ee91-4279-a5d7-da7dca2cbccd" alt="" data-size="original">

Once you are on the integration page, you can choose which iFrame you would like to install. The different languages indicate the default language of the document, however it is always possible to switch languages in the document itself.&#x20;

{% hint style="info" %}
You can easily copy the full code by clicking the "Copy" button at the end of the code block.&#x20;
{% endhint %}

<figure><img src="https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2Fnzy5UqEy4APVJ5QkYYDZ%2FCP%20iFrame%20integration.png?alt=media&amp;token=ff50836b-d10d-4e33-9f36-85f6d3128b4f" alt=""><figcaption></figcaption></figure>

## Step 2: Adding the code to your website

Once the code has been copied, you can add it directly to the relevant page of your website. To properly install the iFrame, you will need to access the HTML code of your page.&#x20;

To do so, simply open the page where you would like to add the policy, and in the “Content“ block, click the HTML symbol (<>). This will open the HTML code of the page, where you can simply paste the iFrame code.&#x20;

{% hint style="info" %}
If this does not work, you might need to change the theme template to “Default page“. If for some reason this is not possible, you can add the iFrame code directly to the page code via the “Themes“ module.&#x20;
{% endhint %}

If you have a website with multiple languages, you can copy the different codes on their specific page. This will assure the default language shown is the same as the language of the website.&#x20;

<figure><img src="https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2FfvqUoJzmZsee97lq7zGe%2FShopify%20iFrame%20integration.png?alt=media&amp;token=7c6d9393-9f42-4253-b91b-d50d23930b0b" alt=""><figcaption></figcaption></figure>

## Step 3: Adapting the default size

If you wish to change the default size of the document, you can do so by adding width and height attributes in the code. An example below:&#x20;

```
// <iframe src="https://yourdomain.admeet.eu/reader/products/html/en/7335231f-0c27-4513-a74f-891d5a349610" width='100%' height='1200px'></iframe>
```

{% hint style="info" %}
Regardless of your chosen width and height, our policy will always adapt to be mobile responsive. The adapted size should be considered as the maximum values.&#x20;
{% endhint %}

## Step 4: Updating your policy

Whenever you create a new version of the policy in your Admeet application, your policy will update automatically on your website. This means that other than publishing the new version in the Admeet application no work needs to be done.&#x20;

This way your policy is always up-to-date on your website, without having to adapt any code or text on your website.

Done with your cookie policy? Perfect, that means only your cookie banner is left to do. We're almost there!


# Cookie banner

The integration of the  cookie banner is quite a bit more technical than the iFrames, and the work required will be impacted by the number of cookie scripts used. However if you follow the steps below, installing the banner should be no problem.&#x20;

Before starting these steps, please make that following conditions are met however:&#x20;

* Your cookie policy has been published and is accessible via the "How to integrate my cookie policy and my banner?" button on your policy dashboard.&#x20;
* You know which are the scripts used to install cookies on your website, and you are able to make slight modifications to them.&#x20;

## Step 1: Copying the banner code

You can copy the banner code directly from the integration page. To do so, simply go the integration page via your dashboard.&#x20;

![](https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2Fnecgs3CUKAweYfciLCDE%2FIntegration%20page%20link.png?alt=media\&token=05d3c105-ee91-4279-a5d7-da7dca2cbccd)

Once you are on the integration page, scroll down to the banner section. ![](https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2FpPpGKGOlimlk3rGsDIaf%2FCP%20Banner%20integration.png?alt=media\&token=26c0df08-460c-4578-9259-111533c3d611)

{% hint style="info" %}
You can easily copy the full code by clicking the "Copy" button at the end of the code block.&#x20;
{% endhint %}

## Step 2: Adding the code to your website

Once the code has been copied, it is important that it is added to every page of your website. On your Shopify website you can do this by simply adding it to your the head of your website.&#x20;

To do this, go to your online store settings, and choose “Themes“. Go to your active theme and click the three dots next to “Customize“. In the dropdown menu, select “Edit code“.&#x20;

![](https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2FtRdjo20dr04w8T3Vhiy4%2FShopify%20banner%201.png?alt=media\&token=f5e96926-4290-4d07-a3e2-526140cbc3b9)

Once you are in the code editor, select the file “Theme.liquid“. This file contains the head for your website, in which you should paste the banner code. Once you have pasted the code, simply click “Save“ in top right corner.&#x20;

![](https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2F4a2qL0UlcWnDpe3ABnol%2FShopify%20banner%202.png?alt=media\&token=60afb89e-3caf-41e2-8309-ae643736f509)

The banner should automatically adapt to the language of the website, based on the language settings of the website. It is therefor important to properly set up the languages of your website.&#x20;

If for any reason the banner won't automatically adapt, or you would like to manually override the language, you can add the following attribute to the banner code:&#x20;

```
data-admeet-lang='fr'
where 
fr = French
en = English
nl = dutch
```

## Step 3: Adapting your cookie scripts

To allow our banner to properly identify your cookie scripts, it is important that their code gets slightly modified. This will allow our banner to block or allow a script to be run, based on the decisions made by the user.&#x20;

Once you have found the relevant cookie script(s), following changes should be made:

1. Change the attribute `type` to `text/plain`
2. Add an attribute `data-cookieconsent={scriptType }`, where `{scriptType }` should be replaced by the relevant cookie category, according to the following conventions:&#x20;
   * necessary
   * functional
   * marketing
   * statistic

## Step 4: Updating your banner

Whenever you create a new version of the banner in your Admeet application, your banner will update automatically on your website. This means that other than publishing the new version in the Admeet application no work needs to be done.&#x20;

This way your banner is always up-to-date on your website, without having to adapt any code or text on your website.

If you also add new cookies on your website as a result of your new version, please refer to step 5.&#x20;

## Step 5: Adding new cookie scripts to your website

If you decide to start using some new cookie scripts on your website, you will need to do two things:&#x20;

* Adapt the cookie script, in the same way as mentioned above in Step 3, to assure that our banner can properly identify the new script.&#x20;
* Update your cookie policy and banner in the Admeet application, as mentioned above in Step 4, to make sure your website is always up to date.&#x20;

Done with your cookie banner? Good news, you just finished the most challenging part!&#x20;


# Google Tag Manager integration

On the following pages you will see how you can integrate the individual aspects of your policies. In the Google Tag Manager (GTM) integration, the Admeet code will be inserted in your GTM container. These steps will only cover how to use your Admeet cookie banner code with GTM, it will not explain how to use GTM itself.&#x20;

Please take into account that GTM is only viable for your cookie banner code. For our iFrames (cookie policy and privacy policy), you will need to either use the standard integration or our plugin.&#x20;

{% hint style="info" %}
More information about Google Tag Manager and how to use it can be found here: <https://developers.google.com/tag-platform/tag-manager>
{% endhint %}

On the following page you will see how you can integrate the individual aspects of your policies.&#x20;


# Cookie banner (GTM)

The integration of the  cookie banner is quite a bit more technical than the iFrames, and the work required will be impacted by the number of cookie scripts used. However if you follow the steps below, installing the banner should be no problem.&#x20;

Before starting these steps, please make that following conditions are met however:&#x20;

* Your cookie policy has been published and is accessible via the "How to integrate my cookie policy and my banner?" button on your policy dashboard.&#x20;
* You know which are the scripts used to install cookies on your website, and you are able to make slight modifications to them.&#x20;
* You have a Google Tag Manager container set up for your website (ideally with all existing cookie scripts already present).&#x20;

## Step 1: Copying the banner code

You can copy the banner code directly from the integration page. To do so, simply go the integration page via your dashboard.&#x20;

![](https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2Fnecgs3CUKAweYfciLCDE%2FIntegration%20page%20link.png?alt=media\&token=05d3c105-ee91-4279-a5d7-da7dca2cbccd)

Once you are on the integration page, scroll down to the banner section. ![](https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2FpPpGKGOlimlk3rGsDIaf%2FCP%20Banner%20integration.png?alt=media\&token=26c0df08-460c-4578-9259-111533c3d611)

{% hint style="info" %}
You can easily copy the full code by clicking the "Copy" button at the end of the code block.&#x20;
{% endhint %}

## Step 2: Adding the cookie banner code to your GTM container

Log into Google Tag Manager and select the container in which you want to publish the banner.

![](https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2FH4DGnkDiOq2Tlhd8yCOG%2Fimage.png?alt=media\&token=4ef85106-7b97-4469-acdb-8975ec97238f)

In the left navigation bar, click “Tags” to manage the tags in your container, and create a new tag.&#x20;

![](https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2FRuH9KFttH6RveSmlkDvt%2Fimage.png?alt=media\&token=e54bbbe2-fb96-4cff-a9b8-bb30768aa479)![](https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2FdeiDual9jAcdjczPN6Ti%2Fimage.png?alt=media\&token=e2aff370-0fd1-424b-ab5d-bb1aaa3f228d)

In the tag creation screen, first change the name (Untitled tag) of the tag so that you can easily recognise the tag later. Then click on the “Tag configuration” box. In the tag type list, scroll down and select “Custom HTML”.

![](https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2FVlzFHl9GHeX0GH84yRpH%2Fimage.png?alt=media\&token=4d55d56e-4ef3-4a75-8fe0-b45876c6560a)![](https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2FjRoUm0iR0Qy9WzXp55Ow%2Fimage.png?alt=media\&token=c5e1d1ad-d7a9-463f-afa1-f86d2c4f4c12)

In the tag creation screen, copy the banner code into the HTML box. Once copied, check the box “Support document.write”.  Once both of these actions have been performed, click the “Triggering” box.

![](https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2FnmnrAsRWZb1Za7NK0Gfl%2Fimage.png?alt=media\&token=7f4c61df-4b40-4a6b-a905-f495bd3b32db)

In the list of triggers, select “Consent Initialization - All Pages”.

![](https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2FZ2WOhSfYVSQ6cDPbUchm%2Fimage.png?alt=media\&token=15ecde13-784b-43aa-b23e-f3c0903cac3f)

Before saving, make sure following parameters are correctly set:&#x20;

* The name of the tag has been changed to be easily recognisable
* The banner code was fully copied into the HTML box
* The box “Support document.write” has been checked
* The trigger is set to “Consent Initialization - All Pages”

If all parameters have been correctly set, you can save your tag.

![](https://749147807-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9IrZG8VBPlwfbbNHVxoh%2Fuploads%2F7yk4lo3c3icy2UOdXcuw%2Fimage.png?alt=media\&token=b4c8e495-8603-4875-a8d9-3b1055a1d194)

## Step 3: Adapting your cookie scripts

To allow our banner to properly identify your cookie scripts, it is important that their code gets slightly modified. This will allow our banner to block or allow a script to be run, based on the decisions made by the user.&#x20;

You will need to make similar changes as the standard integration, however GTM has the upside of already having bundled most of your cookie scripts.

Once you have found the relevant cookie script(s), following changes should be made:

1. Change the attribute `type` to `text/plain`
2. Add an attribute `data-cookieconsent={scriptType }`, where `{scriptType }` should be replaced by the relevant cookie category, according to the following conventions:&#x20;
   * necessary
   * functional
   * marketing
   * statistic

{% hint style="info" %}
For any cookie script that is not handled via GTM, please refer to our standard integration guide.&#x20;
{% endhint %}

## Step 4: Updating your banner

Whenever you create a new version of the banner in your Admeet application, your banner will update automatically on your website. This means that other than publishing the new version in the Admeet application no work needs to be done.&#x20;

This way your banner is always up-to-date on your website, without having to adapt any code or text on your website.

If you also add new cookies on your website as a result of your new version, please refer to step 5.&#x20;

## Step 5: Adding new cookie scripts to your website

If you decide to start using some new cookie scripts on your website, you will need to do two things:&#x20;

* Adapt the cookie script, in the same way as mentioned above in Step 3, to assure that our banner can properly identify the new script.&#x20;
* Update your cookie policy and banner in the Admeet application, as mentioned above in Step 4, to make sure your website is always up to date.&#x20;

Done with your cookie banner? Good news, you just finished the most challenging part!&#x20;


# Bienvenue chez Admeet

Bienvenue dans notre documentation Admeet pour les développeurs. Cet espace contient toutes les informations dont vous ou votre développeur web pourriez avoir besoin pour l'intégration de vos produits Admeet sur votre site web.&#x20;

Nous proposons des options d’intégration adaptées aux différentes plateformes :

* Intégration standard&#x20;
* Plugin WordPress
* Intégration Shopify
* Google Tag Manager (pour la bannière de cookies)&#x20;

Si vous avez des questions, ou si une information semble manquer, n'hésitez pas à nous contacter directement sur <support@admeet.eu>. ou via notre [site web](https://www.admeet.eu/).


# Intégration standard

Dans le processus d'intégration standard, le code Admeet sera inséré directement dans le code de votre site web. Comme ces étapes sont plutôt techniques, nous vous conseillons de les suivre en collaboration avec le développeur de votre site Web. Il sera en mesure de s'assurer que tout est mis en œuvre correctement.&#x20;

Dans les pages suivantes, vous verrez comment intégrer les différents aspects de vos politiques.


# Politique de vie privée (iFrame)

L'intégration de nos iFrames peut se faire en quelques étapes rapides. Avant de commencer ces étapes, veuillez toutefois vous assurer que les conditions suivantes sont remplies :

* Votre politique de confidentialité a été publiée et est accessible via le bouton "Comment intégrer ma politique de confidentialité et ma bannière ?" sur votre tableau de bord des politiques.&#x20;
* La page du site web sur laquelle vous souhaitez intégrer la politique doit autoriser les iFrames.

## Étape 1 : Copier le code iFrame

Vous pouvez copier le code iFrame directement à partir de la page d'intégration. Pour ce faire, il suffit d'aller sur la page d'intégration via votre tableau de bord.

![](https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2FIiEMi7uOYHhcM6ooJh1o%2F\(FR\)%20Integration%20page%20link.png?alt=media\&token=68d4a286-ef1b-4402-a0b1-475f048b4c82)

Une fois sur la page d'intégration, vous pouvez choisir l'iFrame que vous souhaitez installer. Les différentes langues indiquent la langue par défaut du document, mais il est toujours possible de changer de langue dans le document lui-même.

{% hint style="info" %}
Vous pouvez facilement copier le code complet en cliquant sur le bouton "Copier" à la fin du bloc de code.
{% endhint %}

![](https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2FBmOEDbiR6HWwGkpqoFBr%2F\(FR\)%20PP%20iFrame%20integration.png?alt=media\&token=a73166d3-b2d4-4c52-95a0-3adccb85e824)

## Étape 2 : Ajouter le code à votre site Web

Une fois le code copié, vous pouvez l'ajouter directement à la page concernée de votre site web. Il suffit de coller le code là où vous le souhaitez.&#x20;

Si votre site Web comporte plusieurs langues, vous pouvez copier les différents codes sur leur page spécifique. Ainsi, la langue par défaut affichée sera la même que la langue du site Web.&#x20;

![](https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2FcpXgLQFN81Zx5fPFbsUK%2F\(FR\)%20PP%20Website%20integration.png?alt=media\&token=7a0435ce-804f-43ec-bc45-7cc17f7abae3)

## Étape 3 : Adaptation de la taille par défaut

Si vous souhaitez modifier la taille par défaut du document, vous pouvez le faire en ajoutant les attributs width et height dans le code. Un exemple ci-dessous :

```
// <iframe src="https://yourdomain.admeet.eu/reader/products/html/en/7335231f-0c27-4513-a74f-891d5a349610" width='100%' height='1200px'></iframe>
```

{% hint style="info" %}
Indépendamment de la largeur et de la hauteur que vous avez choisies, notre politique s'adaptera toujours de manière mobile responsive. La taille adaptée doit être considérée comme une valeur maximale.
{% endhint %}

## Étape 4 : Mise à jour de votre politique

Chaque fois que vous créez et validez une nouvelle version de la politique dans votre application Admeet, votre politique sera automatiquement mise à jour sur votre site Web. Cela signifie qu'à part la publication de la nouvelle version dans l'application Admeet, vous n'avez rien à faire.&#x20;

De cette façon, votre politique est toujours à jour sur votre site Web, sans avoir à adapter le code ou le texte de votre site.&#x20;

Vous avez terminé votre politique de confidentialité ? Bonne nouvelle, l'installation de notre politique de cookies suit exactement la même structure. Facile, non ?


# Politique de cookies (iFrame)

L'intégration de nos iFrames peut se faire en quelques étapes rapides. Avant de commencer ces étapes, veuillez toutefois vous assurer que les conditions suivantes sont remplies :

* Votre politique de cookies a été publiée et est accessible via le bouton "Comment intégrer ma politique de cookies et ma bannière ?" sur votre tableau de bord des politiques.&#x20;
* La page du site web sur laquelle vous souhaitez intégrer la politique doit autoriser les iFrames.

## Étape 1 : Copier le code iFrame

Vous pouvez copier le code iFrame directement à partir de la page d'intégration. Pour ce faire, il suffit d'aller sur la page d'intégration via votre tableau de bord.

![](https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2FX0TlCaMJQUs8qqgmAgnf%2F\(FR\)%20Integration%20page%20link.png?alt=media\&token=1e30b4fa-eb92-43dd-950c-38c910c11d58)

Une fois sur la page d'intégration, vous pouvez choisir l'iFrame que vous souhaitez installer. Les différentes langues indiquent la langue par défaut du document, mais il est toujours possible de changer de langue dans le document lui-même.

{% hint style="info" %}
Vous pouvez facilement copier le code complet en cliquant sur le bouton "Copier" à la fin du bloc de code.
{% endhint %}

![](https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2FnQjCmGwon2IJZrc5oVCh%2F\(FR\)%20CP%20iFrame%20integration.png?alt=media\&token=1364677b-6b52-4d4c-9e52-bd1948531805)

## Étape 2 : ajout du code à votre site Web

Une fois le code copié, vous pouvez l'ajouter directement à la page concernée de votre site Web. Il suffit de coller le code là où vous le souhaitez.&#x20;

Si votre site Web comporte plusieurs langues, vous pouvez copier les différents codes sur leur page spécifique. Ainsi, la langue par défaut affichée sera la même que la langue du site Web.

![](https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2F4IHPuSAvXOV947nwINP4%2F\(FR\)%20CP%20Website%20integration%20.png?alt=media\&token=8a95370c-224f-487b-a889-be074ddecb89)

## Étape 3 : Adaptation de la taille par défaut

Si vous souhaitez modifier la taille par défaut du document, vous pouvez le faire en ajoutant les attributs width et height dans le code. Un exemple ci-dessous :

```
// <iframe src="https://yourdomain.admeet.eu/reader/products/html/en/7335231f-0c27-4513-a74f-891d5a349610" width='100%' height='1200px'></iframe>
```

{% hint style="info" %}
Indépendamment de la largeur et de la hauteur que vous avez choisies, notre politique s'adaptera toujours de manière mobile responsive. La taille adaptée doit être considérée comme une valeur maximale.
{% endhint %}

## Étape 4 : Mise à jour de votre politique

Chaque fois que vous créez et validez une nouvelle version de la politique dans votre application Admeet, votre politique sera mise à jour automatiquement sur votre site Web. Cela signifie qu'à part la publication de la nouvelle version dans l'application Admeet, vous n'avez rien à faire.&#x20;

De cette façon,votre politique est toujours à jour sur votre site web, sans avoir à adapter le code ou le texte de votre site web.&#x20;

Vous avez terminé votre politique de cookies ? Parfait, cela signifie qu'il ne reste plus que votre bannière de cookies à faire. Nous y sommes presque !


# Bannière de cookies

L'intégration de la bannière de cookies est un peu plus technique que celle des iFrames, et le travail nécessaire sera influencé par le nombre de scripts de cookies utilisés. Cependant, si vous suivez les étapes ci-dessous, l'installation de la bannière ne devrait pas poser de problème.&#x20;

Avant de commencer ces étapes, veuillez toutefois vous assurer que les conditions suivantes sont remplies :

* Votre politique de cookies a été publiée et est accessible via le bouton "Comment intégrer ma politique de cookies et ma bannière ?" sur votre tableau de bord des politiques.&#x20;
* Vous savez quels sont les scripts utilisés pour installer des cookies sur votre site web, et vous êtes en mesure d'y apporter de légères modifications.

## Étape 1 : Copier le code de la bannière

Vous pouvez copier le code de la bannière directement à partir de la page d'intégration. Pour ce faire, il suffit d'aller sur la page d'intégration via votre tableau de bord.

![](https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2F9CnESdeuZk0yBIrQzstx%2F\(FR\)%20Integration%20page%20link.png?alt=media\&token=1df4cf27-0eb6-4fba-9cf0-537f9c78835e)

Une fois que vous êtes sur la page d'intégration, faites défiler la page jusqu'à la section des bannières.

![](https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2FQcgCoKhpcYxG6cmhyTJI%2F\(FR\)%20CP%20Banner%20integration.png?alt=media\&token=330227a6-8147-424a-91d5-663f5bd23ea6)

{% hint style="info" %}
Vous pouvez facilement copier le code complet en cliquant sur le bouton "Copier" à la fin du bloc de code.
{% endhint %}

## Étape 2 : Ajout du code à votre site Web

Une fois le code copié, il est important de l'ajouter à chaque page de votre site Web. Cela se fait généralement via l'en-tête ou le pied de page du site.&#x20;

La bannière s'adaptera automatiquement à la langue du site Web, en fonction des paramètres linguistiques de ce dernier. Il est donc important de configurer correctement les langues de votre site Web.&#x20;

Si, pour une raison quelconque, la bannière ne s'adapte pas automatiquement, ou si vous souhaitez modifier manuellement la langue, vous pouvez ajouter l'attribut suivant au code de la bannière :

```
data-admeet-lang='fr'
où
fr = français
en = anglais
nl = néerlandais
```

## Étape 3 : Adaptation de vos scripts de cookies

Pour permettre à notre bannière d'identifier correctement vos scripts de cookies, il est important que leur code soit légèrement modifié. Cela permettra à notre bannière de bloquer ou d'autoriser l'exécution d'un script, en fonction des décisions prises par l'utilisateur.&#x20;

Une fois que vous avez trouvé le(s) script(s) de cookie pertinent(s), les modifications suivantes doivent être apportées :

1. Changer l'attribut `type` en `text/plain`.
2. Ajoutez un attribut `data-cookieconsent={scriptType }` , où `{scriptType }` doit être remplacé par la catégorie de cookie pertinente, selon les conventions suivantes :
   * necessary
   * functional
   * marketing
   * statistic

## Étape 4 : mise à jour de votre bannière

Chaque fois que vous créez et validez une nouvelle version de la bannière dans votre application Admeet, Admeet affichera toujours la dernière version de votre bannière sur votre site Web. Cela signifie qu'à part la publication de la nouvelle version dans l'application Admeet, vous n'avez rien à faire.&#x20;

De cette façon, votre bannière est toujours à jour sur votre site Web, sans avoir à adapter le code ou le texte de votre site.&#x20;

Si vous ajoutez également de nouveaux cookies sur votre site Web à la suite de votre nouvelle version, veuillez vous reporter à l'étape 5.&#x20;

## Étape 5 : Ajout de nouveaux scripts de cookies sur votre site Web&#x20;

Si vous décidez de commencer à utiliser de nouveaux scripts de cookies sur votre site Web, vous devrez faire deux choses :&#x20;

* Adapter le script de cookie, de la même manière que celle mentionnée ci-dessus à l'étape 3, afin de garantir que notre bannière puisse identifier correctement le nouveau script.&#x20;
* Mettre à jour votre politique en matière de cookies et votre bannière dans l'application Admeet, comme indiqué ci-dessus à l'étape 4, afin de vous assurer que votre site Web est toujours à jour.&#x20;

Vous avez terminé votre bannière de cookies ? Bonne nouvelle, vous venez de terminer la partie la plus difficile !


# Shopify integration

Le processus d'intégration de Shopify est très similaire à notre processus d'intégration standard. Cependant, il y a quelques étapes spécifiques à suivre sur la plateforme Shopify. Comme certaines de ces étapes sont encore un peu techniques, nous vous conseillons de les suivre en coopération avec votre développeur de site web. Il sera en mesure de s'assurer que tout est mis en œuvre correctement.&#x20;

Dans les pages suivantes, vous verrez comment intégrer les différents aspects de vos politiques.


# Politique de vie privée (iFrame)

L'intégration de nos iFrames peut se faire en quelques étapes rapides. Avant de commencer ces étapes, veuillez toutefois vous assurer que les conditions suivantes sont remplies :

* Votre politique de confidentialité a été publiée et est accessible via le bouton "Comment intégrer ma politique de confidentialité et ma bannière ?" sur votre tableau de bord des politiques.&#x20;
* La page du site web sur laquelle vous souhaitez intégrer la politique doit autoriser les iFrames.

## Étape 1 : Copier le code iFrame

Vous pouvez copier le code iFrame directement à partir de la page d'intégration. Pour ce faire, il suffit d'aller sur la page d'intégration via votre tableau de bord.

![](https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2FEelArAEHzjQdrPSOnVP8%2F\(FR\)%20Integration%20page%20link.png?alt=media\&token=951823df-d4d8-4d03-94b3-97a7dffca4ea)

Une fois sur la page d'intégration, vous pouvez choisir l'iFrame que vous souhaitez installer. Les différentes langues indiquent la langue par défaut du document, mais il est toujours possible de changer de langue dans le document lui-même.&#x20;

{% hint style="info" %}
Vous pouvez facilement copier le code complet en cliquant sur le bouton "Copier" à la fin du bloc de code.
{% endhint %}

![](https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2FXUk5Xn5Pubivhqqps2Q1%2F\(FR\)%20PP%20iFrame%20integration.png?alt=media\&token=1d9cac88-d987-4483-878d-15a761578958)

## Étape 2 : Ajout du code à votre site Web

Une fois le code copié, vous pouvez l'ajouter directement à la page concernée de votre site Web. Pour installer correctement l'iFrame, vous devez accéder au code HTML de votre page.&#x20;

Pour ce faire, il suffit d'ouvrir la page où vous souhaitez ajouter la politique, et dans le bloc "Content", cliquez sur le symbole HTML (<>). Cela ouvrira le code HTML de la page, où vous pourrez simplement coller le code iFrame.

{% hint style="info" %}
Si cela ne fonctionne pas, il se peut que vous deviez changer le modèle du thème en "Default page". Si, pour une raison quelconque, cela n'est pas possible, vous pouvez ajouter le code iFrame directement au code de la page via le module "Themes".
{% endhint %}

Si vous avez un site Web avec plusieurs langues, vous pouvez copier les différents codes sur leur page spécifique. Cela permettra de s'assurer que la langue par défaut affichée est la même que la langue du site web.

<figure><img src="https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2FzwKVDsuCnkwrRkMTgqGu%2FShopify%20iFrame%20integration.png?alt=media&amp;token=7c6d9393-9f42-4253-b91b-d50d23930b0b" alt=""><figcaption></figcaption></figure>

## Étape 3 : Adaptation de la taille par défaut

Si vous souhaitez modifier la taille par défaut du document, vous pouvez le faire en ajoutant les attributs width et height dans le code. Un exemple ci-dessous :

```
// <iframe src="https://yourdomain.admeet.eu/reader/products/html/en/7335231f-0c27-4513-a74f-891d5a349610" width='100%' height='1200px'></iframe>
```

{% hint style="info" %}
Indépendamment de la largeur et de la hauteur que vous avez choisies, notre politique s'adaptera toujours pour être réactive aux mobiles. La taille adaptée doit être considérée comme une valeur maximale.
{% endhint %}

## Étape 4 : Mise à jour de votre politique

Chaque fois que vous créez et validez une nouvelle version de votre politique dans l'application Admeet, votre politique sera automatiquement mise à jour sur votre site Web. Cela signifie qu'à part la publication de la nouvelle version dans l'application Admeet, vous n'avez rien à faire.&#x20;

De cette façon, votre politique est toujours à jour sur votre site Web, sans avoir à adapter le code ou le texte de votre site.&#x20;

Vous avez terminé votre politique de confidentialité ? Bonne nouvelle, l'installation de notre politique de cookies suit exactement la même structure. Facile, non ?


# Politique de cookies (iFrame)

L'intégration de nos iFrames peut se faire en quelques étapes rapides. Avant de commencer ces étapes, veuillez toutefois vous assurer que les conditions suivantes sont remplies :

* Votre politique de cookies a été publiée et est accessible via le bouton "Comment intégrer ma politique de cookies et ma bannière ?" sur votre tableau de bord des politiques.&#x20;
* La page du site web sur laquelle vous souhaitez intégrer la politique doit autoriser les iFrames.

## Étape 1 : Copier le code iFrame&#x20;

Vous pouvez copier le code iFrame directement à partir de la page d'intégration. Pour ce faire, il suffit d'aller sur la page d'intégration via votre tableau de bord.

![](https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2FoENH1sXboZ3ELjlh0NaZ%2F\(FR\)%20Integration%20page%20link.png?alt=media\&token=faf1c504-8e23-4d88-b993-7b25017236d9)

Une fois sur la page d'intégration, vous pouvez choisir l'iFrame que vous souhaitez installer. Les différentes langues indiquent la langue par défaut du document, mais il est toujours possible de changer de langue dans le document lui-même.

{% hint style="info" %}
Vous pouvez facilement copier le code complet en cliquant sur le bouton "Copier" à la fin du bloc de code.
{% endhint %}

![](https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2FHs5g2wfMD21LJQ3ZcPo0%2F\(FR\)%20CP%20iFrame%20integration.png?alt=media\&token=6430a718-04f6-4d91-82b7-625e4d577bde)

## Étape 2 : Ajout du code à votre site Web

Une fois le code copié, vous pouvez l'ajouter directement à la page concernée de votre site Web. Pour installer correctement l'iFrame, vous devez accéder au code HTML de votre page.&#x20;

Pour ce faire, il suffit d'ouvrir la page où vous souhaitez ajouter la politique, et dans le bloc "Content", cliquez sur le symbole HTML (<>). Cela ouvrira le code HTML de la page, où vous pourrez simplement coller le code iFrame.

{% hint style="info" %}
Si cela ne fonctionne pas, il se peut que vous deviez changer le modèle du thème en “Default page". Si, pour une raison quelconque, cela n'est pas possible, vous pouvez ajouter le code iFrame directement au code de la page via le module "Themes".
{% endhint %}

Si vous avez un site Web avec plusieurs langues, vous pouvez copier les différents codes sur leur page spécifique. Cela permettra de s'assurer que la langue par défaut affichée est la même que la langue du site web.

<figure><img src="https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2FzwKVDsuCnkwrRkMTgqGu%2FShopify%20iFrame%20integration.png?alt=media&amp;token=7c6d9393-9f42-4253-b91b-d50d23930b0b" alt=""><figcaption></figcaption></figure>

## Étape 3 : Adaptation de la taille par défaut

Si vous souhaitez modifier la taille par défaut du document, vous pouvez le faire en ajoutant les attributs width et height dans le code. Un exemple ci-dessous :

```
// <iframe src="https://yourdomain.admeet.eu/reader/products/html/en/7335231f-0c27-4513-a74f-891d5a349610" width='100%' height='1200px'></iframe>
```

{% hint style="info" %}
Indépendamment de la largeur et de la hauteur que vous avez choisies, notre politique s'adaptera toujours pour être réactive aux mobiles. La taille adaptée doit être considérée comme une valeur maximale.
{% endhint %}

## Étape 4 : Mise à jour de votre politique

Chaque fois que vous créez et validez une nouvelle version de la politique dans l'application Admeet, votre politique sera automatiquement mise à jour sur votre site Web. Cela signifie qu'à part la publication de la nouvelle version dans l'application Admeet, vous n'avez rien à faire.&#x20;

De cette façon, votre politique est toujours à jour sur votre site Web, sans avoir à adapter le code ou le texte de votre site.&#x20;

Vous avez terminé votre politique de cookies ? Parfait, cela signifie qu'il ne reste plus que votre bannière de cookies à faire. Nous y sommes presque !


# Bannière de cookies

L'intégration de la bannière de cookies est un peu plus technique que celle des iFrames, et le travail nécessaire sera influencé par le nombre de scripts de cookies utilisés. Cependant, si vous suivez les étapes ci-dessous, l'installation de la bannière ne devrait pas poser de problème.

Avant de commencer ces étapes, veuillez toutefois vous assurer que les conditions suivantes sont remplies :

* Votre politique de cookies a été publiée et est accessible via le bouton "Comment intégrer ma politique de cookies et ma bannière ?" sur votre tableau de bord des politiques.&#x20;
* Vous savez quels sont les scripts utilisés pour installer des cookies sur votre site web, et vous êtes en mesure d'y apporter de légères modifications.

## Étape 1 : Copier le code de la bannière

Vous pouvez copier le code de la bannière directement à partir de la page d'intégration. Pour ce faire, il suffit d'aller sur la page d'intégration via votre tableau de bord.

![](https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2F1tyPZxtGC1tcOTgGxFiW%2F\(FR\)%20Integration%20page%20link.png?alt=media\&token=eb2366c3-0593-4b45-8416-c43724390a39)

Une fois que vous êtes sur la page d'intégration, faites défiler la page jusqu'à la section des bannières.

<figure><img src="https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2FQcgCoKhpcYxG6cmhyTJI%2F(FR)%20CP%20Banner%20integration.png?alt=media&amp;token=330227a6-8147-424a-91d5-663f5bd23ea6" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Vous pouvez facilement copier le code complet en cliquant sur le bouton "Copier" à la fin du bloc de code.
{% endhint %}

## Étape 2 : Ajout du code à votre site Web

Une fois le code copié, il est important de l'ajouter à chaque page de votre site Web. Sur votre site Web Shopify, vous pouvez le faire en l'ajoutant simplement à l'en-tête de votre site Web.&#x20;

Pour ce faire, allez dans les paramètres de votre boutique en ligne, et choisissez "Themes". Allez sur votre thème actif et cliquez sur les trois points à côté de "Customize". Dans le menu déroulant, sélectionnez "Edit code".

Une fois que vous êtes dans l'éditeur de code, sélectionnez le fichier "Theme.liquid". Ce fichier contient l'en-tête de votre site Web, dans lequel vous devez coller le code de la bannière. Une fois que vous avez collé le code, cliquez simplement sur "Save" dans le coin supérieur droit.

La bannière doit s'adapter automatiquement à la langue du site Web, en fonction des paramètres linguistiques de ce dernier. Il est donc important de configurer correctement les langues de votre site Web.

Si, pour une raison quelconque, la bannière ne s'adapte pas automatiquement, ou si vous souhaitez modifier manuellement la langue, vous pouvez ajouter l'attribut suivant au code de la bannière :

```
data-admeet-lang='fr'
où
fr = français
en = anglais
nl = néerlandais
```

## Étape 3 : Adaptation de vos scripts de cookies

Pour permettre à notre bannière d'identifier correctement vos scripts de cookies, il est important que leur code soit légèrement modifié. Cela permettra à notre bannière de bloquer ou d'autoriser l'exécution d'un script, en fonction des décisions prises par l'utilisateur.

Une fois que vous avez trouvé le(s) script(s) de cookie pertinent(s), les modifications suivantes doivent être apportées :

1. Changer l'attribut `type` en `text/plain`.
2. Ajoutez un attribut `data-cookieconsent={scriptType }`, où `{scriptType }` doit être remplacé par la catégorie de cookie pertinente, selon les conventions suivantes :
   * necessary
   * functional
   * marketing
   * statistic

## Étape 4 : mise à jour de votre bannière

Chaque fois que vous créez et validez une nouvelle version de la bannière dans votre application Admeet, Admeet affichera toujours la dernière version de votre bannière sur votre site Web. Cela signifie qu'à part la publication de la nouvelle version dans l'application Admeet, vous n'avez rien à faire.&#x20;

De cette façon, votre bannière est toujours à jour sur votre site Web, sans devoir adapter le code ou le texte de votre site.&#x20;

Si vous ajoutez également de nouveaux cookies sur votre site Web à la suite de votre nouvelle version, veuillez vous reporter à l'étape 5.&#x20;

## Étape 5 : Ajout de nouveaux scripts de cookies sur votre site Web&#x20;

Si vous décidez de commencer à utiliser de nouveaux scripts de cookies sur votre site Web, vous devrez faire deux choses :&#x20;

* Adapter le script de cookie, de la même manière que celle mentionnée ci-dessus à l'étape 3, afin de garantir que notre bannière puisse identifier correctement le nouveau script.&#x20;
* Mettre à jour votre politique en matière de cookies et votre bannière dans l'application Admeet, comme indiqué ci-dessus à l'étape 4, afin de vous assurer que votre site Web est toujours à jour.&#x20;

Vous avez terminé votre bannière de cookies ? Bonne nouvelle, vous venez de terminer la partie la plus difficile !


# Intégration Google Tag Manager

Dans les pages suivantes, vous verrez comment vous pouvez intégrer les différents aspects de vos politiques. Dans l'intégration de Google Tag Manager (GTM), le code Admeet sera inséré dans votre conteneur GTM. Ces étapes couvrent uniquement la manière d'utiliser votre code de bannière de cookie Admeet avec GTM, elles n'expliquent pas comment utiliser GTM lui-même.&#x20;

Veuillez prendre en compte que GTM n'est viable que pour votre code de bannière de cookie. Pour nos iFrames (politique de cookies et politique de confidentialité), vous devrez utiliser soit l'intégration standard, soit notre plugin.

{% hint style="info" %}
Vous trouverez de plus amples informations sur Google Tag Manager et sur la manière de l'utiliser ici : <https://developers.google.com/tag-platform/tag-manager>.&#x20;
{% endhint %}

Sur la page suivante, vous verrez comment vous pouvez intégrer les différents aspects de vos politiques.


# Bannière de cookies (GTM)

L'intégration de la bannière de cookies est un peu plus technique que celle des iFrames, et le travail nécessaire sera influencé par le nombre de scripts de cookies utilisés. Cependant, si vous suivez les étapes ci-dessous, l'installation de la bannière ne devrait pas poser de problème.&#x20;

Avant de commencer ces étapes, veuillez toutefois vous assurer que les conditions suivantes sont remplies :

* Votre politique cookies a été publiée et est accessible via le bouton "Comment intégrer ma politique de cookies et ma bannière ?" sur votre tableau de bord des politiques.&#x20;
* Vous savez quels sont les scripts utilisés pour installer des cookies sur votre site Web, et vous êtes en mesure d'y apporter de légères modifications.&#x20;
* Vous avez configuré un conteneur Google Tag Manager pour votre site Web (idéalement avec tous les scripts de cookies existants déjà présents).

## Étape 1 : Copier le code de la bannière

Vous pouvez copier le code de la bannière directement à partir de la page d'intégration. Pour ce faire, il suffit d'accéder à la page d'intégration via votre tableau de bord.

![](https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2FIuQGlsYhTNjpfDm2QoBl%2FIntegration%20page%20link.png?alt=media\&token=05d3c105-ee91-4279-a5d7-da7dca2cbccd)

Une fois que vous êtes sur la page d'intégration, faites défiler la page jusqu'à la section des bannières.

![](https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2FOji6ALZwU2SaNtd6jwU2%2FCP%20Banner%20integration.png?alt=media\&token=26c0df08-460c-4578-9259-111533c3d611)

{% hint style="info" %}
Vous pouvez facilement copier le code complet en cliquant sur le bouton "Copier" à la fin du bloc de code.
{% endhint %}

## Étape 2 : Ajouter le code de la bannière de cookie à votre conteneur GTM

Connectez-vous à Google Tag Manager et sélectionnez le conteneur dans lequel vous souhaitez publier la bannière.

![](https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2FloRHLkxC6c6nEmT1r5ZQ%2Fimage.png?alt=media\&token=4ef85106-7b97-4469-acdb-8975ec97238f)

Dans la barre de navigation de gauche, cliquez sur "Balises" pour gérer les tags dans votre conteneur, et créez une nouvelle balise.

![](https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2FfrpolBp8XhyqDx3WvCgr%2Fimage.png?alt=media\&token=e54bbbe2-fb96-4cff-a9b8-bb30768aa479)![](https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2FUoHrD4SIf8tUdpt7a3Gy%2Fimage.png?alt=media\&token=e2aff370-0fd1-424b-ab5d-bb1aaa3f228d)

Dans l'écran de création de balise, modifiez d'abord le nom (balise sans titre) de la balise afin de pouvoir la reconnaître facilement par la suite. Cliquez ensuite sur la case " Configuration de la balise ". Dans la liste des types de balises, faites défiler la liste et sélectionnez “HTML personnalisée".

![](https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2FMA7k51EJiqQ1yflxMMWA%2Fimage.png?alt=media\&token=4d55d56e-4ef3-4a75-8fe0-b45876c6560a)![](https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2F7Ml4n9ekXjyofJPULtXf%2Fimage.png?alt=media\&token=c5e1d1ad-d7a9-463f-afa1-f86d2c4f4c12)

Dans l'écran de création de la balise, copiez le code de la bannière dans la case HTML. Une fois copié, cochez la case “Compatible avec document.write".  Une fois ces deux actions effectuées, cliquez sur la case "Déclenchement".

![](https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2FyjCOaZzQYWXffpGZVxjE%2Fimage.png?alt=media\&token=7f4c61df-4b40-4a6b-a905-f495bd3b32db)

Dans la liste des déclencheurs, sélectionnez "Consent Initialization - All Pages".

![](https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2FLA3CIdUlYuV8BWvyEBzV%2Fimage.png?alt=media\&token=15ecde13-784b-43aa-b23e-f3c0903cac3f)

Avant de sauvegarder, assurez-vous que les paramètres suivants sont correctement définis :

* Le nom de la balise a été modifié pour être facilement reconnaissable.&#x20;
* Le code de la bannière a été entièrement copié dans la case HTML.&#x20;
* La case "Compatible avec document.write" a été cochée.&#x20;
* Le déclencheur est réglé sur "Consent Initialization - All Pages".

Si tous les paramètres ont été correctement définis, vous pouvez enregistrer votre balise.

![](https://1522195102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHr8EgdzyIZsU2dUnOSBZ%2Fuploads%2F15IsK4mhsbyzV2z7pF4Y%2Fimage.png?alt=media\&token=b4c8e495-8603-4875-a8d9-3b1055a1d194)

## Étape 3 : Adaptation de vos scripts de cookies

Pour permettre à notre bannière d'identifier correctement vos scripts de cookies, il est important que leur code soit légèrement modifié. Cela permettra à notre bannière de bloquer ou d'autoriser l'exécution d'un script, en fonction des décisions prises par l'utilisateur.&#x20;

Vous devrez apporter des modifications similaires à celles de l'intégration standard, mais GTM a l'avantage d'avoir déjà regroupé la plupart de vos scripts de cookies.&#x20;

Une fois que vous avez trouvé le(s) script(s) de cookie pertinent(s), les changements suivants doivent être effectués :

1. Changer l'attribut `type` en `text/plain`.
2. Ajoutez un attribut `data-cookieconsent={scriptType }`, où `{scriptType }` doit être remplacé par la catégorie de cookie pertinente, selon les conventions suivantes :
   * necessary
   * functional
   * marketing
   * statistic

{% hint style="info" %}
Pour tout script de cookie qui n'est pas géré par GTM, veuillez vous référer à notre guide d'intégration standard.
{% endhint %}

## Étape 4 : Mise à jour de votre bannière

Chaque fois que vous créez une nouvelle version de la bannière dans votre application Admeet, votre bannière sera mise à jour automatiquement sur votre site Web. Cela signifie qu'à part la publication de la nouvelle version dans l'application Admeet, vous n'avez rien à faire.&#x20;

De cette façon, votre bannière est toujours à jour sur votre site Web, sans avoir à adapter le code ou le texte de votre site.&#x20;

Si vous ajoutez également de nouveaux cookies sur votre site Web à la suite de votre nouvelle version, veuillez vous reporter à l'étape 5.&#x20;

## Étape 5 : Ajout de nouveaux scripts de cookies sur votre site Web&#x20;

Si vous décidez de commencer à utiliser de nouveaux scripts de cookies sur votre site Web, vous devrez faire deux choses :&#x20;

* Adapter le script de cookie, de la même manière que celle mentionnée ci-dessus à l'étape 3, afin de garantir que notre bannière puisse identifier correctement le nouveau script.&#x20;
* Mettre à jour votre politique de cookies et votre bannière dans l'application Admeet, comme indiqué ci-dessus à l'étape 4, afin de vous assurer que votre site Web est toujours à jour.&#x20;

Vous avez terminé votre bannière de cookies ? Bonne nouvelle, vous venez de terminer la partie la plus difficile !


