# AppConsent Quick start for a web notice

Find out how to create a consent notice and how to implement it on your website.

***

{% hint style="info" %}
**NOTE**

In this step-by-step guide, we explain how to create a basic notice using the *IAB Transparency & Consent Framework (TCF)* and then how to implement it on your website.

3 main steps:

1. Create a source
2. Create a notice
3. Insert your notice on your site

To discover other more advanced settings, for example, how to add your own partners (called extra vendors), we invite you to browse the summary of our documentation.
{% endhint %}

## 1. Create a source

* From the side menu, click on **Sources**, then **CREATE SOURCE.**

<figure><img src="https://4229351976-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkyFlZKFaKP4MUM0zILOg%2Fuploads%2FzvPYdVBIV0FyxDHU2gwL%2FQuick_start1.png?alt=media&#x26;token=5ec7ef3e-5a8b-4006-80d8-2d14d26409a4" alt=""><figcaption></figcaption></figure>

* Choose **Website** in the type field.
* Enter the domain name of your website in the **website URL** field
* Choose your **IAB vendors** in the dedicated field

<figure><img src="https://4229351976-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkyFlZKFaKP4MUM0zILOg%2Fuploads%2FfnumNhqR0BBkGXyXRrX5%2FQuick_start2.png?alt=media&#x26;token=c649834b-3070-4dab-b823-0ce767ab59f1" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**TIP**

Thanks to your vendors selection, we make their IAB purposes appear in the dedicated field below. You still can edit this purposes & features list at your convenience.
{% endhint %}

* In **Purposes and Features** field, you can modify the automatic selection according to your needs.

If you can delete some purposes, note that by doing so you will automatically delete the associated vendors, as long as the vendors were only present for that goal. You cannot add a purpose if you did not select the associated vendors above.

You can also transform some purposes into a group, named Stack, if you need. If you know which stacks can match your data collection, we recommend you to select one or several stacks, your consent notice will be shorter.

<figure><img src="https://4229351976-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkyFlZKFaKP4MUM0zILOg%2Fuploads%2FcBcZnVw8HfISqaipzt4B%2FQuick_start3.png?alt=media&#x26;token=cae3b2a2-165c-4566-a795-7598cc7602ef" alt=""><figcaption></figcaption></figure>

Save the source

{% hint style="success" %}
**TIP**

Leave the other fields, for now, you can come back to them later.
{% endhint %}

## 2. Create a [notice](https://docs.sfbx.io/help/glossary)

From the side menu, click on **Notices**, then **Create notice.**

<figure><img src="https://4229351976-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkyFlZKFaKP4MUM0zILOg%2Fuploads%2FYNx26zFSMAIDsAdJCvIH%2FQuick_start4.png?alt=media&#x26;token=1046a4e3-5b2c-4af8-bcfe-ae4142a1a9df" alt=""><figcaption></figcaption></figure>

### 2.1. General Settings

Select in the **Source** field, the source previously created

<figure><img src="https://4229351976-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkyFlZKFaKP4MUM0zILOg%2Fuploads%2FDDPfdu3VuNRvjsgqNZOa%2FQuick_start5.png?alt=media&#x26;token=46fc7bb7-5418-4e7f-8088-02f08f461ffb" alt=""><figcaption></figcaption></figure>

### 2.2. Language & text customization

Select the language(s) you want in the **Language** field.

In the **Default language** field, set a default language in case it is not possible to determine the language of a user.

Add the link to your privacy policy for each of the languages selected above. This link will be automatically added to the **"See more paragraph" banner** field in the text customization section once the notice has been created.

{% hint style="success" %}
**TIP**

By clicking in the last field, you have the possibility to see the texts of the record. For the moment, we advise you to leave the default texts, and to come back to them later when you will have visualized your notice. In the next version of AppConsent, we will improve the way to modify the texts.
{% endhint %}

