DOCS

Integrer le widget

Comment ajouter le widget carte tickadoo a votre site web.

Il existe deux manieres d’integrer le widget carte tickadoo sur votre site web. Les deux sont disponibles sur la page Distribution de votre panneau d’administration.

Integration simple (recommandee)

Ajoutez une seule balise script n’importe ou sur votre page. Le widget s’affiche automatiquement.

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

La carte apparait a l’emplacement de la balise script et remplit la largeur de son conteneur. Elle a une hauteur par defaut, mais vous pouvez controler les dimensions avec du CSS sur l’element parent.

Tip

Placez la balise script dans un conteneur avec une hauteur definie pour de meilleurs resultats. Le widget s’etendra pour remplir l’espace disponible.

Integration avancee

Pour plus de controle sur le placement et le style, utilisez l’approche 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>

Avec cette approche :

  • L’attribut defer charge le script sans bloquer le rendu de la page
  • L’element <tickadoo-map> vous donne un controle total sur le positionnement et les dimensions
  • Vous pouvez le styliser avec du CSS comme n’importe quel autre element HTML

Dimensionner le widget

Le widget respecte les dimensions de son conteneur. Voici les configurations courantes :

Hauteur fixe

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>

Pleine hauteur de la fenetre

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

Responsif avec ratio d’aspect

Responsive aspect ratio 
<tickadoo-map map-id="YOUR_MAP_ID" style="aspect-ratio: 16/9; width: 100%">
</tickadoo-map>
Ou placer la balise script ?

Pour l’integration simple, la carte s’affiche a l’emplacement du script. Placez-le dans la section de votre page ou vous souhaitez que la carte apparaisse — generalement une zone de contenu ou une section dediee a la carte.

Pour l’integration avancee, placez la balise <script> dans le <head> ou a la fin du <body>, et positionnez l’element <tickadoo-map> ou vous voulez afficher la carte.

Puis-je integrer plusieurs cartes sur une seule page ?

Oui, mais chacune doit utiliser son propre element <tickadoo-map> avec l’approche d’integration avancee. Le script n’a besoin d’etre charge qu’une seule fois.

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>

Plateformes CMS

WordPress
  1. Modifiez la page ou l’article ou vous souhaitez afficher la carte
  2. Ajoutez un bloc HTML personnalise (dans l’editeur Gutenberg)
  3. Collez le code d’integration simple
  4. Publiez ou mettez a jour la page
Squarespace
  1. Modifiez la page et ajoutez un bloc Code
  2. Collez le code d’integration simple
  3. Enregistrez et publiez
Wix
  1. Ajoutez un element Embed HTML a votre page
  2. Collez le code d’integration simple dans le champ de code
  3. Ajustez la taille de l’element selon vos besoins
  4. Publiez