FlowerDocs intègre la librairie Hopscotch de LinkedIn, afin de donner la possibilité aux intégrateurs de solution basée sur FlowerDocs, 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

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();
});