Siguiendo dos simples pasos:
1. Carga nuestro webcomponent en tu página antes de cerrar la etiqueta <head>
2. Utiliza el tag <dichosas-cookies></dichosas-cookies> al final de tu contenido.<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>
. . . <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