Intégration dynamique des Storyguides
Mode STORY

Introduction

Vous souhaitez gagner du temps et ne pas créer un Widget Storyguide WIM – en mode STORY, avec défilement automatique – 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 carte simple, sans story avec défilement progressif, c’est par ici : https://pro.cirkwi.com/mode-carte-simple-integration-dynamique-storyguide/

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 :

  • story-radius : permet d’afficher uniquement la zone autour de l’établissement dans un rayon de X kilomètres.
    Nous vous recommandons vivement d’utiliser un rayon kilométrique adapté à la zone ciblée afin d’obtenir une sélection de qualité.
    Par exemple :
    • à la campagne : 15
    • en ville : 5
    • ou en ville pour avoir un guide de quartier : 0.2
  • story-min-item : précise qu’on souhaite au moins X points d’intérêt sur la zone géographique demandée (facultatif)
  • 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é
  • story-title : titre du Storyguide que vous allez générer

Vous êtes une agence web ?

Pour aller plus loin, découvrez la liste de tous les paramètres additionnels, disponibles sur cette page.

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":{
            "story-radius": [LATITUDE, LONGITUDE, KILOMETRES],
            "story-min-item": NOMBRE_MINIMUM,
            "story-title": "TITRE_DE_VOTRE_STORY",
            "add-marker": [LATITUDE_POPUP, LONGITUDE_POPUP],
            "marker-title": "TEXTE_POPUP",
            "lang": "fr_FR",
            "story": "none"
        }
    }]);
</script>

Exemple d'utilisation concrète :

<div class="wim-container" id="wim-widget-454545"></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":"454545",
        "params":{
                "story-radius": [5.373475, -3.992613, 5],
                "story-min-item": 10,
                "story-title": "Autour de mon hôtel",
                "add-marker": [5.373475,-3.992613],
                "marker-title": "Mon hôtel",
                "lang": "fr_FR",
                "story": "none"
        }
    }]);
</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.