Pop up de verificación de edad: Por qué la necesita y cómo añadirla a su sitio web
Contenido

Cómo añadir verificación de edad gratuita a un sitio web en unos minutos

21 enero 2022 03 octubre 2023 ~ 9 min. leídos 18527 vistas
evalúe
Claspo Blog Cómo añadir verificación de edad gratuita a un sitio web en unos minutos

El cumplimiento de las restricciones y normativas de edad es primordial para los sitios web que manejan contenidos o productos delicados. Tanto si gestiona una tienda online de alcohol, tabaco o material orientado a adultos como si simplemente quiere proteger a los menores del acceso a contenidos inapropiados, implantar la verificación de edad en su sitio web es crucial.

Esta sencilla herramienta puede salvar su negocio y su reputación. En este artículo, hablaremos sobre la verificación de edad en sitios web, explicaremos sus tipos y proporcionaremos instrucciones sobre cómo añadir la verificación de edad al sitio web, tanto con conocimientos de codificación como sin ellos. Empecemos.

Índice de contenidos

¿Qué es la verificación de edad?

¿Cómo añadir la verificación de edad a una página web?

Plantillas Popup de Verificación de Edad de Claspo listas para usar

¿Cuándo necesita un sitio web una verificación de edad?

Tipos de verificación de edad

¿Cómo utilizar la verificación de edad para evitar problemas?

Haga su pop-up gratuito de verificación de edad con Claspo

¿Qué es la verificación de edad para un sitio web?

La verificación de la edad en un sitio web es un sencillo widget que le permite configurar una ventana emergente de carga de página para determinar la edad de los visitantes. Puede ayudarle a que su contenido sea accesible para personas mayores de edad.

plantilla-emergente-de-verificación-de-edad1Úselo gratis

Ejemplos de contenidos digitales que suelen estar restringidos son las tiendas online que venden tabaco y alcohol, las plataformas de streaming de vídeo, las salas de cine online, las redes sociales, las apuestas y los servicios de juego online.

plantilla-emergente-de-verificación-de-edad2Úselo gratis

La primera razón para utilizar la verificación de edad de sitios web es evitar que los niños accedan a contenidos o compren productos para adultos. La segunda razón es que, al tratar con productos sensibles a la edad, debe cumplir las leyes y normativas introducidas por las instituciones legales de su región. Al exigir a los usuarios que confirmen su edad antes de acceder a dichos contenidos, crea un entorno en línea más seguro y responsable.

¿Cómo añadir la verificación de edad a un sitio web?

En pocas palabras, hay dos formas de añadir la verificación de edad a los sitios web. Una requiere un poco de codificación, mientras que la otra utiliza plantillas sin código proporcionadas por varios servicios de ventanas emergentes. 

Método 1. Método basado en código

No es de extrañar que, después de navegar un rato, encuentres algunos ejemplos de código HTML de verificación de edad gratuitos escritos en su día para ayudar a los propietarios de sitios web sensibles a la edad a proteger a los usuarios menores de edad y a ellos mismos. Este método puede funcionar si tienes conocimientos básicos de código y buscas una herramienta gratuita de verificación de edad. Hay ejemplos de código gratuitos para añadir la verificación de edad en comunidades online para probadores y foros de discusión para programadores.

1. Código HTML de verificación de edad gratuito

<div id="age-verify">
<div class="window">
  <span class="title">Are you over 18?</span>
  <span>To visit our website, you must be of legal drinking age.</span>
  <button class="yes" onclick="overAge()">Yes</button>
  <button class="no" onclick="underAge()">No</button>
  <div class="underBox">
    <span class="title">Sorry!</span>
    <span>You need to be at least 18 to visit our website.</span>
    <button class="back" onclick="goBack()">Go Back</button>
  </div>
<span>
</div>
</div>

2. Parte CSS de verificación de edad gratuita

