PoPIA Consent Popup module
Add a POPIA Consent Popup without a plugin! This guide shows how to add a simple code-based banner to your website for user consent.
⚠️ Disclaimer
This guide is provided for informational purposes only to help small business owners understand standard practices of PoPIA Compliancy. It should not be considered legal advice. For specific compliance or legal concerns, please consult a qualified professional.
Index
What is PoPIA Consent
Why you need user consent
Copy the code
Frequently Asked Questions
Pro Tips
Useful Links
What is a POPIA Consent Popup Module?
A POPIA Consent Popup is a banner or popup that informs users your website collects personal information (like via forms, cookies, or contact tools) and requests their consent. It’s a way to notify users about data collection in compliance with South Africa’s Protection of Personal Information Act (POPIA).
It usually appears when a user first visits the website and includes a short message with a link to your Privacy or Cookie Policy and a button to acknowledge or accept.
Why You Need a POPIA Consent Popup Module
If your website collects any form of personal information—such as names, emails, or tracking data—you’re required under POPIA to inform users and get their consent.
A consent popup:
- Builds trust with your visitors
- Shows transparency in how data is handled
- Helps align your website with privacy expectations
- Can improve compliance with platforms like Google or Facebook
Even if you’re not running an online store, something as simple as a contact form or embedded video may be collecting personal info. A POPIA Consent Popup shows you take user privacy seriously.
PoPIA Consent Popup Code
Paste this popup code in Divi > Theme Options > Integration > Head section
If you don’t have Divi, use a plugin like “Header and Footer Scripts”
- Install the plugin “Insert Headers and Footers” by WPCode or similar.
- Go to Settings > Insert Headers and Footers.
- Paste the popup code below into the “Header” section (for scripts that go in
<head>) - Save changes.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Popup container */
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 499;
}
.popup-content {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
text-align: center;
max-width: 400px;
}
.close-btn {
background: green;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="consentPopup" class="popup" style="display: none;">
<div class="popup-content">
<p>We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By using our website you consent to the use of our Cookie and Privacy Policy as well as our Terms and Conditions which can be found at the bottom of every page.</p>
<button class="close-btn" onclick="closePopup()">I Accept</button>
</div>
</div>
<script>
function closePopup() {
document.getElementById('consentPopup').style.display = 'none';
localStorage.setItem('popupLastShown', Date.now()); // Store current timestamp
}
function shouldShowPopup() {
let lastShown = localStorage.getItem('popupLastShown');
let oneHour = 60 * 60 * 1000; // 1 hour in milliseconds
if (!lastShown || (Date.now() - lastShown) > oneHour) {
document.getElementById('consentPopup').style.display = 'flex';
}
}
document.addEventListener("DOMContentLoaded", shouldShowPopup);
</script>
</body>
Click here to learn how to create Child Theme for Divi Themes
Frequently Asked Questions
Have Questions of your own? Contact us
💡 Pro Tips
Use child theme for styles.
Draft and Publish Privacy Policy
Draft and Publish Cookie Policy
Draft and Publish Terms & Conditions
Have a Cookie consent popup module
