25
MARS

Intro.js - Un système de guide interactif complet pas à pas en JS

Publié le 25/03/13 à 08h38 par DJo

Intro.js est une bibliothèque Javascript permettant de mettre en place un système de guide interactif pas à pas pour aider vos nouveaux utilisateurs.

Intro.js est une bibliothèque Javascript permettant de mettre en place un système de guide interactif pas à pas pour aider vos nouveaux utilisateurs.

Vous venez de lancer un nouveau service, nouvel outil web based, et souhaitez que vos visiteurs le prenne rapidement en main ?

Intro.js vous permettra de guider pas à pas tous vos nouveaux utilisateurs à l'aide d'une visite guidée interactive.

Une fois le guide lancé, le script va griser l'ensemble du site et mettre en avant la zone à détailler dans l'étape. Le scroll est fait automatiquement pour que l'utilisateur puisse suivre les étapes pas à pas.

Intro.js - Visite guidée interactive en Javascript

Fonctionnellement, le script propose de naviguer entre les étapes du guide avec les boutons suivant / précédent ou à l'aide des touches directionnelles du clavier.

Un bouton skip et la touche ESC permettent d'arrêter à tout moment la visite guidée.

Les effets sont bien réalisés, mais ne permettent pas pour le moment une compatibilité navigateur avancée: IE10+, Chrome, Firefox uniquement... Dommage pour un script qui a vocation d'aider les monsieur et madame tout le monde, trop souvent encore sous IE8 / 9.

D'un côté mise en place, c'est très simple, il suffit de spécifier deux attributs data sur l'élément HTML à expliquer: data-step pour le numéro de l'étape, data-intro pour le texte à afficher:

<p data-intro="Ceci est une super feature!" data-step="1">Super feature à expliquer</p>

Une API vous permettra de contrôler le guide comme vous le souhaitez.

Un bon script de visite guidée interactive qui mérite encore de murir un peu pour améliorer sa compatibilité navigateur (Priorité dans le roadmap).

 

Site Officiel

Personne n'a baraguiné de chtite phrase pour le moment !


Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web