Intégration dynamique des Storyguides
Mode CARTE simple

Introduction

Vous souhaitez gagner du temps et ne pas créer un Widget Storyguide WIM – en mode CARTE – pour chaque page de votre site ? C’est possible !

Ce tutoriel technique vous permettra de modifier dynamiquement votre code d’intégration JavaScript afin d’agir sur l’apparence de votre widget.

Si vous préférez intégrer une story avec un défilement progressif, c’est par ici ! 

Les paramètres essentiels :

Les Storyguides générés via votre projet sont personnalisables grâce aux paramètres passés à la fonction « load ».

Obligatoire :

  • widget-id : identifiant unique de votre widget, fourni par Cirkwi

Localisation et langue des données :

  • lat, lng et zoom : latitude et longitude du centre de la carte, accompagné du zoom désiré (commencez par essayer avec 13 😉 ). Ces 3 paramètres sont à utiliser ensemble et permettent d’afficher uniquement la zone autour du lieu souhaité.
  • lang : langue dans laquelle les données apparaitront.

Informations sur l’établissement que vous souhaitez mettre en valeur :

  • add-marker et marker-title : ajoute une popup à une position donnée sur la carte, avec le texte souhaité

Template à utiliser pour votre code d'intégration :

<div class="wim-container" id="wim-widget-VOTRE_ID_WIDGET"></div>
<script type="text/javascript">
    (function(_,c,i,r,k,w,I){if(!_[k]){_[k]={load: function(e){_[k].q=(_[k].q||[]).concat(e)}};w=c.createElement(r),I=c.getElementsByTagName(r)[0];w.async=1;w.src=i;I.parentNode.insertBefore(w,I)}})(window,document,'https://widget.wim.cirkwi.com/build/widget-loader.js','script','wimWidget');
    wimWidget.load([{
        "widget-id":"VOTRE_ID_WIDGET",
        "params":{
            "lat": LATITUDE,
            "lng": LONGITUDE,
            "zoom": ZOOM,
            "add-marker": [LATITUDE_POPUP, LONGITUDE_POPUP],
            "marker-title": "TEXTE_POPUP",
            "lang": "fr_FR",
            "story": "false"
        }
    }]);
</script>

Exemple d'utilisation concrète :

<div class="wim-container" id="wim-widget-0101"></div>
<script type="text/javascript">
    (function(_,c,i,r,k,w,I){if(!_[k]){_[k]={load: function(e){_[k].q=(_[k].q||[]).concat(e)}};w=c.createElement(r),I=c.getElementsByTagName(r)[0];w.async=1;w.src=i;I.parentNode.insertBefore(w,I)}})(window,document,'https://widget.wim.cirkwi.com/build/widget-loader.js','script','wimWidget');
    wimWidget.load([{
         "widget-id":"0101",
         "params":{
                "lat": 48.8584442,
                "lng": 2.2943516,
                "zoom": 13,
                "add-marker": [48.8584442,2.2943516],
                "marker-title": "Mon hôtel",
                "lang": "fr_FR",
                "story": "false"
       }
    }]);
</script>

Besoin d'aide ?

Utilisez notre formulaire de contact et envoyez-nous vos questions en précisant les identifiants que vous utilisez, le code exact, l’url de la page sur laquelle vous faites l’intégration… etc.