Skip to main content

AppConsent Quick start for a web notice

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

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.

1. Create a source​

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

    Create source

  • 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

    IAB vendors

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.

  • 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.

Purposes and Features

Save the source

tip

Leave the other fields, for now, you can come back to them later.

2. Create a notice​

From the side menu, click on Notices, then Add notice.

Add notice

2.1. General Settings​

Select in the Source field, the source previously created

Source field

2.2. Configuration​

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

Display layout field

Web notice Classic template banner

Web notice Classic template modal window

Choose the order of the buttons in the Buttons available in banner field. This is for the introduction page.

info

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

Buttons avalaible in Banner

2.3. Text translation​

Select the language(s) you want in the Languages to be included in the notice field.

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

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.

Text translation

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​

info

First open your website's HTML source code.

3.1 Configure the notice​

The configSFBXAppConsent variable is used to configure the behaviour of the notice. It must have an appKey parameter configured to work. This variable must be placed before the loader in the <head> section.

<script type="text/javascript">
  const configSFBXAppConsent = {
    appKey: 'YOUR_APP_KEY',
    // targetCountries: ['FR', 'UK', 'US'],
    // forceGDPRApplies: true,
  }
</script>

To get the AppKey of your notice, go to AppConsent then to Notices, then click on the line of the record you want to integrate. The AppKey (a sequence of numbers and letters) will be displayed, copy it using the button.

Finally, replace "YOUR APPKEY" with the previously copied AppKey.

Notice AppKey

3.2 Add the loader​

To initialize the cmp in your website, add the following script called loader at end of <head> section. The loader automatically downloads the latest version of the notice.

<script src="https://cdn.appconsent.io/loader-clear.js" defer async></script>

It's finished, your notice is now displayed and functional on your website.

To go further
Last updated on