{"id":629,"date":"2023-09-07T06:41:09","date_gmt":"2023-09-07T06:41:09","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2023\/09\/07\/8343548-hostinger-website-builder-age-verification-banner\/"},"modified":"2026-03-16T12:12:02","modified_gmt":"2026-03-16T12:12:02","slug":"8343548-hostinger-website-builder-age-verification-banner","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/8343548-hostinger-website-builder-age-verification-banner\/","title":{"rendered":"Hostinger Website Builder: Age Verification Banner"},"content":{"rendered":"

Hostinger Website Builder<\/a><\/b> does not include a native widget for age verification, but it can be achieved with the help of third-party tools or custom code. <\/p>

\n<\/p>

Method 1 – Third-Party Widgets <\/h2>

Create an age verification pop-up using tools available online, for instance, AgeChecker<\/a><\/b>. <\/p>

\n<\/p>

Once you create the widget, you’ll get its integration code<\/b>. <\/b>Copy and paste the code in the Custom code<\/a><\/b> field of your website’s integrations settings. Save the changes, update your website, and that’s it!<\/p>

\n<\/p>

The widget will be visible in the preview and live versions of your website (not in the editor). <\/p>

\n<\/p>

Method 2 – Use Custom Code<\/h2>

All you need to do is the following:<\/p>

    \n
  1. \n

    Copy<\/b> the preferred code<\/a><\/b> given below<\/p>\n<\/li>\n

  2. \n

    Customize<\/a><\/b> the code <\/p>\n<\/li>\n

  3. \n

    Paste<\/a><\/b> it to the Custom code<\/b> field in your website’s integrations settings, save the changes, and update your site<\/p>\n<\/li>\n<\/ol>

    Copy the Code<\/h3>

    If you use Code 1<\/a><\/b>, 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.<\/p>

    \n<\/p>

    To always<\/b> show the banner, use Code 2<\/a><\/b>.<\/p>

    \n<\/p>

    Code 1 (to not repeatedly show the banner for eligible users) <\/h4>
    <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><\/pre>
    \n<\/p>
    Code 2 (to always show the banner)<\/h4>
    <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><\/code><\/pre>
    \n<\/p>
    Customize the Code<\/h3>
    The text for the banner can be changed in these lines:<\/p>
       const bannerText = 'This website contains explicit content. Are you over 20?';
        const confirmationButtonText = 'Yes';
        const declineButtonText = 'No';<\/code><\/pre>
    If you know CSS<\/a><\/b>, you may also change the banner appearance, e.g., font size, colors, etc.<\/p>
    \n<\/p>
    Paste the Code<\/h3>
    Within the builder, go to your website’s Settings<\/b> → Integrations<\/b>, and paste the code in the Custom code<\/a><\/b> field. Then, save the changes<\/b> and update your website<\/b>.<\/p>
    \n<\/p>
    The banner shows up in the preview mode and online; it’s not visible in the editor.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Learn how to add a banner for age verification to your website created with Hostinger Website Builder<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[284],"tags":[],"class_list":["post-629","post","type-post","status-publish","format-standard","hentry","category-integrations"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/8343548-hostinger-website-builder-age-verification-banner\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/8343548-hostinger-creador-de-sitios-web-banner-de-verificacion-de-edad\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=629"}],"version-history":[{"count":0,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/629\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}