<figure><img src="https://4229351976-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkyFlZKFaKP4MUM0zILOg%2Fuploads%2F6BDDdjxTnaM8o906o3qb%2FQuick_start10-c9e9d2ceab53f2e88efc5dbf9083fa42.png?alt=media&#x26;token=aa3f121a-081a-4ea4-a81f-a9655f547308" alt=""><figcaption></figcaption></figure>

### 2.3. Configuration

In the **Display layout** field, you have the choice between 2 layouts for your introduction page. By default, it is a central window. If you prefer a banner at the bottom of your site, select **Bottom full width**.

<figure><img src="https://4229351976-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkyFlZKFaKP4MUM0zILOg%2Fuploads%2Fc2ZeKugneGda2ykjYe6C%2FQuick_start6.png?alt=media&#x26;token=489ec7ba-66ba-4865-84c4-ae65aef93d8e" alt=""><figcaption></figcaption></figure>

<div><figure><img src="https://4229351976-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkyFlZKFaKP4MUM0zILOg%2Fuploads%2F3mcleBNAHNncRIPMPq4T%2FQuick_start7.png?alt=media&#x26;token=09893372-837e-4532-92a4-32058a2a0a90" alt=""><figcaption></figcaption></figure> <figure><img src="https://4229351976-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkyFlZKFaKP4MUM0zILOg%2Fuploads%2FawRQiVSIYTcbMa7LfE4W%2FQuick_start8.png?alt=media&#x26;token=3b8f243c-0589-47a6-92fa-4c0207192e24" alt=""><figcaption></figcaption></figure></div>

Choose the order of the buttons in the **Consent buttons** field. This is for the introduction page.

<figure><img src="https://4229351976-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkyFlZKFaKP4MUM0zILOg%2Fuploads%2F9THbbckoP9Dq11ppSO7Q%2FQuick_start9.png?alt=media&#x26;token=98a3ea73-a891-4aaa-883a-b9c2ce97ba47" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**INFO**

Compliance point (CNIL): since April 1st 2021, the French CNIL requires the presence of a button to  **refuse** the data collection.
{% endhint %}

Click on **save** at the end of the page.

That's it, your website's manual is created in AppConsent. Now it's time to integrate some pieces of code on your website. After that, your notice will be displayed on your website and the consent collection can start.

## 3. Integrate your notice on your site

{% hint style="warning" %}
**OTHER POSSIBLE IMPLEMENTATIONS**

You wish integrate AppConsent with Google Tag Manager ? See the dedicated page : [Install AppConsent with Google Tag Manager](https://docs.sfbx.io/configuration/step-3-notice-implementation-web-app-tv/google-gtm)

You wish integrate AppConsent into shopify? See the dedicated page: [Implement AppConsent with Shopify](https://docs.sfbx.io/configuration/step-3-notice-implementation-web-app-tv/web-cmp/implement-with-shopify)
{% endhint %}

***

1. Go to **Notices** tab in AppConsent configuration interface
2. Then under the notice you wish to integrate, copy the integration code using the "Copy" button

<figure><img src="https://4229351976-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkyFlZKFaKP4MUM0zILOg%2Fuploads%2FiNNDg6qUrG9FzawNqtyb%2FCapture%20d%E2%80%99e%CC%81cran%202025-07-17%20a%CC%80%2014.10.41.png?alt=media&#x26;token=c3458636-1d31-43f6-9d41-f5a4c1c84482" alt=""><figcaption></figcaption></figure>

3. Finally, paste the code in the `<head>` tag in your website

{% hint style="warning" %}
Please add our CMP tag BEFORE any Google gtag() (GTM, GA and so on). Otherwise, you may experiment some discrepancies or warning by Google in you Google stack report.
{% endhint %}

That's it, your notice is now up and running on your website

***

{% hint style="info" %}
**TO GO FURTHER**

* Do you use Google Tag Manager? Find out how to integrate your notice with Google Tag Manager.
* Do you have partners that are not listed in the IAB? Find out how to add your own partners (called extra vendors)
* Are you collecting data for other purposes of your own? Find out how to add your own purposes (called extra purpose)
  {% endhint %}