Skip to main content

Configure a web notice


Before creating your notice, you need to have a valid source declared in AppConsent. See section Create a source in order to learn how to create a new source.

In the left menu, click on Notices and then on ADD NOTICE.

Add notice

Add notice form

1. General Settings​

  • Source: Select the source you want to attach the notice to. Notice is always linked to one source.

  • Notes: Add the comments you want. It’s a reminder for your own usage and it will not be displayed anywhere in the notice.

Click on Continue

2. Configuration​

​Add notice Configuration

  • Floating extra purpose [ Premium Plan only ]: a floating purpose is a purpose for which only the storage of the consent is concerned.
note

The text part is managed on your side. In the case of Floating, it is a new API save-floating-purpose route that receives them with the UUID, the AppKey of the notice as well as the possible External IDs. The consent payload is stored separately in another table. If the payload contains an external ID it must be saved as it is at the moment in order not to lose the correspondence UUID/ContractID etc.

  • Disable Success Screen: Switch to On if you want to deactivate the following screen when the user goes beyond the introduction screen and makes mixed choices.

​Success page Web Classic template

  • Display layout: Choose between a bottom banner or a middle modal window
note

Template Clear is only available on middle modal window

  • Buttons available in banner: Choose the buttons and their order on the introduction page

  • Use Banner: If Checked, a banner (introduction page) will be display with 2 CTA : Configure and Accept all.

note

From April 1st, 2021, the "Refuse All" button is mandatory in France. To learn more about the new guidelines of the CNIL since April 1st, you can have a look at our dedicated article

  • Use a skip button: The user can leave the notice without making a choice. By default, it is a link "continue without accepting" placed at the top right of the window.

  • Enable Legitimate Interest purposes when Refuse All/Continue without accepting (skip): If the user refuses or leaves, you can decide to collect any data (switch off) or collect only data for purposes under a legitimate interest legal base (switch on)

note

As recommended by the Italian regulator, the Garante, our Continue without accepting link is automatically replaced by a cross for all web notices, for whom the user browser is in Italian. This cross has the same effect as our link Continue without accepting: close the notice with no consent.

3. Text translation​

Add notice Text Translation

  • Languages to be included in the notice: select the language you want to be included in your notice. Languages are available: English, French, Spanish, Italian, German, Dutch, Portuguese, Polish, Bulgarian, Czech.

  • Select the default language: this language will be used if the browser language is not configured in one of the languages included in the notice.

By default, a new notice is configured in English only. But you can add other languages and translations.

Add notice Text translation privacy policy link

warning

Please note that the default text of the banner banner_moreDetails_paragraphs field does not mention your link to your privacy policy page. Make sure to update it with your own link by completing the <a\> tag in each language selected.

In each language tab, you will find all text of your notice. You can modify them. But you can also reset the default texts by clicking on Reset to default.

It is possible to create links in text to redirect users to other parts of the notice. For this, two tags are available:

  • <goto_vendors> : Allows to create a redirection link to the list of all partners (vendors) that are present in the notice.
    • Note: The <goto> tag is deprecated, use <goto_vendors> instead
  • <goto_settings> : Allows to create a redirection link to consent settings page

The titles of the IAB purposes and their definitions can't be changed. It's due to the IAB TCF compatibility with their Term & Privacy policies.

4. UI customization​

Color configuration fields​

note

If you do not fill any color codes, then the default colors will be applied.

Web notice Introduction page Classic template

Web notice settings page Classic template

Edition buttons colors

Following the latest declarations of the CNIL, we insist that you do not favor one CTA over another. The European regulator is particularly attentive to this subject. For example, if you change the style ( background, size...) of an Accept button, you must apply the same style to the Configure or Reject button.

​Edition header and background color

Edition switch colors

Additional CSS code​

caution

CSS customization presented below is only for CMP with classic template. We advise you not to modify CSS properties of the CMP, especially geometrical properties. Indeed, we provide defaults that were intensely tested for responsivity.

Example of full CSS customization:

