Liste des paramètres de personnalisation des widgets Storyguide

Le principe

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 :

  • à la campagne : 15
  • en ville : 5
  • ou en ville pour avoir un guide de quartier : 0.2

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)

  • On peut quitter (croix présente) :  true
  • On ne peut pas quitter (croix non présente) : false

story-loop-number

Nombre de fois que l’on veut boucler sur la story en cours.

Exemples :

  • La première story sera lue 3 fois avant de s’arrêter : 3
  • La première story sera lue en boucle : infinite
  • Les stories se lisent l’une après l’autre et on reprend à la première story à la fin de la dernière: all
  • Les stories se lisent l’une après l’autre : ne pas renseigner le paramètre

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 :

  • met juste la première vignette d’une story en pause (peut fonctionner avec story-item) : first
  • met en pause toutes les vignettes d’une story : all

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 :

  • en_GB  Anglais
  • es_ES   Espagnol
  • fr_FR   Français
  • de_DE Allemand

list-view

Affichage de la liste (=volet de gauche)

  • true : la liste s’affiche
  • false : la liste est cachée

sidebar-view

Permet de gérer l'affichage du menu des filtres/thématique sur la gauche.

  • Le menu des filtres est caché : false
  • Le menu des filtres est affiché en mode grand : true
  • Le menu des filtres est affiché en mode petit : reduced (recommandé)

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 : 

  • "add-marker": [47.294098,-1.850624]
  • "marker-title": "Nom de mon établissement"

- 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 :

  • "story-custom-button-text": "Réservez votre hébergement !",
  • "story-custom-button-link": "https://exemple.com/",
  • "story-custom-button-color": "FF0000",
  • "story-custom-button-icon": "fas+fa-external-link-alt"
  • “story-custom-button-fontsize”: 12

force-responsive

Permet de forcer l'affichage en mode ordinateur ou téléphone.

  • Pour bloquer en version ordinateur : desktop
  • Pour bloquer en version téléphone : mobile

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"