All Collections
Website Builder
Integrations
Website Builder: Age Verification Banner
Website Builder: Age Verification Banner

Learn how to add a banner for age verification to your website created with Hostinger Website Builder

Updated over a week ago

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:

  1. Copy the preferred code given below

  2. Customize the code

  3. Paste it to the Custom code field in your website's integrations settings, save the changes, and update your site

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 SettingsIntegrations, 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.

Did this answer your question?