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.

1. General Settings

  • Source: Select the source you want to attach the notice. A notice is always linked to one source.
  • Enable Legitimate Interest purposes when Refuse All/Continue without accepting (skip) : If the user refuse or leave, you can decide to collect any data (switch off) or collect only data for purposes under legitimate interest legal base (switch on)
  • 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

  • Floating extra purpose [ Premium Plan only ]: a floating purpose is a purpose for which only the storage of the consent is concerned.
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 externalID 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 desactivate the following screen when user go beyond the introduction screen and make mixed choices.
  • Use Banner: If Checked, a banner (introduction page) will be display with 2 CTA : Configure and Accept all.
  • CTAs available in Banner: Choose the buttons and the orders.
  • Use a skip button : add the "continue without accepting" button.
By March 31, 2021, the "Refuse All" button will be mandatory in France

3. Text translation

By default, a new notice is configured in english only. But you can add other language and translations.
  • Languages to be included in the notice: select the language you want to be include in your notice. Languages 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.
In the last field, 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".
Please note that the default text of the banner ( "Ban_desc" field) mentions a fake link to a privacy policy page. Make sure to update it with your own link in each language selected.
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. The only thing you can change is the stacks definitions.
You can use HTML an even Javascript directly into the fields. It gives you the opportunity to deeply customize the behavior of the notice or to adapt to specific situations. Again, please take care of not breaking IAB Policies and more over the GDPR itself.

4. UI customization

Color configuration fields

If you do not fill any color codes, then the default colors will be applied.
Preview of first screen (called banner)
Preview of detailled screen
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.

Additional CSS code

Example of full CSS customization:
1
/* global variables */
2
:root {
3
--background-color: #F6F6F6;
4
--primary-color: #1F66BA;
5
--font-color: #545465;
6
}
7
8
article.banner {
9
background-color: var(--background-color);
10
color: var(--font-color);
11
border-top: 0;
12
padding: 16px;
13
box-sizing: border-box;
14
height: auto;
15
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
16
}
17
18
@media (min-width: 900px) {
19
article.banner {
20
padding: 24px 32px;
21
}
22
}
23
24
/* banner header */
25
.banner .banner__header,
26
.banner .banner__header + main {
27
padding-left: 0;
28
padding-right: 0;
29
}
30
31
.banner .banner__header + main {
32
padding-right: 40px;
33
}
34
35
.banner .banner__header {
36
display: flex;
37
flex-direction: column;
38
align-items: flex-start;
39
padding-bottom: 10px;
40
}
41
42
.banner .banner__header .title {
43
font-size: 17px;
44
font-weight: 600;
45
letter-spacing: -0.04em;
46
margin: 10px 0 0 0;
47
}
48
49
.banner .brandTitle {
50
max-width: 200px;
51
margin: 0;
52
}
53
54
.banner .brandTitle img {
55
width: 100%;
56
display: block;
57
}
58
59
@media (min-width: 900px) {
60
.banner__header {
61
flex-direction: row;
62
align-items: flex-end;
63
}
64
65
.banner .banner__header .title {
66
margin-top: 0;
67
margin-left: 24px;
68
}
69
}
70
71
/* banner actions */
72
.banner .banner__controlArea {
73
padding: 24px 0 0 0;
74
margin: 24px 0 0 0;
75
flex-direction: row;
76
justify-content: left;
77
align-content: center;
78
flex-wrap: wrap;
79
position: relative;
80
box-shadow: none;
81
}
82
83
.banner .banner__controlArea:before {
84
content: '';
85
position: absolute;
86
top: 0;
87
left: 0;
88
right: 0;
89
bottom: inherit;
90
height: 1px;
91
background-color: var(--font-color);
92
}
93
94
@media (min-width: 900px) {
95
.banner .banner__controlArea {
96
padding-top: 48px;
97
padding-bottom: 24px;
98
padding-left: 64px;
99
margin: 0;
100
}
101
102
.banner .banner__controlArea:before {
103
top: 24px;
104
right: inherit;
105
bottom: 24px;
106
width: 1px;
107
height: auto;
108
}
109
}
110
111
.banner .banner__controlArea > section {
112
margin: 0;
113
flex-direction: row;
114
flex-wrap: wrap;
115
width: 100%;
116
}
117
118
@media (min-width: 900px) {
119
.banner .banner__controlArea > section {
120
width:auto;
121
}
122
}
123
124
.banner .banner__controlArea .fadedText {
125
flex: 0 0 100%;
126
margin: 12px 0 0;
127
}
128
129
.banner .banner__controlArea .banner__moreContent {
130
margin-top: 0;
131
}
132
133
134
/* Generic elements (scoped with banner class to avoid side effects on other elements) */
135
.banner .baseText {
136
font-size: 13px;
137
line-height: 16px;
138
color: var(--font-color);
139
font-weight: 300;
140
}
141
142
/* link */
143
.banner .link {
144
color: var(--primary-color);
145
font-weight: 600;
146
text-decoration: none;
147
position: relative;
148
}
149
150
.banner .link:before {
151
content: '';
152
position: absolute;
153
bottom: 0;
154
left: 0;
155
right: 0;
156
height: 1px;
157
background-color: var(--primary-color);
158
bottom: 0px;
159
transition: transform 0.35s ease;
160
transform-origin: center center;
161
}
162
163
.banner .link:hover:before,
164
.banner .link:hover:focus
165
.banner .link:hover:active {
166
transform: scaleX(0);
167
}
168
169
/* button */
170
.banner .button {
171
border: 1px solid var(--primary-color);
172
border-radius: 4px;
173
margin: 0 24px 12px 0;
174
padding: 12px 20px;
175
background-color: transparent;
176
position: relative;
177
overflow: hidden;
178
flex: 0 0 100%;
179
}
180
181
.banner .button:before {
182
content: '';
183
position: absolute;
184
top: 0;
185
left: 0;
186
right: 0;
187
bottom: 0;
188
background-color: var(--primary-color);
189
transform-origin: center bottom;
190
transform: scaleY(0);
191
transition: transform 0.35s ease;
192
}
193
194
.banner .button:hover:before,
195
.banner .button:focus:before,
196
.banner .button:active:before {
197
transform: scaleY(1);
198
}
199
200
.banner .button .baseText {
201
font-size: 17px;
202
font-weight: 600;
203
line-height: 1;
204
color: var(--primary-color);
205
position: relative;
206
z-index: 1;
207
transition: color 0.35s ease;
208
}
209
210
.banner .button:hover .baseText,
211
.banner .button:focus .baseText,
212
.banner .button:active .baseText {
213
color: white;
214
}
215
216
.banner .button--filled {
217
background-color: var(--primary-color);
218
}
219
220
.banner .button--filled:before {
221
background-color: var(--background-color);
222
}
223
224
.banner .button--filled .baseText {
225
color: white;
226
}
227
228
.banner .button--filled:hover .baseText,
229
.banner .button--filled:focus .baseText,
230
.banner .button--filled:active .baseText {
231
color: var(--primary-color);
232
}
233
234
@media (min-width: 500px) {
235
.banner .button {
236
flex-basis: auto;
237
}
238
}
239
240
/* Tweak for iFrame height */
241
@media (min-width: 900px) {
242
.frame-root {
243
display: flex;
244
height: 100vh;
245
}
246
247
.frame-content {
248
display: flex;
249
align-items: flex-end;
250
height: 100%;
251
}
252
}
Copied!
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.
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

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.
If you have created your consent notice before Month, day, 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 into a specific ledger into our blockchain stack. We store the whole notice and the text altered, precise timestamp, account_id, consoleUserID and so on.
Last modified 3d ago