Create a notice for a website

In the next steps below, you will learn how to create a web notice. A notice is the WebApp that you will implement on your website. ( It's almost the same process for iOS and Android )

Before creating your notice, you need to have a valid source declared in the backoffice. 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.

  • Source: Select the source you want to attach the notice. A notice is always linked to one source. If you want to create a notice for a mobile app, read the dedicated page: For iOS / For Android

  • 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

  • Additional CSS code: See the dedicated section for customization

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

  • CTAs available in Banner: Choose the buttons and the orders.

  • Use Google's Additional Consent : Switch to on if you want to use this https://support.google.com/admanager/answer/9681920?hl=en

  • Disable Success Screen : Swich to On if you want to deactivate the following screen when user enter granular choice :

Customize your notice

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.

Following the latest declarations of the CNIL, we insist that you do not favour 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.

Suite aux dernières déclaration de la CNIL, nous insistons pour que vous

ne privilégier pas un CTA versus un autre. Le régulateur Français est particulièrement attentif a ce sujet. Si par exemple vous changer le style ( background, taille ..) d'un bouton Accepter, vous devez appliquer le meme style au bouton Configurer ou Refuser.

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.

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

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.

Customize all fields

Each field matches an area of your notice. You can modify them. But you can also reset the default texts by clicking on "Reset to default".

The title of the IAB purposes can't be changed. It's due to the IAB TCF compatibility with their Term & Privacy policies. But you can change the description.

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.

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.

Getting the App Key

In the left menu, click on Notices.

Find the line of the notice you want to implement. Click on this line, a pop-up window appears with the resource URL and HTML script tag.

Preview and test your notice

Click on the Preview button of the matching notice you want to preview.

  • Click on ADD CURRENT PAGE (Once it's done, the button become INITIALIZE)

  • Click on INITIALIZE, then the CMP is shown and you can play with it

Next step : IMPLEMENTATION

Go to the next step below to learn how to implement your notice on your Website.