DOCS

Integrare il widget

Come aggiungere il widget mappa tickadoo al tuo sito web.

Esistono due modi per integrare il widget mappa tickadoo sul tuo sito web. Entrambi sono disponibili nella pagina Distribuzione del tuo pannello di amministrazione.

Integrazione semplice (consigliata)

Aggiungi un singolo tag script in qualsiasi punto della tua pagina. Il widget viene visualizzato automaticamente.

Simple embed 
<script src="https://b2b.tickadoo.com/widget/map-widget.iife.js" data-connect-map="YOUR_MAP_ID"></script>

La mappa appare nella posizione del tag script e riempie la larghezza del suo contenitore. Ha un’altezza predefinita, ma puoi controllare le dimensioni con CSS sull’elemento padre.

Tip

Posiziona il tag script all’interno di un contenitore con un’altezza definita per i migliori risultati. Il widget si espandera per riempire lo spazio disponibile.

Integrazione avanzata

Per un maggiore controllo su posizionamento e stile, utilizza l’approccio web component:

Advanced embed 
<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 questo approccio:

  • L’attributo defer carica lo script senza bloccare il rendering della pagina
  • L’elemento <tickadoo-map> ti offre il pieno controllo su posizionamento e dimensioni
  • Puoi stilizzarlo con CSS come qualsiasi altro elemento HTML

Dimensionare il widget

Il widget rispetta le dimensioni del suo contenitore. Ecco le configurazioni piu comuni:

Altezza fissa

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

Altezza completa della finestra

Full viewport 
<tickadoo-map map-id="YOUR_MAP_ID" style="height: 100vh">
</tickadoo-map>

Responsivo con rapporto d’aspetto

Responsive aspect ratio 
<tickadoo-map map-id="YOUR_MAP_ID" style="aspect-ratio: 16/9; width: 100%">
</tickadoo-map>
Dove posizionare il tag script?

Per l’integrazione semplice, la mappa viene visualizzata nella posizione dello script. Posizionalo nella sezione della pagina dove vuoi che appaia la mappa — tipicamente un’area di contenuto o una sezione dedicata alla mappa.

Per l’integrazione avanzata, posiziona il tag <script> nell’<head> o alla fine del <body>, e metti l’elemento <tickadoo-map> dove vuoi visualizzare la mappa.

Posso integrare piu mappe in una sola pagina?

Si, ma ciascuna deve utilizzare il proprio elemento <tickadoo-map> con l’approccio di integrazione avanzata. Lo script deve essere caricato una sola volta.

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

Piattaforme CMS

WordPress
  1. Modifica la pagina o l’articolo dove vuoi visualizzare la mappa
  2. Aggiungi un blocco HTML personalizzato (nell’editor Gutenberg)
  3. Incolla il codice di integrazione semplice
  4. Pubblica o aggiorna la pagina
Squarespace
  1. Modifica la pagina e aggiungi un blocco Code
  2. Incolla il codice di integrazione semplice
  3. Salva e pubblica
Wix
  1. Aggiungi un elemento Embed HTML alla tua pagina
  2. Incolla il codice di integrazione semplice nel campo del codice
  3. Regola le dimensioni dell’elemento secondo necessita
  4. Pubblica