Hostinger Website Builder no incluye un widget nativo para la verificación de la edad, pero se puede conseguir con la ayuda de herramientas de terceros o código personalizado.

Método 1 - Widgets de terceros

Cree una ventana emergente de verificación de edad utilizando herramientas disponibles en línea, por ejemplo, AgeChecker.

Una vez creado el widget, obtendrás su código de integración. Copia y pega el código en el campo Código personalizado de la configuración de integraciones de tu sitio web. Guarda los cambios, actualiza tu sitio web y ¡listo!

El widget será visible en las versiones de vista previa y en vivo de su sitio web (no en el editor).

Método 2 - Utilizar código personalizado

Sólo tienes que hacer lo siguiente:

Copie el código preferido que se indica a continuación.
Personalizar el código
Pégalo en el campo Código personalizado de la configuración de integraciones de tu sitio web, guarda los cambios y actualiza tu sitio.

Copie el código

Si utilizas Código 1, el banner recordará si un visitante concreto cumple los requisitos (tiene edad suficiente) para acceder al sitio web, lo que significa que el banner no volverá a aparecer la próxima vez que el mismo visitante intente abrir el sitio.

Para mostrar siempre el banner, utilice Código 2.

Código 1 (para no mostrar repetidamente el banner a los usuarios que cumplan los requisitos)

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

Código 2 (para mostrar siempre el 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>

Personalizar el código

En estas líneas se puede cambiar el texto del banner:

   const bannerText = 'This website contains explicit content. Are you over 20?';
    const confirmationButtonText = 'Yes';
    const declineButtonText = 'No';

Si conoce CSS, también puede cambiar el aspecto del banner, por ejemplo, el tamaño de la fuente, los colores, etc.

Pega el código

Dentro del constructor, ve a Configuración → Integraciones de tu sitio web, y pega el código en el campo Código personalizado. A continuación, guarda los cambios y actualiza tu sitio web.

El banner aparece en el modo de vista previa y en línea; no es visible en el editor.