/* global variables */
:root {
--background-color: #F6F6F6;
--primary-color: #1F66BA;
--font-color: #545465;
}
article.banner {
background-color: var(--background-color);
color: var(--font-color);
border-top: 0;
padding: 16px;
box-sizing: border-box;
height: auto;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}
@media (min-width: 900px) {
article.banner {
padding: 24px 32px;
}
}
/* banner header */
.banner .banner__header,
.banner .banner__header + main {
padding-left: 0;
padding-right: 0;
}
.banner .banner__header + main {
padding-right: 40px;
}
.banner .banner__header {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-bottom: 10px;
}
.banner .banner__header .title {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.04em;
margin: 10px 0 0 0;
}
.banner .brandTitle {
max-width: 200px;
margin: 0;
}
.banner .brandTitle img {
width: 100%;
display: block;
}
@media (min-width: 900px) {
.banner__header {
flex-direction: row;
align-items: flex-end;
}
.banner .banner__header .title {
margin-top: 0;
margin-left: 24px;
}
}
/* banner actions */
.banner .banner__controlArea {
padding: 24px 0 0 0;
margin: 24px 0 0 0;
flex-direction: row;
justify-content: left;
align-content: center;
flex-wrap: wrap;
position: relative;
box-shadow: none;
}
.banner .banner__controlArea:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: inherit;
height: 1px;
background-color: var(--font-color);
}
@media (min-width: 900px) {
.banner .banner__controlArea {
padding-top: 48px;
padding-bottom: 24px;
padding-left: 64px;
margin: 0;
}
.banner .banner__controlArea:before {
top: 24px;
right: inherit;
bottom: 24px;
width: 1px;
height: auto;
}
}
.banner .banner__controlArea > section {
margin: 0;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
@media (min-width: 900px) {
.banner .banner__controlArea > section {
width:auto;
}
}
.banner .banner__controlArea .fadedText {
flex: 0 0 100%;
margin: 12px 0 0;
}
.banner .banner__controlArea .banner__moreContent {
margin-top: 0;
}
/* Generic elements (scoped with banner class to avoid side effects on other elements) */
.banner .baseText {
font-size: 13px;
line-height: 16px;
color: var(--font-color);
font-weight: 300;
}
/* link */
.banner .link {
color: var(--primary-color);
font-weight: 600;
text-decoration: none;
position: relative;
}
.banner .link:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background-color: var(--primary-color);
bottom: 0px;
transition: transform 0.35s ease;
transform-origin: center center;
}
.banner .link:hover:before,
.banner .link:hover:focus
.banner .link:hover:active {
transform: scaleX(0);
}
/* button */
.banner .button {
border: 1px solid var(--primary-color);
border-radius: 4px;
margin: 0 24px 12px 0;
padding: 12px 20px;
background-color: transparent;
position: relative;
overflow: hidden;
flex: 0 0 100%;
}
.banner .button:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--primary-color);
transform-origin: center bottom;
transform: scaleY(0);
transition: transform 0.35s ease;
}
.banner .button:hover:before,
.banner .button:focus:before,
.banner .button:active:before {
transform: scaleY(1);
}
.banner .button .baseText {
font-size: 17px;
font-weight: 600;
line-height: 1;
color: var(--primary-color);
position: relative;
z-index: 1;
transition: color 0.35s ease;
}
.banner .button:hover .baseText,
.banner .button:focus .baseText,
.banner .button:active .baseText {
color: white;
}
.banner .button--filled {
background-color: var(--primary-color);
}
.banner .button--filled:before {
background-color: var(--background-color);
}
.banner .button--filled .baseText {
color: white;
}
.banner .button--filled:hover .baseText,
.banner .button--filled:focus .baseText,
.banner .button--filled:active .baseText {
color: var(--primary-color);
}
@media (min-width: 500px) {
.banner .button {
flex-basis: auto;
}
}
/* Tweak for iFrame height */
@media (min-width: 900px) {
.frame-root {
display: flex;
height: 100vh;
}
.frame-content {
display: flex;
align-items: flex-end;
height: 100%;
}
}

CSS : You can past specific CSS rules to customize the UI and adapt it. You can change the background color and so on. Example= ac-notice .intro { background: white!important; color:#656565!important;} .intro .title { color:#656565!important;}

The CSS rules are common for each languages.

Additional CSS code for AMP (Premium & Standard)​

If you using AMP, put in this field the same code as above.

info

If Additional CSS code for AMP is empty, the classic CSS will be applied to all notices, including AMP.

If Additional CSS code for AMP is filled in, it will be applied to AMP notices, the classic CSS will be applied to other notices.

5.Advanced settings​

Add notice Advanced settings

These default values, which we recommend, allow you to be in compliance while maximizing your consent rates. Those durations represent the time lapse before the consent notice will be displayed again and consent will be sought once more.

  • Accept all: 12 months

  • Refuse all: 6 months

  • Mixed choice: 12 months

  • (If applicable) Continue without accepting: 3 days

You can modify the durations at any time.

note

If you have created your consent notice before October 28th, 2021, the default settings for mobile consent notices are on 12 months for all choices. Feel free now to adjust them.

Then click on save. The notice in Production is updated and ready to be implemented in your application.

Each update is stored in a specific ledger in our blockchain stack. We store the whole notice and the text altered, precise timestamp, account_id, consoleUserID, and so on.