{"id":10049,"date":"2024-12-13T11:44:23","date_gmt":"2024-12-13T10:44:23","guid":{"rendered":"https:\/\/www.myagileprivacy.com\/?post_type=helpdesk&#038;p=10049"},"modified":"2026-03-31T21:23:27","modified_gmt":"2026-03-31T19:23:27","slug":"how-to-customise-the-my-agile-privacy-cookie-banner","status":"publish","type":"helpdesk","link":"https:\/\/www.myagileprivacy.com\/en\/helpdesk\/how-to-customise-the-my-agile-privacy-cookie-banner\/","title":{"rendered":"How to customise the My Agile Privacy\u00ae cookie banner"},"content":{"rendered":"<p>This guide will help you configure the <a href=\"https:\/\/www.myagileprivacy.com\/en\/\" target=\"_blank\" rel=\"noopener\">Cookie Banner<\/a> offered by My Agile Privacy<sup>\u00ae<\/sup> according to your design needs.<br \/>\nBelow you'll find the main available customisation options.<\/p>\n<h2>Graphic Customisation of the Cookie Banner<\/h2>\n<p>The cookie banner can be tailored to match your site's look and feel. Here are some key options:<\/p>\n<ul>\n<li><strong>Positioning<\/strong>: vertical (bottom or centre of the page) and horizontal (left, centre, or right).<\/li>\n<li><strong>Size<\/strong>: choose from 3 different widths to fit your window.<\/li>\n<li><strong>Colours<\/strong>: fully customisable background, text, and button colours.<\/li>\n<li><strong>Typography<\/strong>: adjustable font size and line spacing.<\/li>\n<li><strong>Curvature radius<\/strong>: set rounded corners for graphical elements.<\/li>\n<\/ul>\n<p>A real-time preview lets you view changes before going live.<br \/>\nAll options are available via the My Agile Privacy<sup>\u00ae<\/sup> menu in your WordPress admin area.<br \/>\n<img decoding=\"async\" class=\"aligncenter wp-image-10029 size-full\" src=\"https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/banner-options-1.jpg\" sizes=\"(max-width: 1000px) 100vw, 1000px\" srcset=\"https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/banner-options-1.jpg 1000w, https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/banner-options-1-300x157.jpg 300w, https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/banner-options-1-768x402.jpg 768w\" alt=\"cookie banner options - part 1\" width=\"1000\" height=\"523\" \/><br \/>\n<img decoding=\"async\" class=\"aligncenter wp-image-10031 size-full\" src=\"https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/banner-options-2.jpg\" sizes=\"(max-width: 1000px) 100vw, 1000px\" srcset=\"https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/banner-options-2.jpg 1000w, https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/banner-options-2-300x168.jpg 300w, https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/banner-options-2-768x431.jpg 768w\" alt=\"cookie banner options - part 2\" width=\"1000\" height=\"561\" \/><br \/>\n<img decoding=\"async\" class=\"aligncenter wp-image-10033 size-full\" src=\"https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/banner-options-3.jpg\" sizes=\"(max-width: 1000px) 100vw, 1000px\" srcset=\"https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/banner-options-3.jpg 1000w, https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/banner-options-3-300x150.jpg 300w, https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/banner-options-3-768x383.jpg 768w\" alt=\"cookie banner options - part 3\" width=\"1000\" height=\"499\" \/><\/p>\n<h2>Customising the Cookie Banner: Custom CSS and Wrappers<\/h2>\n<p>If you wish to go beyond preset options, My Agile Privacy<sup>\u00ae<\/sup> allows for advanced customisation.<br \/>\nGo to <em>My Agile Privacy<sup>\u00ae<\/sup> &gt; Advanced<\/em> tab and find two advanced settings.<br \/>\n<em><strong>Important note:<\/strong> Do not use these settings unless you're familiar with CSS and styling HTML pages.<\/em><\/p>\n<h3>Custom CSS Option<\/h3>\n<p>Write your own custom CSS, injected into all your site\u2019s pages.<br \/>\nThe banner has a specific ID: <em>my-agile-privacy-notification-area<\/em>. Target that ID or inner elements for deep customisation of the banner, text, buttons, etc.<br \/>\n<img decoding=\"async\" class=\"aligncenter wp-image-10041 size-full\" src=\"https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/custom-css-option.jpg\" sizes=\"(max-width: 1000px) 100vw, 1000px\" srcset=\"https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/custom-css-option.jpg 1000w, https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/custom-css-option-300x79.jpg 300w, https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/custom-css-option-768x201.jpg 768w\" alt=\"custom css option for custom css insertion\" width=\"1000\" height=\"262\" \/><br \/>\nYou can inspect IDs\/classes in the browser console on the banner.<br \/>\nAll CSS in this field is loaded site-wide while My Agile Privacy<sup>\u00ae<\/sup> is active.<\/p>\n<h3>CSS Wrapping Option<\/h3>\n<p>Ticking this option applies a <em>.myagileprivacy_text_wrapper<\/em> class to policy texts displayed via shortcode, making it easy to style background, font, size and more via CSS.<br \/>\n<img decoding=\"async\" class=\"aligncenter wp-image-10043 size-full\" src=\"https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/custom-wrapper-option.jpg\" sizes=\"(max-width: 1000px) 100vw, 1000px\" srcset=\"https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/custom-wrapper-option.jpg 1000w, https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/custom-wrapper-option-300x24.jpg 300w, https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/custom-wrapper-option-768x61.jpg 768w\" alt=\"option for wrapping css of policy texts\" width=\"1000\" height=\"80\" \/><br \/>\nPut your custom style rules in the same \u201cCustom CSS\u201d field as above.<\/p>\n<h2>Customising Texts<\/h2>\n<p>You can edit every Cookie Banner text via <strong>My Agile Privacy<sup>\u00ae<\/sup> &gt; Texts and Translations<\/strong>.<br \/>\nYou\u2019ll see real-time previews, and can customise text for every supported language in your plan.<br \/>\n<img decoding=\"async\" class=\"aligncenter wp-image-10035 size-full\" src=\"https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/text-customization-1.jpg\" sizes=\"(max-width: 1000px) 100vw, 1000px\" srcset=\"https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/text-customization-1.jpg 1000w, https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/text-customization-1-300x111.jpg 300w, https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/text-customization-1-768x285.jpg 768w\" alt=\"text customization options - part 1\" width=\"1000\" height=\"371\" \/><br \/>\n<img decoding=\"async\" class=\"aligncenter wp-image-10037 size-full\" src=\"https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/text-customization-2.jpg\" sizes=\"(max-width: 1000px) 100vw, 1000px\" srcset=\"https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/text-customization-2.jpg 1000w, https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/text-customization-2-300x137.jpg 300w, https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/text-customization-2-768x351.jpg 768w\" alt=\"text customization options - editing detail\" width=\"1000\" height=\"457\" \/><br \/>\n<strong>Important:<\/strong> Consult your privacy advisor before changing legal texts, to avoid any risk of non-compliance.<\/p>\n<h3>Resetting Texts to Default<\/h3>\n<p>To revert to original texts, click <em>'Do you want to revert to the default contents? Click here to reset the current language'<\/em>. You can reset for each language, but remember to save your changes afterwards.<br \/>\n<img decoding=\"async\" class=\"aligncenter wp-image-10039 size-large\" src=\"https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/text-reset-1024x404.png\" sizes=\"(max-width: 1024px) 100vw, 1024px\" srcset=\"https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/text-reset-1024x404.png 1024w, https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/text-reset-300x118.png 300w, https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/text-reset-768x303.png 768w, https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/text-reset-1536x606.png 1536w, https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/12\/text-reset.png 1920w\" alt=\"default content reset option\" width=\"1024\" height=\"404\" \/><\/p>\n<h2>How to customize Revisit Widget<\/h2>\n<p>Users must be able to change their cookie choices at any time.<br \/>\nCustomize or hide the revisit widget from the \"CONSENT REVIEW WIDGET\" tab. If you choose to hide it, make sure you add an accessible link or button (e.g. in your footer) so users can reopen the consent banner\u2014instructions are available within the tab.<\/p>\n<p><strong>Please note:<\/strong> if you disable the consent widget, you need to add the dedicated shortcode indicated in the tab instructions, so that users can review their choices at any time. If the re-consent widget is disabled and the shortcode has not been added, the re-consent widget will still be displayed. This is a way to help you keep your site compliant.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-15281 size-full\" src=\"https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/01\/widget_consent_en_2026.png\" alt=\"\" width=\"1005\" height=\"509\" srcset=\"https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/01\/widget_consent_en_2026.png 1005w, https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/01\/widget_consent_en_2026-300x152.png 300w, https:\/\/www.myagileprivacy.com\/wp-content\/uploads\/2024\/01\/widget_consent_en_2026-768x389.png 768w\" sizes=\"(max-width: 1005px) 100vw, 1005px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>How to show a warning message for non-accepted cookies<\/h2>\n<p>My Agile Privacy<sup>\u00ae<\/sup> lets you display warning messages if a user has not accepted specific cookies.<br \/>\nThis is useful for informing users why a feature (e.g., a contact form with Google ReCaptcha) doesn't work, or a newsletter form isn\u2019t shown.<br \/>\nTo display a message, add an html block where needed.<br \/>\nThe message (which disappears when the cookie is accepted) looks like this:<\/p>\n<div class=\"map_custom_notify\" style=\"display: block;\">Warning: your cookie choices do not allow the display of this content. Click here to review your preferences.<\/div>\n<p>Clicking the message will re-open the banner and let the user change preferences.<\/p>\n<h3>How to create custom messages for specific cookies<\/h3>\n<p>You can link a specific message to a particular cookie. Here\u2019s how:<\/p>\n<ol>\n<li>Identify the cookie in <em>My Agile Privacy<sup>\u00ae<\/sup> &gt; cookie list<\/em> (example: Google RECAPTCHA).<\/li>\n<li>Copy its API KEY from the cookie settings (e.g., <strong>google_recaptcha<\/strong>).<\/li>\n<li>Customise this code by replacing APIKEYHERE:<\/li>\n<\/ol>\n<pre style=\"width: 100%;\"><code class=\"language-markup\" data-line=\"\">&lt;div class=&quot;map_custom_notify map_api_key_APIKEYHERE showConsentAgain mapShowItem&quot;&gt;\nWarning: Your cookie choices do not allow this element to be displayed. Click here to review your preferences.\n&lt;\/div&gt;<\/code><\/pre>\n<p>Replace APIKEYHERE with the cookie\u2019s actual key.<br \/>\nCustomise the warning text as needed.<\/p>\n<p>Example for Google RECAPTCHA:<\/p>\n<pre><code class=\"language-markup\" data-line=\"\">&lt;div class=&quot;map_custom_notify map_api_key_google_recaptcha showConsentAgain mapShowItem&quot;&gt;\nWarning: your cookie choices do not allow the form to be submitted. Click here to review your preferences.\n&lt;\/div&gt;<\/code><\/pre>\n<h2>Useful Resources<\/h2>\n<p>For a complete My Agile Privacy<sup>\u00ae<\/sup> configuration, check out:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.myagileprivacy.com\/en\/helpdesk\/how-to-automatically-detect-and-block-cookies-with-cookie-shield\/\" target=\"_blank\" rel=\"noopener\">How to automatically detect and block cookies with Cookie Shield<\/a><\/li>\n<li><a href=\"https:\/\/www.myagileprivacy.com\/en\/helpdesk\/how-to-make-contact-forms-gdpr-compliant\/\" target=\"_blank\" rel=\"noopener\">How to make contact forms GDPR-compliant<\/a><\/li>\n<\/ul>\n","protected":false},"template":"","categoria-helpdesk":[42],"versione-plugin":[30],"class_list":["post-10049","helpdesk","type-helpdesk","status-publish","hentry","categoria-helpdesk-cookie-banner-en","versione-plugin-wp-edition"],"acf":{"helpdesk_in_evidenza":false,"helpdesk_ordine":"","elenco_faq_articolo":[{"domanda":"What graphic customization options are available for the Cookie Banner?","risposta":"The Cookie Banner can be customized for positioning (vertically at the bottom or center of the page, or horizontally to the left, center, or right), size (3 available widths), colors (background, text, and buttons), typography (font size and line spacing), and corner radius for rounded edges on the banner and buttons. A real-time preview is available before publishing."},{"domanda":"How do you access advanced customization options with custom CSS?","risposta":"For advanced customization, go to My Agile Privacy\u00ae &gt; Advanced and use the custom CSS and wrapping options. The banner has a specific ID called 'my-agile-privacy-notification-area' that can be used to target the banner and its internal elements. This feature is not recommended for users without basic CSS knowledge."},{"domanda":"Is it possible to edit the Cookie Banner texts, and how?","risposta":"Yes, every banner text can be edited from the My Agile Privacy\u00ae &gt; Texts and Translations section. You can immediately see a preview and edit the texts for each active language in the plan. It is recommended to consult your privacy advisor before modifying the texts to avoid losing compliance."},{"domanda":"How do you restore the original Cookie Banner texts?","risposta":"The original texts can be restored using the option 'Do you want to go back to the default content? Click here to reset the current language'. After performing the reset, you need to save the changes."},{"domanda":"What happens if the consent revisitation widget is disabled without inserting the dedicated shortcode?","risposta":"If the re-consent widget is disabled and the shortcode indicated in the tab instructions has not been inserted, the re-consent widget will still be displayed automatically. This mechanism is designed to help keep the site compliant, always ensuring users the ability to review their choices."},{"domanda":"How do you display a warning message for a specific cookie that has not been accepted, such as Google reCAPTCHA?","risposta":"You need to locate the cookie in My Agile Privacy\u00ae &gt; cookie list, copy its API KEY (e.g.: google_recaptcha), and insert an HTML block with the class 'map_custom_notify map_api_key_APIKEYHERE showConsentAgain mapShowItem', replacing APIKEYHERE with the cookie's key. For example, for reCAPTCHA the class will be 'map_api_key_google_recaptcha'. The text message can be freely customized."},{"domanda":"What is the purpose of the CSS Wrapping option in My Agile Privacy\u00ae?","risposta":"If the CSS Wrapping option is enabled, the policy texts published via shortcode will receive the wrapper '.myagileprivacy_text_wrapper'. This allows you to customize color, font, size, and other styles via CSS. The CSS rules must be entered in the 'Custom CSS' field."}]},"_links":{"self":[{"href":"https:\/\/www.myagileprivacy.com\/en\/wp-json\/wp\/v2\/helpdesk\/10049","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.myagileprivacy.com\/en\/wp-json\/wp\/v2\/helpdesk"}],"about":[{"href":"https:\/\/www.myagileprivacy.com\/en\/wp-json\/wp\/v2\/types\/helpdesk"}],"wp:attachment":[{"href":"https:\/\/www.myagileprivacy.com\/en\/wp-json\/wp\/v2\/media?parent=10049"}],"wp:term":[{"taxonomy":"categoria-helpdesk","embeddable":true,"href":"https:\/\/www.myagileprivacy.com\/en\/wp-json\/wp\/v2\/categoria-helpdesk?post=10049"},{"taxonomy":"versione-plugin","embeddable":true,"href":"https:\/\/www.myagileprivacy.com\/en\/wp-json\/wp\/v2\/versione-plugin?post=10049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}