Liste des paramètres de personnalisation des widgets Storyguide
Le principe
Cirkwi vous transmettra alors votre ID de widget dédié.
Les widgets Storyguides sont personnalisables grâce aux paramètres passés à la fonction « load ». Voici un exemple :
<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":{ "filter-radius": [LATITUDE, LONGITUDE, RADIUS] } }]); </script>
Liste des paramètres de personnalisation des widgets WIM
Nom du paramètre | Description et valeurs acceptées |
---|---|
story | Permet de moduler l’affichage des vignettes de storyguides en bas de la carte. - Ne pas afficher les vignettes des Storyguides : false ou none Attention : cela n'empêche pas la story de se lancer, ça masque juste la barre des vignettes de storyguides en bas de la la carte - les stories sont activées : true ou all - n'afficher que les storyguides générés automatiquement : auto - n'afficher que les storyguides de l’utilisateur propriétaire du widget (guides créés manuellement) : user-guides |
story-guide | Lancer une story sur un guide spécifique, créé manuellement. Exemple : "story-guide" : 1009 pour lancer le guide possédant l'ID 1009 |
story-radius | Permet de générer un guide automatique sur une zone donnée. Format : LATITUDE;LONGITUDE;RAYON_EN_KILOMETRES Exemple : 50.804174512153125;5.337945349393796;5 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 :
Documentation détaillée : https://pro.cirkwi.com/integration-dynamique-de-storyguide/ |
story-item | Aller sur une slide donnée d’une story. (numérotation à partir de zéro) Exemples : - aller à la 5ème slide : 4 - aller à la slide de présentation : 0 Attention : Si on renseigne un index plus grand que le nombre de données dans la story, ça va passer à la suivante |
story-bounds | Lance une story sur le bounds donné. Exemple de valeur : [ 49.2591, -0.7145, 49.2832, -0.6807 ] |
story-title | Change le nom de la story qui va se lancer. Exemple : "story-title": "A découvrir autour" |
story-quit | Possibilité de quitter une story ou non (enlever la croix ou non)
|
story-loop-number | Nombre de fois que l’on veut boucler sur la story en cours. Exemples :
|
story-slide-speed | Permet de modifier le temps que va durer chaque slide de la story avant de passer à la suivante. Le temps est en secondes N’accepte que des nombres (entiers et à virgule). Le minimum est 1 seconde. |
story-pause | Mettre les vignettes d’une story en pause. Exemples :
|
story-min-item | Avoir un minimum d’item sur une story qui utilise le paramètre story-bounds ou story-radius. Par défaut à 10. Accepte tout entier positif |
lang | Filtrer sur une langue. La langue est à renseigner au format iso. Exemples :
|
list-view | Affichage de la liste (=volet de gauche)
|
sidebar-view | Permet de gérer l'affichage du menu des filtres/thématique sur la gauche.
Attention : en format tablette les valeurs “true” et “reduced” produisent le même comportement, car il n’y a pas de sidebar étendue en format tablette (ou plus petit) |
add-marker marker-title | Afficher un marker sur la carte, à la latitude/longitude précisée. + Ajouter un titre au marker Exemples :
|
- story-custom-button-text - story-custom-button-link - story-custom-button-color (facultatif) - story-custom-button-icon (facultatif) - story-custom-button-fontsize (facultatif) | Permet d'ajouter un bouton personnalisé sur toutes les pages des stories. - Si le texte est trop long, la fin est remplacée par “...” au moment de l’affichage. - Si la couleur n’est pas spécifiée, la couleur du bouton est la même que la couleur principale du widget. Les valeurs acceptées sont les couleurs au format hexadécimal mais sans le ‘#’. - Les valeurs acceptées pour l'icone sont les classes Font Awesome des icônes. - La taille de la police du bouton personnalisé est de 12px par défaut et peut aller jusqu’à 36px maximum. Exemple :
|
force-responsive | Permet de forcer l'affichage en mode ordinateur ou téléphone.
|
primary-color | Ce paramètre permet de personnaliser la couleur de son widget Attention : ne pas mettre le # au code couleur Exemple : "primary-color" : "CB26A3" |