How to Add Age Verification in Hostinger Website Builder

Adding age verification to your website is crucial if you want to ensure compliance with regulations regarding age-sensitive content. In this guide, I’ll walk you through the steps to add an age verification popup to your Hostinger Website Builder site.

Step-by-Step Guide

1. Access Your Website Settings First, log in to your Hostinger account and navigate to your website’s homepage in the Hostinger Website Builder. From here, go to the website settings.

2. Click on Integrations In the settings menu, click on the “Integrations” option. This is where you will add the necessary code for the age verification popup.

3. Add the Code Add this long code to your website’s integration settings.

<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>

4. Save and Update After adding the code, don’t forget to save your changes. Next, update your website to ensure the new settings take effect.

5. View and Customize Now, view your website live to see the age verification popup in action. If you need to edit the text of the popup, follow these steps:

• Copy the existing text from the popup.
• Return to the custom code section.
• Use the find function (Ctrl+F) to locate the text within the code.
• Edit the text as needed and save your changes again.

Final Touches

That’s it! You’ve successfully added an age verification popup to your Hostinger Website Builder site. This simple integration helps protect your content and ensures that visitors are appropriately verified before accessing your site.

Free Courses

Before you go, I have something special for you. I offer two free online video courses:

1. Hostinger Hosting and WordPress Management
2. Using Hostinger Website Builder to Create Basic Websites or Online Shops

You can access both courses for free by clicking the link in the description.

If you found this guide helpful, give it a thumbs up and subscribe to my channel for more tutorials. If you have any questions, feel free to leave a comment below.