Running a WordPress site means balancing great user experience with compliance, especially when it comes to handling user consent. AesirX Analytics & Consent Management Platform (CMP) simplifies this process, helping you manage user consent efficiently while keeping your site compliant with privacy regulations.
One key feature of AesirX CMP is the consent modal - a crucial element that informs users about how their data will be handled. But why settle for a generic look when you can customize it to fit your site’s style? Customizing the consent modal allows you to ensure that it aligns with your site's design, creating a seamless and professional appearance.
In this guide, we’ll walk you through the process of customizing the consent modal for your WordPress site using AesirX Analytics & CMP. You’ll learn how to adjust its appearance through CSS, from font sizes and button colors to making it look good in dark mode. These easy-to-follow steps will help you tailor the consent modal to match your site's branding while keeping everything user-friendly and compliant.
Step 1: Install and Configure AesirX Analytics & CMP
1. Install the AesirX Analytics & CMP Plugin:
- In your WordPress dashboard, navigate to Plugins → Add New.
- Search for “AesirX Analytics”.
- Click Install Now and then Activate.
2. Create an AesirX Account and Obtain an Analytics License:
- Register on the AesirX Sign-Up Page. Note that you will be redirected to register for a Shield of Privacy (SoP) account, which acts as your AesirX Account ID and provides access to all AesirX solutions and licenses.
- Choose your Shield of Privacy ID.
- Select “First-Party Analytics” from the Solutions drop-down menu.
- Receive your license ID and confirmation email to complete the setup.
3. Configure AesirX Analytics:
- Go to Settings → AesirX Analytics in your WordPress dashboard.
- Configure the server setup (internal or external) and ensure that consent is required before data collection.
- Paste your solution key and click Save to apply changes.
4. Set Up Consent Templates:
AesirX supports two consent modes compatible with Google Consent Mode V2, but with enhanced compliance features:
- Simple Consent Mode: No data is collected or sent to any third parties until users provide explicit consent. This is ideal for strict GDPR and ePrivacy compliance.
- Default Template: Tags are preloaded with denied parameters and do not collect, store, or send any data until consent is obtained. This approach supports compliance while preparing for data collection after user consent.
Steps to Configure Consent Templates:
- Go to AesirX BI → Consent → Consent Templates.
- Input your Google Tag ID and Google Tag Manager ID (optional).
- Choose your preferred consent mode and customize the consent text.
- Click Save.
Step 2: Customize the Consent Modal Style
Once AesirX Analytics & CMP is set up, you can customize the style of the consent modal to better match your site’s branding. Follow these steps to apply custom CSS:
1. Access Custom CSS in WordPress:
- In your WordPress dashboard, go to Appearance → Customize → Additional CSS.
2. Add Your Custom CSS:
- Customize the Toast (Modal Window)
.aesirxconsent .toast {
--aesirxconsent-toast-font-size: 16px;
--aesirxconsent-toast-padding-x: 0.75rem;
--aesirxconsent-toast-padding-y: 0.5rem;
--aesirxconsent-toast-spacing: 1.5rem;
--aesirxconsent-toast-zindex: 1049;
}-
- font-size: Adjusts the text size within the consent modal.
- padding-x and padding-y: Sets the space inside the modal.
- spacing: Controls the distance between the modal and surrounding elements.
- z-index: Ensures the modal appears above other page elements.
- Customize the Buttons
.aesirxconsent .btn {
--aesirxconsent-btn-font-size: 16px;
--aesirxconsent-btn-padding-x: 0.75rem;
--aesirxconsent-btn-padding-y: 0.375rem;
--aesirxconsent-btn-font-weight: 400;
--aesirxconsent-btn-line-height: 1.5;
}-
- font-size: Adjusts the text size within the consent modal.
- padding-x and padding-y: Sets the space inside the modal.
- spacing: Controls the distance between the modal and surrounding elements.
- Customize Button Success Styles
.aesirxconsent .btn-success {
--aesirxconsent-btn-color: #000;
--aesirxconsent-btn-bg: #1ab394;
--aesirxconsent-btn-border-color: #1ab394;
--aesirxconsent-btn-hover-color: #000;
--aesirxconsent-btn-hover-bg: #3cbea4;
--aesirxconsent-btn-hover-border-color: #31bb9f;
--aesirxconsent-btn-focus-shadow-rgb: 22, 152, 126;
--aesirxconsent-btn-active-color: #000;
--aesirxconsent-btn-active-bg: #48c2a9;
--aesirxconsent-btn-active-border-color: #31bb9f;
--aesirxconsent-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--aesirxconsent-btn-disabled-color: #000;
--aesirxconsent-btn-disabled-bg: #1ab394;
--aesirxconsent-btn-disabled-border-color: #1ab394;
}-
- color: Sets the text color for the button in different states (normal, hover, active, disabled).
- bg: Changes the background color.
- border-color: Adjusts the border color.
- Dark Mode Customization (For Bootstrap Dark Mode)
[data-bs-theme=dark] .aesirxconsent {
color: #fff;
}This guarantees that the consent modal text color adjusts to the dark mode settings, improving readability.
- Handling CSS Specificity
If you find that your CSS changes are still being overridden, try using a more specific CSS selector:
body .aesirxconsent .toast {
//Customize css
}Improve Your User Experience with Custom Consent Modals
By following the steps outlined above, you can smoothly integrate and personalize AesirX Analytics & CMP on your WordPress site, providing both compliance and a user-friendly design. Tailoring the consent modal to fit your branding not only upgrades its appearance but also builds trust with your users, boosting the overall experience while meeting GDPR and ePrivacy requirements.
Next Steps: Discover More
Explore additional customization options, privacy tools, and advanced features that AesirX offers to further optimize your site. Visit the AesirX Analytics Documentation for text and video guides on how to utilize AesirX Analytics and CMP for your needs.
