{"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-08-27T05:52:45","modified_gmt":"2026-08-27T05:52:45","slug":"8343548-hostinger-ai-builder-manual-mode-age-verification-banner","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/8343548-hostinger-ai-builder-manual-mode-age-verification-banner\/","title":{"rendered":"Hostinger AI Builder: How to add an age verification banner in manual mode"},"content":{"rendered":"

Add an age verification banner to your Hostinger AI Builder manual mode website using a third-party widget or custom code, since Hostinger AI Builder does not include a native age verification widget.<\/p>

Method 1 – Third-party widgets<\/h2>

Create an age verification pop-up using tools available online, for instance, AgeChecker<\/a><\/b>.<\/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>

The widget will be visible in the preview and live versions of your website (not in the editor).<\/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>

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

    Code 1 (to not repeatedly show the banner for eligible users)<\/h4>
    <script>\r\n    const bannerText = 'This website contains explicit content. Are you over 20?';\r\n    const confirmationButtonText = 'Yes';\r\n    const declineButtonText = 'No';\r\n    const mainDiv = document.createElement('div');\r\n    const divForButtons = document.createElement('div');\r\n    const randomText = document.createElement('p');\r\n    const randomOver = document.createElement('p');\r\n    const randomUnder = document.createElement('p');\r\n    const blackout = document.createElement('div');\r\n    let overAge = false;\r\n    blackout.id = 'blackout';\r\n    divForButtons.appendChild(randomOver);\r\n    divForButtons.appendChild(randomUnder);\r\n    mainDiv.appendChild(randomText);\r\n    mainDiv.appendChild(divForButtons);\r\n    randomText.innerText = bannerText;\r\n    randomOver.innerText = confirmationButtonText;\r\n    randomUnder.innerText = declineButtonText;\r\n    randomText.id = 'ageText';\r\n    randomOver.classList.add('ageButton');\r\n    randomUnder.classList.add('ageButton');\r\n    mainDiv.id = 'ageVerificationBanner';\r\n    if (!localStorage.getItem('overAge')) {\r\n        document.body.appendChild(blackout);\r\n        document.body.appendChild(mainDiv);\r\n        document.body.style.overflow = 'hidden';\r\n    }\r\n    randomOver.addEventListener('click', function () {\r\n        document.body.style.overflow = 'visible';\r\n        document.querySelector('#ageVerificationBanner').style.display = 'none';\r\n        document.querySelector('#blackout').style.display = 'none';\r\n        overAge = true;\r\n        localStorage.setItem('overAge', overAge);\r\n    })\r\n    randomUnder.addEventListener('click', function () {\r\n        window.location = 'https:\/\/google.com';\r\n    })\r\n<\/script>\r\n<style>\r\n    #blackout {\r\n        background-color: rgba(0, 0, 0, 0.3);\r\n        width: 100%;\r\n        height: 100%;\r\n        position: absolute;\r\n        left: 0;\r\n        top: 0;\r\n        z-index: 9999;\r\n    }\r\n    div#ageVerificationBanner {\r\n        position: absolute;\r\n        z-index: 99999;\r\n        transform: translate(-50%, -50%);\r\n        top: 50%;\r\n        left: 50%;\r\n        background-color: #DADADA;\r\n        padding: 50px;\r\n        border: solid 2px #606060;\r\n        border-radius: 10px;\r\n    }\r\n    div#ageVerificationBanner div {\r\n        display: flex;\r\n        justify-content: center;\r\n    }\r\n    p.ageButton {\r\n        padding: 5px 10px;\r\n        margin: 0 10px;\r\n        cursor: pointer;\r\n        background-color: #AFAFAF;\r\n        border-radius: 5px;\r\n        border: solid 2px #606060;\r\n    }\r\n    p#ageText {\r\n        text-align: center;\r\n        padding-bottom: 20px;\r\n    }\r\n    @media screen and (max-width:920px) {\r\n        div#ageVerificationBanner {\r\n            width: 300px;\r\n            padding: 20px;\r\n        }\r\n        p.ageButton {\r\n            font-size: 14px;\r\n        }\r\n    }\r\n<\/style><\/code><\/pre>
    Code 2 (to always show the banner)<\/h4>
    <script data-rehype>\r\n    const mainDiv = document.createElement('div');\r\n    const divForButtons = document.createElement('div');\r\n    const randomText = document.createElement('p');\r\n    const randomOver = document.createElement('p');\r\n    const randomUnder = document.createElement('p');\r\n    const blackout = document.createElement('div');\r\n    blackout.id = 'blackout';\r\n    divForButtons.appendChild(randomOver);\r\n    divForButtons.appendChild(randomUnder);\r\n    mainDiv.appendChild(randomText);\r\n    mainDiv.appendChild(divForButtons);\r\n    randomText.innerText = 'This site contains explicit content.';\r\n    randomOver.innerText = 'I am over 18';\r\n    randomUnder.innerText = 'I am under 18';\r\n    randomText.id = 'ageText';\r\n    randomOver.classList.add('ageButton');\r\n    randomUnder.classList.add('ageButton');\r\n    mainDiv.id = 'ageVerificationBanner';\r\n    document.body.appendChild(blackout);\r\n    document.body.appendChild(mainDiv);\r\n    document.body.style.overflow = 'hidden';\r\n    randomOver.addEventListener('click', function () {\r\n        document.body.style.overflow = 'visible';\r\n        document.querySelector('#ageVerificationBanner').style.display = 'none';\r\n        document.querySelector('#blackout').style.display = 'none';\r\n    })\r\n    randomUnder.addEventListener('click', function () {\r\n        window.location = 'https:\/\/google.com';\r\n    })\r\n<\/script>\r\n<style>\r\n    #blackout {\r\n        background-color: rgba(0, 0, 0, 0.3);\r\n        width: 100%;\r\n        height: 100%;\r\n        position: absolute;\r\n        left: 0;\r\n        top: 0;\r\n        z-index: 9999;\r\n    }\r\n    div#ageVerificationBanner {\r\n        position: absolute;\r\n        z-index: 99999;\r\n        transform: translate(-50%, -50%);\r\n        top: 50%;\r\n        left: 50%;\r\n        background-color: #DADADA;\r\n        padding: 50px;\r\n        border: solid 2px #606060;\r\n        border-radius: 10px;\r\n    }\r\n    div#ageVerificationBanner div {\r\n        display: flex;\r\n        justify-content: center;\r\n    }\r\n    p.ageButton {\r\n        padding: 5px 10px;\r\n        margin: 0 10px;\r\n        cursor: pointer;\r\n        background-color: #AFAFAF;\r\n        border-radius: 5px;\r\n        border: solid 2px #606060;\r\n    }\r\n    p#ageText {\r\n        text-align: center;\r\n        padding-bottom: 20px;\r\n    }\r\n\r\n    @media screen and (max-width:920px) {\r\n        div#ageVerificationBanner {\r\n            width: 300px;\r\n            padding: 20px;\r\n        }\r\n        p.ageButton {\r\n            font-size: 14px;\r\n        }\r\n    }\r\n<\/style><\/code><\/pre>
    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?';\r\n    const confirmationButtonText = 'Yes';\r\n    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>
    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>
    The banner shows up in the preview mode and online; it’s not visible in the editor.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Add an age verification banner to your Hostinger AI Builder manual mode website.<\/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":[293],"tags":[],"class_list":["post-629","post","type-post","status-publish","format-standard","hentry","category-ai-builder"],"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":3,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/629\/revisions"}],"predecessor-version":[{"id":17115,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/629\/revisions\/17115"}],"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}]}}