Hostinger Website Builder does not include a native widget for age verification, but it can be achieved with the help of third-party tools or custom code.
Method 1 – Third-Party Widgets
Create an age verification pop-up using tools available online, for instance, AgeChecker.
Once you create the widget, you'll get its integration code. Copy and paste the code in the Custom code field of your website's integrations settings. Save the changes, update your website, and that's it!
The widget will be visible in the preview and live versions of your website (not in the editor).
Method 2 – Use Custom Code
All you need to do is the following:
Copy the Code
If you use Code 1, the banner will remember if a particular visitor is eligible (old enough) to access the website, meaning that the banner won't show up again the next time the same visitor tries opening the site.
To always show the banner, use Code 2.
Code 1 (to not repeatedly show the banner for eligible users)
<script>
const bannerText = 'This website contains explicit content. Are you over 20?';
const confirmationButtonText = 'Yes';
const declineButtonText = 'No';
const mainDiv = document.createElement('div');
const divForButtons = document.createElement('div');
const randomText = document.createElement('p');
const randomOver = document.createElement('p');
const randomUnder = document.createElement('p');
const blackout = document.createElement('div');
let overAge = false;
blackout.id = 'blackout';
divForButtons.appendChild(randomOver);
divForButtons.appendChild(randomUnder);
mainDiv.appendChild(randomText);
mainDiv.appendChild(divForButtons);
randomText.innerText = bannerText;
randomOver.innerText = confirmationButtonText;
randomUnder.innerText = declineButtonText;
randomText.id = 'ageText';
randomOver.classList.add('ageButton');
randomUnder.classList.add('ageButton');
mainDiv.id = 'ageVerificationBanner';
if (!localStorage.getItem('overAge')) {
document.body.appendChild(blackout);
document.body.appendChild(mainDiv);
document.body.style.overflow = 'hidden';
}
randomOver.addEventListener('click', function () {
document.body.style.overflow = 'visible';
document.querySelector('#ageVerificationBanner').style.display = 'none';
document.querySelector('#blackout').style.display = 'none';
overAge = true;
localStorage.setItem('overAge', overAge);
})
randomUnder.addEventListener('click', function () {
window.location = 'https://google.com';
})
</script>
<style>
#blackout {
background-color: rgba(0, 0, 0, 0.3);
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 9999;
}
div#ageVerificationBanner {
position: absolute;
z-index: 99999;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
background-color: #DADADA;
padding: 50px;
border: solid 2px #606060;
border-radius: 10px;
}
div#ageVerificationBanner div {
display: flex;
justify-content: center;
}
p.ageButton {
padding: 5px 10px;
margin: 0 10px;
cursor: pointer;
background-color: #AFAFAF;
border-radius: 5px;
border: solid 2px #606060;
}
p#ageText {
text-align: center;
padding-bottom: 20px;
}
@media screen and (max-width:920px) {
div#ageVerificationBanner {
width: 300px;
padding: 20px;
}
p.ageButton {
font-size: 14px;
}
}
</style>
Code 2 (to always show the banner)
<script data-rehype>
const mainDiv = document.createElement('div');
const divForButtons = document.createElement('div');
const randomText = document.createElement('p');
const randomOver = document.createElement('p');
const randomUnder = document.createElement('p');
const blackout = document.createElement('div');
blackout.id = 'blackout';
divForButtons.appendChild(randomOver);
divForButtons.appendChild(randomUnder);
mainDiv.appendChild(randomText);
mainDiv.appendChild(divForButtons);
randomText.innerText = 'This site contains explicit content.';
randomOver.innerText = 'I am over 18';
randomUnder.innerText = 'I am under 18';
randomText.id = 'ageText';
randomOver.classList.add('ageButton');
randomUnder.classList.add('ageButton');
mainDiv.id = 'ageVerificationBanner';
document.body.appendChild(blackout);
document.body.appendChild(mainDiv);
document.body.style.overflow = 'hidden';
randomOver.addEventListener('click', function () {
document.body.style.overflow = 'visible';
document.querySelector('#ageVerificationBanner').style.display = 'none';
document.querySelector('#blackout').style.display = 'none';
})
randomUnder.addEventListener('click', function () {
window.location = 'https://google.com';
})
</script>
<style>
#blackout {
background-color: rgba(0, 0, 0, 0.3);
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 9999;
}
div#ageVerificationBanner {
position: absolute;
z-index: 99999;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
background-color: #DADADA;
padding: 50px;
border: solid 2px #606060;
border-radius: 10px;
}
div#ageVerificationBanner div {
display: flex;
justify-content: center;
}
p.ageButton {
padding: 5px 10px;
margin: 0 10px;
cursor: pointer;
background-color: #AFAFAF;
border-radius: 5px;
border: solid 2px #606060;
}
p#ageText {
text-align: center;
padding-bottom: 20px;
}
@media screen and (max-width:920px) {
div#ageVerificationBanner {
width: 300px;
padding: 20px;
}
p.ageButton {
font-size: 14px;
}
}
</style>
Customize the Code
The text for the banner can be changed in these lines:
const bannerText = 'This website contains explicit content. Are you over 20?';
const confirmationButtonText = 'Yes';
const declineButtonText = 'No';
If you know CSS, you may also change the banner appearance, e.g., font size, colors, etc.
Paste the Code
Within the builder, go to your website's Settings → Integrations, and paste the code in the Custom code field. Then, save the changes and update your website.
The banner shows up in the preview mode and online; it's not visible in the editor.