DOCS

Integrar el widget

Cómo añadir el widget de mapa de tickadoo a tu sitio web.

Hay dos formas de integrar el widget de mapa de tickadoo en tu sitio web. Ambas están disponibles en la página Distribución de tu panel de administración.

Inserción simple (recomendado)

Añade una única etiqueta script en cualquier lugar de tu página. El widget se renderiza automáticamente.

Inserción simple 
<script src="https://b2b.tickadoo.com/widget/map-widget.iife.js" data-connect-map="YOUR_MAP_ID"></script>

El mapa aparece en la posición de la etiqueta script y ocupa el ancho de su contenedor. Tiene una altura predeterminada, pero puedes controlar el tamaño con CSS en el elemento padre.

Tip

Coloca la etiqueta script dentro de un contenedor con una altura definida para obtener los mejores resultados. El widget se expandirá para llenar el espacio disponible.

Inserción avanzada

Para mayor control sobre la ubicación y el estilo, usa el enfoque de web component:

Inserción avanzada 
<script src="https://b2b.tickadoo.com/widget/map-widget.iife.js" defer></script>
<tickadoo-map map-id="YOUR_MAP_ID" style="height: 500px">
</tickadoo-map>

Con este enfoque:

  • El atributo defer carga el script sin bloquear el renderizado de la página
  • El elemento <tickadoo-map> te da control total sobre la posición y el tamaño
  • Puedes estilizarlo con CSS como cualquier otro elemento HTML

Dimensionar el widget

El widget respeta las dimensiones de su contenedor. Aquí tienes patrones comunes:

Altura fija

Contenedor de altura fija 
<div style="height: 600px">
  <script src="https://b2b.tickadoo.com/widget/map-widget.iife.js" data-connect-map="YOUR_MAP_ID"></script>
</div>

Altura completa del viewport

Viewport completo 
<tickadoo-map map-id="YOUR_MAP_ID" style="height: 100vh">
</tickadoo-map>

Responsivo con relación de aspecto

Relación de aspecto responsiva 
<tickadoo-map map-id="YOUR_MAP_ID" style="aspect-ratio: 16/9; width: 100%">
</tickadoo-map>
¿Dónde debo colocar la etiqueta script?

Para la inserción simple, el mapa se renderiza en la posición del script. Colócalo dentro de la sección de tu página donde quieras que aparezca el mapa — normalmente un área de contenido o una sección dedicada al mapa.

Para la inserción avanzada, coloca la etiqueta <script> en el <head> o al final del <body>, y pon el elemento <tickadoo-map> donde quieras que aparezca el mapa.

¿Puedo integrar varios mapas en una página?

Sí, pero cada uno debe usar su propio elemento <tickadoo-map> con el enfoque de inserción avanzada. El script solo necesita cargarse una vez.

Varios mapas 
<script src="https://b2b.tickadoo.com/widget/map-widget.iife.js" defer></script>
<tickadoo-map map-id="MAP_ID_1" style="height: 400px">
</tickadoo-map>
<tickadoo-map map-id="MAP_ID_2" style="height: 400px">
</tickadoo-map>

Plataformas CMS

WordPress
  1. Edita la página o entrada donde quieres el mapa
  2. Añade un bloque de HTML personalizado (en el editor Gutenberg)
  3. Pega el código de inserción simple
  4. Publica o actualiza la página
Squarespace
  1. Edita la página y añade un bloque de Código
  2. Pega el código de inserción simple
  3. Guarda y publica
Wix
  1. Añade un elemento Insertar HTML a tu página
  2. Pega el código de inserción simple en el campo de código
  3. Ajusta el tamaño del elemento según sea necesario
  4. Publica