Siguiendo dos simples pasos:
1. Carga nuestro webcomponent en tu página antes de cerrar la etiqueta <head>
<html>
<head>
<title>...</title>
.
.
.
<script type="module" src="https://lasdichosascookies.com/js/dist/dichosas-cookies/dichosas-cookies.esm.js"></script>
<script nomodule="" src="https://lasdichosascookies.com/js/dist/dichosas-cookies/dichosas-cookies.js"></script>
</head>
2. Utiliza el tag <dichosas-cookies></dichosas-cookies> al final de tu contenido.
.
.
.
<dichosas-cookies></dichosas-cookies>
<script src="..."></script>
</body>
</html>
Sí. Por defecto la franja con el aviso aparece en la parte inferior de la página, pero se puede colocar en la parte superior usando el parámetro pos="top". También puedes quitar el borde y hacer que aparezca como una franja completa con el parámetro borderless="1"
<dichosas-cookies pos="top" borderless="1"></dichosas-cookies>
También. Simplemente escribe el texto que deseas dentro del tag <dichosas-cookies>
<dichosas-cookies>lorem ipsum dolor sit amet consectetur adipiscing elit...</dichosas-cookies>
Estamos preparados para eso. Simplemente utiliza el parámetro urlcookies="tu dirección".
<dichosas-cookies urlcookies="/pagina-de-cookies.html"></dichosas-cookies>
Seguro que sí, para eso solo necesitas conocer las variables que hemos utilizado en el componente y definirlas en tu propia hoja de estilos:
--main-bg-color es el color de fondo (por defecto #FFFFFF)--border-color es el color del borde (por defecto #000000)--color es el color del texto de aviso (por defecto #000000)--btn-bg-color es el color de fondo de los botones (por defecto #2AABD2)--btn-fg-color es el color de texto de los botones (por defecto #FFFFFF)
<style>
dichosas-cookies {
--main-bg-color: #000;
--border-color: #fff;
--color: #fff;
--btn-bg-color: #f00;
--btn-fg-color: #000;
}
</style>
Para que la página web conozca la respuesta del usuario al aviso de cookies, nuestro componente emite un evento denominado estado que contendrá un literal dependiendo de lo que suceda, a saber:
aceptado El aviso de cookies fue aceptado con anterioridad en este dominioacepta El usuario acepta el aviso de cookiesinfo El usuario pulsa el botón de más información
<script>
document.querySelector('dichosas-cookies').addEventListener('estado', function(e) {
console.log(e.detail);
});
</script>
Esto puede suceder por varios motivos. Lo más habitual es no haber cargado correctamente el componente. Revisa el primer punto y verifica que el componente se carga en el bloque <head> de tu página html.
Si estás seguro de que el componente está bien insertado, es posible que no aparezca porque ya se han aceptado las cookies, y este permiso dura 30 días. Para revisarlo, puedes volver a cargar la página usando el modo incógnito de tu navegador, o verificar si tienes una cookie instalada de nombre cookiesucuc. De ser así, con eliminarla y recargar la página será suficiente
¡Claro! Escríbenos a