Visite guidée

Mettez en place une visite guidée de votre solution.

21/02/2019


Cet article vise à mettre en place une visite guidée, de votre solution basée sur Flower, à destination des utilisateurs.

Flower intègre la librairie Hopscotch de LinkedIn, afin de donner la possibilité aux intégrateurs de solution basée sur Flower, de mettre en place des visites guidées de leurs solutions.


Ces visites guidées permettent une meilleure prise en main d’une solution par les utilisateurs finaux mais également de faire découvrir les nouvelles fonctionnalités déployées.

Quelques exemples !

Ma première visite guidée

Dans l’exemple ci-dessous, nous définissons une visite guidée d’une étape. Vous pouvez évidemment ajouter autant d’étapes que vous souhaitez.

hopscotch.startTour({        
	id: "custom-tour",
    steps: [{
        target: ".logo-lg>img",
        title: "Bienvenue !",
        content: "En cliquant sur le logo, vous pouvez à tout moment revenir sur la page d'accueil.",
        placement: "bottom",
        yOffset: 0,
        xOffset: 30
    }],
    showPrevButton: !0
});

Les paramètres d’une étape

Nom Valeurs Description
target Sélecteur JQuery Le sélecteur permet de définir sur quel élément DOM l’étape va être positionnée
placement top, bottom, right ou left Position de l’étape par rapport à l’élément DOM
yOffset Entier Offset vertical (peut être négatif)
xOffset Entier Offset horizontal (peut être négatif)
onShow function(){} Function à exécuter lorsque à l’étape

Pour les autres paramètres possibles, consultez la documentation Hopscotch

Pour allez plus loin

Scroll

L’élément DOM, sur lequel positionné votre étape, n’est pas directement visible sur votre écran ?

Scrollez au sein de vos écran en ajoutant le paramètre suivant à votre étape :

onShow: function() {
	$('.left-container').animate({scrollTop: 1100 });
}

Stop pollution

Afin d’éviter de lancer la visite guidée à chaque fois qu’un utilisateur ouvre un écran, appuyez vous sur son navigateur. Le localStorage est là pour vous.

1. Après le lancement d’une visite, stockez l’information :

onEnd: function() {
	localStorage.setItem("custom-tour-launched", "true");
}

2. Et ne lancez la visite guidée que si elle n’a jamais été lancée :

if(localStorage.getItem("custom-tour-launched") != "true"){
	startCustomTour();
}

Lancement manuel

Avec vos visites guidées, vos utilisateurs voudront sûrement être capables de les lancer à nouveau pour être sûrs de ne rien avoir râté !

Mettez leur à disposition une action permettant de lancer à tout moment la visite :

var a = $( "<a class='dropdown-item text-center text-primary notify-item notify-all'>Lancer le tour</a>" )
	.insertBefore( "#about-section .pt-1" );
a.on('click', function(event) {
	startTour();
});