Helpdesk
/
Wp Edition

How to customise the My Agile Privacy cookie banner

This guide will help you configure the Cookie Banner offered by My Agile Privacy according to your design requirements.
The main customisation possibilities available are described below.

Graphic customisation of the Cookie Banner

The cookie banner can be configured to match the design of your site. These are some of the main customisation options:

  • Positioning: vertical (bottom or centre of the page) and horizontal (left, centre or right).
  • Size: you can choose from 3 different widths, to occupy a larger or smaller portion of the window.
  • Colours: customisable for background, text and buttons.
  • Typography: adjustable font size and line spacing.
  • Curvature radius: to define rounded corners of graphic elements.

You can display a real-time preview to check changes before publishing.
These options are available by clicking on the My Agile Privacy menu in the administration of your WordPress site.

cookie banner options - part 1

cookie banner options - part 2

cookie banner options - part 3

Customising the Cookie Banner: Custom CSS and Wrappers

If you want to customise the banner beyond the possibilities offered by the available options, we have thought of that too.
Simply go to My Agile Privacy > ‘Advanced’ tab and you will find two options that will allow you advanced customisation.

Important note: We do not recommend using the settings described below if you are not familiar with the basics of CSS, the style sheets for graphic customisation of html pages.

Custom CSS option

This option allows you to write custom CSS that will be inserted into your pages.
The My Agile Privacy banner cookie has a specific ID, which is my-agile-privacy-notification-area.

By targeting this specific ID, or the elements it contains, it is possible to carry out a finer and deeper customisation of the appearance of the banner itself, and of texts, buttons, etc.

custom css option for custom css insertion

The details of IDs and classes of internal elements can be seen from the browser's javascript console by selecting the banner cookie and analysing the DOM structure.

Remember that the CSS code you write here will be embedded in all pages of the site as long as My Agile Privacy is active.

CSS Wrapping option

This option allows you, in combination with the previous option, to customise the pages displaying the policy texts.
In fact, by ticking the option, the policy texts inserted via shortcode will be interceptable via a specific CSS selector, the myagileprivacy_text_wrapper class.

option for wrapping css of policy texts

The addition of the class makes it possible to customise the appearance of policy texts via CSS, e.g. by inserting a background colour, adjusting size and font, etc.
The customisation CSS can be inserted within the field seen above, Custom CSS.

Customising texts

The Cookie Banner texts can be edited by accessing the My Agile Privacy > Texts and Translations menu.
The editing system allows you to see in real time how the banner looks after the text changes.

By selecting the desired text, you can customise it to suit your needs.
These customisations are available individually for all languages supported by My Agile Privacy, and provided for in the plan in use.

text customization options - part 1

text customization options - editing detail

Important note: it is advisable to consult your privacy advisor before making any changes to texts, in order to avoid any risk of non-compliance.

Resetting texts to default settings

What if I want to revert to the original texts?
You can do this by clicking on the appropriate option 'Do you want to revert to the default contents? Click here to reset the current language'.
Again, you can reset the texts for each individual language, remembering to save the settings after resetting to make the changes effective.

default content reset option

 

How to show a warning message to the user for non-accepted cookies

My Agile Privacy allows you to show the user warning messages if specific cookies have not been accepted.
This possibility makes it possible, for example, to let the user know that the submission of a contact form may fail if the Google ReCaptcha cookie has not been accepted, or that the newsletter form (included via external code) is not visible if the relevant cookie is not accepted, etc.

It is possible to display the message in specific places on the pages: it is a matter of inserting a block of html code.

The message, which is automatically hidden when the relevant cookie is accepted, looks like this:

Warning: your cookie choices do not allow the display of this content. Click here to review your preferences.

If you click on the message, the cookie banner will be shown again and you can change your preferences if you wish.

How to create custom messages for specific cookies

You can create a custom message that is tied to a specific cookie, and therefore visible when that cookie has not been accepted.
The creation is very simple and can be done in a few minutes.

1. Identify the cookie for which you want to show the message
For example, if I want to show a message when the Gooogle ReCaptcha cookie has not been accepted, I will go to My Agile Privacy > cookie list
and among the cookies detected I will enter the Google RECAPTCHA cookie.

2. Copy the API KEY of the cookie
All cookies have a specific API KEY indicated within the cookie settings.
This API KEY will be used to link the warning message to that individual cookie.

In the case of the Gooogle RECAPTCHA cookie, the API KEY is google_recaptcha

cookie api key

3. Customise the message code
This is the html code of the warning message below:

<div class="map_custom_notify map_api_key_APIKEYHERE showConsentAgain" style="display: block;">
 Warning: Your cookie choices do not allow this element to be displayed. Click here to review your preferences.
</div>

You will have to customise the code by replacing APIKEYHERE with the API KEY of the cookie for which you want to display the message
Likewise, if necessary, you can customise the message inside For example, for the Gooogle RECAPTCHA cookie, it makes more sense to inform the user that the form submission may not work, instead of mentioning ‘displaying the element’.

The message code for the Google RECAPTCHA cookie will therefore be customised as follows

<div class="map_custom_notify map_api_key_google_recaptcha showConsentAgain" style="display: block;">
Warning: your cookie choices do not allow the form to be submitted. Click here to review your preferences.
</div>

Note how APIKEYHERE has been replaced with google_recaptcha, and the message has been changed to fit the context

Util resources

For a complete configuration of My Agile Privacy you can consult these resources

 

Navigazione rapida
rely on our experts for a professional installation service
a Formula Agile SRL project
VAT ID 04524510403 - REA: RN418884
Viale Medici 16/A, 47922 Rimini (RN) - Italy
Share capital 12'000€
PEC formulaagilesrl[at]legalmail.it
For assistance: info[at]myagileprivacy.com
GDPR and privacy present complexities that extend beyond achieving website compliance. Compliance obligations span across all business aspects and necessitate expert analysis.
When it comes to implementing Banners and Policies, trust My Agile Privacy—the only solution that excludes unnecessary implementations not mandated by regulations.
Logo CMP partner GoogleLogo CMP partner GoogleLogo IAB Europe approved
My Agile Privacy

This site uses technical and profiling cookies. 

You can accept, reject, or customize the cookies by clicking the desired buttons. 

By closing this notice, you will continue without accepting. 

In addition, this site installs Google Analytics version 4 (GA4), Facebook Remarketing with anonymous data transmission via proxy. 

By giving your consent, the data will be sent anonymously, thus protecting your privacy.