$font-stack: 'Source Sans Pro', sans-serif;
$transition: 500ms;
$window-width: 400px;
$window-height: 250px;
$button-color: #ED6A5A;
#age-verify {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(#000, 0.6);
  transition: $transition;
  .window {
    position: absolute;
    top: 50%;
    left: 50%;
    width: $window-width;
    height: $window-height;
    overflow: hidden;
    padding: 40px;
    margin-left: -($window-width/2);
    margin-top: -($window-height/2);
    background-color: #fff;
    border:6px solid $button-color;
    box-sizing: border-box;
    box-shadow: 0 20px 60px rgba(#000,0.2);
    transition: $transition;
    span {
      display: block;
      text-align: center;
      margin-bottom: 10px;
      font-family: $font-stack;
      &.title {
        color: $button-color;
        font-size: 24px;
      }
    }
    button {
      border: 0;
      margin: 0;
      padding: 0;
      width:48%;
      height:60px;
      color:#FFF;
      font-size: 18px;
      background-color: $button-color;
      margin-top:20px;
      font-family: $font-stack;
      transform:scale(1);
      transition: .2s;
      &.back {
        display:block;
        float:none;
        margin:auto;
        background-color: #fff;
        color:$button-color !important;
        margin-top:20px;
      }
      &.yes {
        float:left;
      }
      &.no {
        float:right;
      }
      &:hover {
        transform:scale(1.1);
        box-shadow: 0 20px 60px rgba(#000,0.2);
        background-color: lighten($button-color,10%);
      }
    }
    .underBox {
      position:absolute;
      width: $window-width;
      height: $window-height;
      padding: 40px;
      top:100%;
      left:0;
      right:0;
      background-color: $button-color;
      transition: $transition;
      box-sizing:border-box;
      * {
        color:#FFF !important;
      }
    }
  }
  &.hidden {
    opacity:0;
    visibility: hidden;
    .window {
      transform:scale(0.5);
    }
  }
  &.under {
    .window .underBox {
      top:0%;
    }
  }
}

3. Verificación de edad gratuita JavaScript

overAge = function () {
  $('#age-verify').addClass('hidden');
}
underAge = function () {
  $('#age-verify').addClass('under');
}
goBack = function () {
    window.history.back();
}

Si no estás familiarizado con la codificación, no tienes intención de involucrar a desarrolladores en el proceso de creación de ventanas emergentes o no te apetece hacer trabajo extra, hay muchas soluciones listas para usar que vienen con servicios de ventanas emergentes.

Método 2. Añadir verificación de edad al sitio web mediante servicios de ventanas emergentes

Por lo tanto, si busca una solución lista para añadir la verificación de edad en su sitio web, hay varios servicios de ventanas emergentes entre los que puede elegir.

Prueba Claspo y haz que la verificación de edad aparezca gratis

Puedes añadir un popup a tu sitio usando diferentes servicios. Vamos a probar cómo hacerlo con el editor Claspo con más detalle. Puedes elegir una plantilla ya hecha de la biblioteca o crear un nuevo widget desde cero.

age verification 1

Consideremos la primera forma. ¿Cómo añadir la verificación de edad a un sitio web?

Paso 1. Para empezar

Para empezar, inicia sesión automáticamente en el sitio utilizando el correo electrónico. A continuación, haga clic en el botón Nuevo Widget. Pasamos a la elección de plantillas. Utilice los filtros para hacer la elección correcta.

El primer filtro es el caso de uso, sólo hay algunos de ellos: 

  • Recoger Datos de Usuarios;
  • Promover Ofertas Especiales;
  • Recoger Direcciones de Email;
  • Informar a los usuarios.

Al seleccionar uno de los elementos, el sistema selecciona automáticamente las plantillas que cumplen estos requisitos.

Paso_1

Paso 2. Elija el diseño

El segundo filtro es el diseño. Actualmente hay 6 tipos disponibles.

Paso_2

Paso 3. Elija el sector

El siguiente filtro es el sector. Aquí puedes seleccionar el área de tu proyecto. Puede ser Negocios, Caridad, Electrónica, Entretenimiento y muchos otros.

Paso_3

Paso 4. Elija el tema

El siguiente filtro es el tema: Día del Padre, Día Mundial del Medio Ambiente, Primavera y Verano.

Paso_4

Paso 5. Editar el widget Editar el widget

Para proceder a editar el widget, selecciona uno. Puedes ver cómo se muestra el widget para las versiones móvil y escritorio y seleccionar el lanzador que abre este formulario.

Paso_5

Paso 6. Seleccione una plantilla y pase al editor

En el editor hay varios contenedores disponibles

  • un bloque de texto que puede arrastrarse y colocarse en el lugar deseado, así como borrarse; 
  • un contenedor dentro del cual puede colocar varios elementos a la vez y alinearlos vertical y horizontalmente; 
  • una imagen que puede cargarse desde la biblioteca incorporada o desde un ordenador; 
  • una imagen flotante;
  • un botón personalizable.

Paso_6_1

Cambia la anchura y la altura del widget.

Paso_6-2

También puede seleccionar la ubicación de otros elementos, establecer el estilo del contenido y propagarlo a todas las variantes en las versiones de escritorio y móvil. Puede colocar elementos interiores alineados horizontal o verticalmente y elegir el espaciado entre los elementos.

Paso_6-3

Paso 7. Elija la activación del widget

Puedes ir a la vista previa para ver cómo se mostrará el widget en el sitio. Elige los estados del widget, el idioma, la visualización en diferentes dispositivos y el tamaño de la ventana. Puede ser un tamaño fijo o un tamaño de dispositivo.

A continuación, guarda el widget y pasa a Activación del widget. Elige Frecuencia de visualización y Cuándo mostrar el widget. A continuación, puede conectar la colocación del widget mediante la API. Para seleccionar una regla diferente, contacta con el soporte de Claspo. También puede seleccionar Integraciones.

Paso_7

Paso 8. Comprueba el resultado

Después de guardar, verás tu widget en la biblioteca. Para mostrarlo, necesitas poner un widget en tu sitio. No tienes que poner código en el sitio con un script porque aumenta su velocidad de carga. Todos los códigos estarán ubicados en los servidores de Claspo.

Paso_8

¿Cómo crear un widget desde cero?

Paso 1. Empezar Empezar

Del mismo modo que antes, te registras, pero ahora eliges entre las soluciones propuestas ya creadas.

Paso_1_Empezar_Empezar

Paso 2. Escriba el título y el texto normal

Paso_2_Escriba_el_título_y_el_texto_normal

Paso 3. Seleccione uno de los contenedores disponibles en el editor

Paso_3_Seleccione_uno_de_los_contenedores_disponibles_en_el_editor

Y por último, elija el widget de activación y compruebe el resultado.

Plantillas Popup de Verificación de Edad de Claspo listas para usar

Con muchas plantillas de Claspo listas para usar, es fácil elegir una plantilla que satisfaga sus objetivos y gustos con la verificación de edad de sitios web.

plantilla-emergente-de-verificación-de-edad3Úsalo ahora

Claspo free popup builder utiliza una sencilla lógica de arrastrar y soltar para crear formularios y mensajes informativos y valiosos.

plantilla-popup-de-verificación-de-edad4Úsalo ahora

Si no está familiarizado con la codificación, no tiene intención de involucrar a los desarrolladores en el proceso de creación de ventanas emergentes o no le apetece hacer trabajo extra, hay muchas soluciones listas para usar que incluyen servicios de ventanas emergentes.

plantilla-popup-de-verificación-de-edad5Úsalo ahora

¿Cuándo necesita un sitio web una verificación de edad?

La verificación de edad es necesaria para sitios web que ofrecen productos sensibles a la edad como alcohol y cigarrillos, contenidos de vídeo sólo para adultos, juegos en línea y otras cosas. La distribución de estos productos y las leyes establecidas por las instituciones estatales regulan los contenidos relacionados.

Así pues, estos son los dos casos principales en los que suele ser necesario introducir la verificación de edad en su sitio web.

  1. Usted distribuye contenidos o bienes que no están destinados a menores.
  2. La legislación de su país exige la confirmación de la edad.

Por ejemplo, en EE.UU. la venta de productos del tabaco (incluidos el narguile y los cigarrillos electrónicos) a consumidores menores de 21 años está prohibida por la Food and Drug Administration (FDA). Para saber cómo cumplir estas normas, los minoristas que operan en este nicho pueden consultar información detallada en el sitio web oficial de la FDA.

Además, puede ser necesario revisar una simple ventana emergente de verificación de edad para cumplir la normativa del sector. La mayoría de los estados de EE.UU. exigen que el consumidor presente un documento de identidad válido emitido por el gobierno para demostrar su edad cuando compra bebidas alcohólicas. 

El mundo del ocio en línea no es diferente. En EE.UU., el consumo de contenidos en línea por parte de usuarios menores de 13 años está limitado por la norma Children's Online Privacy Protection Act Rule (COPPA). El Reglamento General de Protección de Datos (RGPD) de la UE impone restricciones similares. Ambos reglamentos limitan la recopilación de información de identificación personal de menores de edad sin el consentimiento de sus padres.

Crea tu propia ventana emergente gratuita de verificación de edad con Claspo

Tipos de verificación de edad de sitios web

Existen varios tipos de ventanas emergentes de verificación de edad, y varían desde la verificación primaria de la fecha de nacimiento hasta técnicas más avanzadas como el reconocimiento facial basado en IA. 

Una ventana emergente de verificación de edad normal suele tener este aspecto.

image14.png
Ejemplo de ventana emergente de verificación de edad


Ejemplo creativo de ventana emergente de verificación de edad

Dependiendo de la hora y el lugar, puede aparecer una verificación de la edad del sitio web

  • en la página de inicio;
  • en la caja.

En función de los requisitos del sector y de la normativa local, puede solicitar únicamente la fecha de nacimiento del usuario o ir más allá y pedir datos personales como la dirección o exigir que se cargue una foto de carné, como se muestra en el ejemplo siguiente.

Ejemplo_de_ventana_emergente_de_verificación_de_identidad_con_foto
Ejemplo de ventana emergente de verificación de identidad con foto

Otras formas más sofisticadas de restringir el acceso de menores a su sitio web incluyen la verificación de la tarjeta de crédito.

Independientemente del método de verificación de edad por el que opte, asegúrese de que su Política de Privacidad establece claramente el propósito de dicha recogida de datos.

Ejemplos de ventanas emergentes de verificación de edad

En este artículo, nos ocupamos específicamente de las ventanas emergentes de verificación de edad. Por ello, hemos recopilado ejemplos de verificación de edad utilizados por los denominados sitios web sólo para adultos.

Ejemplo_de_ventana_emergente_de_verificación_de_edad_1
Ejemplo de ventana emergente de verificación de edad

Al elegir botones para adultos y menores, puede cambiarles el color. El texto de notificación puede cambiarse, así como el tamaño de letra.

Ejemplo_de_ventana_emergente_de_verificación_de_edad_2
Ejemplo de ventana emergente de verificación de edad

Ejemplo_de_ventana_emergente_de_verificación_de_edad_3
Ejemplo de ventana emergente de verificación de edad

Puede comprobar la edad del visitante consultando sólo el año de nacimiento. El widget calculará automáticamente la edad del visitante. El contenido del sitio se ocultará tras una imagen de fondo durante la verificación hasta que el usuario confirme que es mayor de edad.

Ejemplo_de_ventana_emergente_de_verificación_de_edad_4Ejemplo de ventana emergente de verificación de edad

Ejemplo_de_ventana_emergente_de_verificación_de_edad_5
Ejemplo de ventana emergente de verificación de edad

No es necesario preguntar a los usuarios su edad exacta. Basta con añadir dos botones: confirmar o no confirmar.

Ejemplo_de_ventana_emergente_de_verificación_de_edad_6
Ejemplo de ventana emergente de verificación de edad

Ejemplo_de_ventana_emergente_de_verificación_de_edad_7
Ejemplo de ventana emergente de verificación de edad

Como puede ver, los distintos tipos de ventanas emergentes de verificación de edad suelen transmitir la misma idea. Por lo general, las principales diferencias se reducen a la exhaustividad del texto (mención o no de las condiciones de uso y la política de privacidad, información complementaria para los padres, etc.), el estilo del diseño de la ventana emergente y sus elementos de interfaz de usuario (botones y casillas de verificación).

¿Cómo utilizar la verificación de edad para evitar problemas?

La verificación de la edad es imprescindible si opera en un nicho sensible a la edad y pretende que su sitio web cumpla las leyes y normativas emitidas por instituciones legales. La verificación de la edad de sus visitantes puede realizarse cuando comienzan a navegar o cuando están a punto de finalizar la compra. Infringir estas normas puede acarrear multas o incluso penas de prisión.

Las ventanas emergentes de verificación de edad se utilizan mucho para impedir que los usuarios menores de edad accedan a su sitio web. Estas ventanas emergentes suelen transmitir la misma idea, es decir, advertir a los clientes sobre las restricciones de edad introducidas en su sitio web. Dependiendo de sus preferencias y de los requisitos oficiales de las autoridades locales, puede incluir en su ventana emergente de verificación de edad información adicional para los padres o proporcionar un enlace a sus condiciones de uso.

A la hora de añadir la verificación de la edad al sitio web, normalmente se encontrará con soluciones que implican cierta codificación y otras que vienen de fábrica. Para tomar la decisión correcta, analice sus necesidades con este tipo de ventanas emergentes y evalúe cómo cada solución disponible puede ayudarle a conseguirlas.

¿Todavía no eres usuario de Claspo? Arreglémoslo
Plantillas Relacionadas

También le puede gustar
12 ejemplos de mensajes emergentes y consejos útiles
12 ejemplos de mensajes emergentes y consejos útiles

Los mensajes emergentes se han convertido en un método eficaz para atraer a los visitantes y promocionar las marcas en el ámbito en constante evolución del marketing digital. Al elaborar estos mensajes con un texto impactante, podemos captar la atención de los usuarios y motivarlos para que actúen. En esta selección, nos adentramos en el arte de la comunicación a través de ejemplos de ventanas emergentes de marcas de renombre como Adidas, Disney y H&M, entre otras. Estos ejemplos demuestran...

18 enero 2022 7 min. leídos
Popup Temporizador Cuenta Atrás: 5 excelentes ejemplos
Popup Temporizador Cuenta Atrás: 5 excelentes ejemplos

Has visto esos productos que puedes conseguir con un descuento sólo por tiempo limitado. Hay muchos propietarios de empresas y especialistas en marketing que utilizan esta herramienta para crear una sensación de urgencia.  La sensación de urgencia tiene casi el mayor impacto en los visitantes, y no debes tener miedo de usarla.  Entre todos los beneficios que puedes conseguir con este enfoque, aquí tienes algunos de los más notorios: Atraer clientes con un sentido de urgencia. Los pop ups con...

15 enero 2022 9 min. leídos
5 consejos para ventanas emergentes
5 consejos para ventanas emergentes

Parece que las ventanas emergentes estaban en Internet desde que apareció Internet. Todos recordamos las extrañas y molestas ventanas emergentes que querían obtener todo de nosotros, excepto almas. Pero esa época ya pasó, y todos los empresarios deberían plantearse utilizar las ventanas emergentes para obtener información de sus clientes. Incluso ahora, puedes ver que muchas manipulaciones han desaparecido, y las ventanas emergentes se han vuelto más amigables, informativas y menos molestas. No tienes que aprender desarollo. Nosotros lo hemos hecho...

11 enero 2022 8 min. leídos
¿Cómo construir tu marca personal con Pop Ups?
¿Cómo construir tu marca personal con Pop Ups?

¿Cómo construir una marca personal o  cómo hacer Branding personal con ventanas emergentes o pop ups? ¿Qué opinas de los pop ups? ¿Te resultan molestos como a muchos usuarios de todo el mundo? Pero ¿aun así quieres utilizarlas? Siempre tenemos curiosidad por saber por qué a los propietarios de negocios no les gustan las ventanas emergentes cuando están en otros sitios web, pero siguen colocando los mismos en sus sitios web. ¡Hay una solución para eso! Usted puede crear una...

31 enero 2022 13 min. leídos
8 Efectos negativos del abandono de la cesta de la compra
8 Efectos negativos del abandono de la cesta de la compra

Érase una vez un joven y apuesto comerciante que dirigía una tienda online. Los ingresos no eran espectaculares, pero el negocio era rentable y todo el mundo a su alrededor no paraba de decirle que lo estaba llevando bien. Sin embargo, burlado por sus ambiciones, anhelaba más.  Un día, se dio cuenta de que, aunque al principio los visitantes de su sitio web estaban entusiasmados por adquirir cosas, a menudo cambiaban de opinión más tarde, abandonaban la plataforma y dejaban...

17 febrero 2022 18 min. leídos
Manual de 16 pasos para llevar tu negocio al entorno virtual y aumentar drásticamente las ventas online
Manual de 16 pasos para llevar tu negocio al entorno virtual y aumentar drásticamente las ventas online

El impacto de la pandemia del COVID-19 en nuestra vida cotidiana es innegable. Al vernos obligados a quedarnos en casa, hemos aprendido a apreciar las ventajas de las compras online. Es rápido, cómodo y no requiere hacer cola. Cuando se puede comprar de todo, desde la pizza favorita hasta un sofá nuevo, con un par de clics y sin cambiarse el pijama, puede resultar difícil volver a ir a las tiendas de verdad. Según informa eMarketer, la esfera del comercio...

28 marzo 2022 13 min. leídos

Arriba

Utilizamos cookies para garantizar el correcto funcionamiento de nuestro sitio web, personalizar anuncios y otros contenidos, ofrecer funciones de redes sociales y analizar el tráfico de la red. También compartimos información sobre su uso del sitio web con nuestros socios de redes sociales, publicidad y análisis. Al permanecer en el sitio web, usted acepta esto.