Présentez votre site à l'aide de tutoriels interactifs grâce à EnjoyHint

Les utilisateurs de votre site internet sont LA raison principale de votre succès et de la prospérité de votre activité, il est donc indispensable de leur offrir une expérience agréable lors de leur visite sur votre site internet. Cependant il peut arriver que ceux-ci se sentent désorientés lors de leur arrivée sur une page trop chargée en informations, ce qui engendre un taux de rebond élevé et la perte de clients potentiels.

Le but de cet article est de découvrir le processus de création de "hints" (ou étapes) pour un site web. Tout d'abord, nous verrons comment structurer l'implémentation de la librairie, puis nous allons créer une séquence d'étapes pour faire une visite guidée de cette page web. EnjoyHint nécessite les plugins et bibliothèques suivantes :

• jQuery >= v3.5.1
• jQuery.scrollTo >= v2.1.2
• KineticJS > v5.1.0

Pour consuler une démo complète, vous pouvez visiter la page de démonstration officielle

Pourquoi utiliser EnjoyHint ?

L'objectif principal d'EnjoyHint est de vous donner l'opportunité d'aider un utilisateur à trouver son chemin à travers les fonctionnalités de vos pages web. Cela peut être très utile dans le cas d'un site vaste avec des tonnes d'éléments. Vous pouvez surligner un élément et y ajouter une description, mettre une zone en surbrillance, ajouter des events, etc.

Installation

Vous pouvez installer enjoyhint via node ou bower, les gestionnaires de packages, via les commandes suivantes :

npm install xbs-enjoyhint

bower install xbs-enjoyhint

Sinon vous pouvez aussi intégrer les bibliothèques externes en CDN :

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>

Et télécharger la librairie EnjoyHint, pour pouvoir insérer les fichiers internes :

<link href="<url_de_votre_serveur>/enjoyhint/enjoyhint.css" rel="stylesheet"> 
<script src="<url_de_votre_serveur>/enjoyhint/enjoyhint.min.js"></script>

Initialisation

Pour initialiser une nouvelle instance EnjoyHint :

//initialize instance
var enjoyhint_instance = new EnjoyHint({
    onSkip: function(){},
    onEnd: function(){}
});

Les options onSkip et onEnd permettent d'effectuer des actions lorsque le tutoriel est passé ou terminé. Pour consulter toutes les options disponibles, vous pouvez parcourir le Readme.

Nous pouvons maintenant implémenter les étapes du tutoriel :

var enjoyhint_script_steps = [{
    /*1ère étape*/
    //"selecteur" : "texte"
    //options...
}, {
    /*2e étape*/
    //"selecteur" : "texte"
    //options...
}];

L'instruction suivante consiste à définir la description des étapes en tant que configuration d'instance :

enjoyhint_instance.set(enjoyhint_script_steps);

Tout est prêt et nous pouvons exécuter notre script maintenant :

enjoyhint_instance.run();

Exemple concret sur cet article

CLIQUEZ ICI pour lancer le tutoriel exemple appliqué sur cette page :)

							function loadTutorial() {
	//initialize instance
	var enjoyhint_instance = new EnjoyHint({
		onSkip: function(){},
		onEnd: function(){}
	});

	//simple config
	var enjoyhint_script_steps = [
		{
			"next .mainTitle" : "Voici le titre principal de l'article",
			margin: 0,
			nextButton : {text: "Suivant"},
			skipButton : {text: "Passer"}
		},
		{
			"next #required" : "Liste des plugins nécessaires",
			margin: 0,
			nextButton : {text: "Suivant"},
			prevButton : {text: "Précédent"},
			skipButton : {text: "Passer"}
		},
		{
			"next #linkTutorial" : "Cliquer pour relancer le tutoriel",
			prevButton : {text: "Précédent"},
			nextButton : {text: "Fin"},
			showSkip: false,
			shape: "circle"
		}
	];

	//set script config
	enjoyhint_instance.set(enjoyhint_script_steps);

	//run Enjoyhint script
	enjoyhint_instance.run();
}
						

Conclusion

EnjoyHint vous permet de créer des guides étape par étape en ajoutant des indications interactives à votre site Web. Cet outil vous offre des fonctionnalités supplémentaires utiles, telles que la création d'événements personnalisés lors d'un clic par exemple. Vous pouvez également utiliser du HTML dans la description de l'étape, ce qui vous permet de modifier son apparence selon vos besoins.

N'hésitez pas à consulter la documentation ainsi que la page de démonstration officielle.