An Age Verification Banner is essential for websites that contain age-restricted content, such as alcohol, tobacco, or adult-related products. This banner asks visitors to confirm their age before entering the site, ensuring compliance with legal requirements and protecting younger users from inappropriate content. Here’s a step-by-step guide on how to add an age verification banner to your website using OzSpeed’s hPanel.
Step 1: Design Your Age Verification Banner #
Plan the content of your age verification banner. It should include:
- A message (e.g., “You must be 18 or older to enter this site”).
- Two buttons: Confirm (Yes, I am 18+) and Exit (No, I am under 18).
- A link to your Privacy Policy or Terms of Use.
Tip: #
- Keep the message clear and straightforward to avoid user confusion.
Step 2: Create the HTML Structure #
Use the following code snippet to create the basic structure of the age verification banner.
Example HTML Code: #
htmlCopy code<!-- Age Verification Banner HTML -->
<div id="age-verification-banner">
<div class="banner-content">
<h2>Age Verification</h2>
<p>You must be 18 years or older to enter this site. Please confirm your age.</p>
<button id="confirm-age">Yes, I am 18+</button>
<button id="exit-site">No, I am under 18</button>
</div>
</div>
Example CSS Code: #
cssCopy code/* Age Verification Banner Styles */
#age-verification-banner {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
}
.banner-content {
text-align: center;
max-width: 400px;
padding: 20px;
background-color: #333;
border-radius: 10px;
}
#confirm-age, #exit-site {
margin: 10px;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
#confirm-age {
background-color: #4caf50;
color: #fff;
}
#exit-site {
background-color: #f44336;
color: #fff;
}
Tip: #
- Customize the colors and styles to match your website’s branding.
Step 3: Add JavaScript for Age Verification Functionality #
This JavaScript code handles user interactions and stores the age confirmation in localStorage.
Example JavaScript Code: #
htmlCopy code<script>
// Check if the user has already confirmed their age
if (localStorage.getItem('ageConfirmed') !== 'true') {
document.getElementById('age-verification-banner').style.display = 'flex';
}
// Handle "Yes, I am 18+" button click
document.getElementById('confirm-age').addEventListener('click', function() {
localStorage.setItem('ageConfirmed', 'true');
document.getElementById('age-verification-banner').style.display = 'none';
});
// Handle "No, I am under 18" button click
document.getElementById('exit-site').addEventListener('click', function() {
window.location.href = 'https://www.google.com';
});
</script>
Tip: #
- Redirect users who click “No, I am under 18” to a neutral site like Google or a suitable alternative page.
Step 4: Add the Age Verification Code Using hPanel #
To display the age verification banner on your website, add the HTML, CSS, and JavaScript code using OzSpeed’s hPanel.
How to Add the Code: #
- Log in to hPanel at ozspeed.com.au.
- Go to Website Settings > Custom Code.
- Paste the HTML code in the Body Code section.
- Paste the CSS code in the Custom CSS section.
- Paste the JavaScript code in the Footer Code section.
- Click Save and Publish your changes.
Tip: #
- Ensure the banner is visible on all pages, especially the homepage and landing pages.
Step 5: Test the Age Verification Banner #
Before going live, thoroughly test the age verification banner to ensure it functions as expected.
How to Test: #
- Open your website in a new browser tab or incognito window.
- Confirm that the banner appears immediately when the page loads.
- Click the Yes, I am 18+ button and verify that the banner disappears.
- Refresh the page to ensure the banner does not reappear after confirmation.
- Click the No, I am under 18 button to confirm the redirection.
Tip: #
- Test the banner on multiple devices (desktop, mobile, tablet) to ensure it is responsive.
Step 6: Customize the Age Verification Experience (Optional) #
You can enhance the user experience by adding animations or customizing the banner further.
Example: Fade-In Animation for the Banner #
cssCopy code/* Fade-In Animation */
#age-verification-banner {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Tip: #
- Use animations sparingly to avoid slowing down your website.
Troubleshooting Tips #
- Banner Not Displaying:
- Verify that the HTML, CSS, and JavaScript code is correctly added in the respective sections of hPanel.
- Clear your browser cache and try again.
- Banner Not Hiding After Confirmation:
- Ensure that the
localStorage
key (ageConfirmed
) is being set correctly in the JavaScript code. - Check for any JavaScript errors in the browser’s console (F12 > Console tab).
- Ensure that the
- Redirection Not Working:
- Verify that the URL specified in the
exit-site
button click event is correct.
- Verify that the URL specified in the
Additional Tips: #
- Keep the Message Clear: Use simple language to avoid confusing visitors.
- Update Your Privacy Policy: Mention the age verification process in your Privacy Policy to inform users about how their data is handled.
- Regularly Test the Banner: Ensure that the banner works properly after making updates or adding new features to your website.