Comment construire une visite utilisateur avec Shepherd en JavaScript

Ce que vous allez créer

introduction

Malgré la simplicité avec laquelle nous essayons de créer nos applications Web, il est souvent utile de guider les nouveaux utilisateurs lors de leur première expérience. Les visites visuelles sont probablement le moyen le plus simple.

Si vous avez suivi mon programme Envato Tuts + Création de votre démarrage avec PHP, vous connaissez déjà Meeting Planner. Après avoir vu les utilisateurs planifier leur première réunion, j'ai décidé qu'il serait préférable de créer un guide..

Au début, j’avais envisagé de le construire moi-même, mais j’ai trouvé une option open source, Shepherd..

Dans le tutoriel d'aujourd'hui, je vais vous présenter la création d'une visite visuelle d'utilisateur avec Shepherd. Utiliser Shepherd est relativement simple, et je vais passer en revue certains de mes propres codes que j'ai utilisés pour rationaliser le processus de création..

Shepherd est une offre open source de HubSpot, un service de marketing entrant. Félicitations à eux pour offrir une bibliothèque robuste avec une bonne documentation.

Je participe aux discussions ci-dessous, n'hésitez donc pas à poser des questions et à partager vos commentaires. Je serais particulièrement intéressé par votre expérience avec d’autres solutions de guides visuels. Vous pouvez également me joindre sur Twitter @lookahead_io.

Comment fonctionne le berger

Passons en revue un scénario simple pour Shepherd.

L'intégration d'une visite de base avec Shepherd à votre application est simple. Tout d’abord, vous choisissez un fichier de thème et intégrez leur JavaScript comme ceci:

Vous pouvez télécharger les fichiers à partir de la page Shepherd GitHub. J'utilise le berger-thème-arrows.css ci-dessus, mais vous pouvez choisir l’une des valeurs par défaut ci-dessous et les personnaliser:

Ensuite, vous créez un objet de tour:

visite var; tour = new Shepherd.Tour (valeurs par défaut: classes: 'shepherd-theme-arrows', scrollTo: true);

Les valeurs par défaut peuvent être définies pour toutes les étapes lors de la création de la visite. Les classes font référence aux définitions de thème que vous avez utilisées, par exemple. berger-thème-flèches. Et faire défiler assure utilement que toutes les étapes apparaissent dans la fenêtre visible.

Ensuite, vous ajoutez des étapes individuelles à la visite:

tour.addStep ('exemple-step', text: 'Cette étape est attachée au bas de la . exemple-sélecteur-css element. ', attachTo:' .example-css-selector bottom ', classes:' exemple-step-extra-class ', boutons: [texte:' Suivant ', action: tour.next]);

le texte est ce qui apparaît dans le corps du tour visuel. attacher à pointe vers un sélecteur CSS pour l'élément sur lequel vous souhaitez que le menu contextuel de la visite pointe dans cette étape. le boutons vous permettent de définir un ou plusieurs boutons et leurs actions, par exemple. Suivant.

Et enfin, vous commencez le tour:

tour.start ();

Shepherd s'appuie sur Tether, une autre offre open source HubSpot, qui permet de positionner des éléments sur d'autres éléments d'une page. Tether veille à ce que vos pas ne débordent pas de l'écran ou ne soient pas recadrés.

Bien que je n’aie eu aucun problème avec Tether, j’ai trouvé des problèmes avec Shepherd qui n’affichait pas correctement les flèches sur certains éléments. Cela s'est produit au hasard, et je ne suis pas le seul à avoir ce problème. L’équipe HubSpot n’a répondu à aucune de mes demandes GitHub après deux semaines, ce qui est un peu décevant. Pourtant, Shepherd est globalement une excellente bibliothèque JavaScript..

Intégration de Tether dans votre propre application

Lorsque j'ai commencé à expérimenter Shepherd, j'ai vite compris que la rédaction d'un guide comportant de nombreuses étapes pouvait être assez longue. C'est quelque chose que j'ai abordé dans ma propre mise en œuvre.

Je ne voulais pas créer la tournée avec un long paquet de code JavaScript qui devrait être maintenu avec le temps. Au lieu de cela, j'ai choisi de créer un tableau et de personnaliser les boutons par programme, selon que les utilisateurs étaient au début ou à la fin de la visite..

Par exemple, je crée un pas[] array et défini le tour en renseignant le tableau:

visite var; var steps = []; steps.push (['. nav-tabs top', 'Bienvenue', 'Permettez-moi de vous montrer comment planifier un' + titre + '. Si vous préférez, vous pouvez désactiver ce guide.

']); steps.push (['# headingWho top', 'Qui voudriez-vous inviter?', 'Vous pouvez ajouter une personne ou un groupe de personnes à votre' + titre + '. 
Cliquez sur le bouton Personne pour ajouter des participants..
']); steps.push (['' # invitation-url bottom ',' Inviter par courrier électronique ',' Vous pouvez également envoyer le lien de la réunion par courrier électronique à votre (vos) participant (s) ']); steps.push (['# headingWhat bottom', 'De quoi parle votre réunion?', 'Vous pouvez personnaliser le sujet de votre' + titre + '. Nous allons l’utiliser pour les courriels d’invitation et de rappel.Cliquez sur le bouton du crayon pour éditer le sujet..
']); if ($ ('# capingact' '). length> 0) steps.push ([' # capuchingActivity top ',' Que voulez-vous faire? ',' Vous pouvez suggérer une ou plusieurs idées d'activités. Avec plusieurs idées, vos participants peuvent vous aider à choisir leur favori. Cliquez sur le bouton plus pour suggérer des activités..
']);  steps.push (['# headingWhen top', 'Quand voulez-vous vous rencontrer?', 'Suggérez une ou plusieurs dates et heures pour votre' + title + '. Avec plus d'un, vos participants pourront vous aider à choisir. Cliquez sur le bouton + pour les ajouter.
']); steps.push (['' # headingWhere top ',' Où souhaitez-vous vous rencontrer? ',' Suggérez un ou plusieurs lieux pour votre '+ titre +'. Avec plusieurs lieux, vos participants peuvent vous aider à choisir. Nous utilisons Google Adresses pour simplifier leur ajout. Cliquez sur le bouton + pour commencer.
']); steps.push (['. virtualThing top', 'Est-ce une réunion virtuelle?', 'Basculer entre en personne et virtuel '+ title +' tels que les appels téléphoniques ou les conférences en ligne. ']); steps.push (['# actionSend top', 'Envoi d'invitations', 'La planification est collaborative. Après avoir ajouté des heures et des lieux, vous pouvez Inviter les participants choisissent leurs favoris. Un lieu n'est pas nécessaire pour virtual '+ title +' \ s.']); steps.push (['# actionFinalize right', 'Finalisation du plan', 'Une fois que vous avez choisi l'heure et le lieu, vous pouvez Achevée le plan. Nous enverrons un courrier électronique aux invitations et aux rappels de configuration. ']); steps.push (['# tourdiscussion left', 'Partager des messages avec les participants', 'Vous pouvez écrire avec les participants messages languette. Les messages sont livrés par email.
']); steps.push (['. conteneur', 'Poser une question', 'Besoin d’aide? Posez une question et nous vous répondrons aussi vite que possible. Si vous préférez, vous pouvez désactiver le guide dans les paramètres.
']);

Chaque élément de tableau que j'ai ajouté incluait trois éléments:

L'élément visuel CSS que cette étape pointe vers et où, par exemple. '#headingWho top'
Texte pour l'en-tête, par exemple. 'Quand voulez-vous qu'on se rencontre?'
Texte pour l'instruction

Maintenir ce tableau était beaucoup plus simple pour moi que de définir des boutons pour chaque étape du tutoriel. Cependant, cela signifiait que je devais définir par programmation des boutons au fur et à mesure que je chargeais les étapes du tour..

J'ai écrit ce code pour ajouter et répondre correctement aux boutons de la tournée. A chaque pas, il crée un bouton tableau, que je devrais sinon définir manuellement:

pour (i = 0; i < steps.length; i++)  buttons=[]; // no back button at the start if (i>0) buttons.push (text: 'Back', classes: 'shepherd-button-secondary', action: function () return tour.back (););  // pas de bouton suivant sur la dernière étape if (i! = (steps.length-1)) buttons.push (text: 'Next', classes: 'shepherd-button-primary', action: function ()  retour tour.next (););  else buttons.push (text: 'Close', classes: 'shepherd-button-primary', action: function () return tour.hide (););

Par exemple, la première étape n'a pas Retour bouton, et la dernière étape n'a pas Suivant bouton. Mais la dernière étape a un Fermer bouton.

Ensuite, chacun étape de mon tableau et chacun bouton tableau est ajouté à la tournée.

tour.addStep ('step _' + i, text: steps [i] [2], titre: steps [i] [1], attachTo: steps [i] [0], // classes: 'pasteur pasteur ouvert berger-thème-flèches berger-transparent-texte ', boutons: boutons,);

En utilisant cette approche, je n'ai pas eu à redéfinir à plusieurs reprises les mêmes boutons pour chaque étape de mon tutoriel. Il offre également des possibilités de programmation pour personnaliser le circuit de manière dynamique pour l’avenir..

En utilisant Yii, le cadre de programmation PHP que j'ai choisi, j'ai ajouté les fichiers d'inclusion nécessaires à mon fichier d'actif. Cela se charge sur des pages particulières où la visite est nécessaire. Dans mon cas, la page de planification de réunion:

Vous verrez ci-dessus le CSS pour le thème Shepherd et le JavaScript pour Tether, Shepherd et mon fichier de définition de tournée, meeting_tour.js.

J'ai également ajouté CSS pour contrôler la largeur totale de mon popup 40% de la fenêtre:

.shepherd-element.shepherd-theme-arrows max-width: 40%;

Vous pouvez regarder la vidéo d'exemple de la tournée ci-dessus ou à Vimeo. Si vous souhaitez l'essayer vous-même, inscrivez-vous à Meeting Planner et vous serez immédiatement dirigé vers la visite de planification..

Autres points à considérer

Désactiver la visite visuelle

J'ai créé un paramètre utilisateur pour permettre aux utilisateurs de désactiver rapidement la visite. Plutôt que d’inclure un bouton Off gênant à chaque étape, j’ai ajouté un lien vers éteindre le guide sur les premières et dernières étapes de la visite:

La désactivation se fait de manière interactive via AJAX et affiche un lien utile vers la page de paramètres ci-dessous. Cela aide les nouveaux utilisateurs à trouver facilement comment réactiver la visite:

Capacités avancées de berger

Je viens de vous montrer les bases de Shepherd et comment l'intégrer rapidement à votre application Web. Jusqu'ici, cela a bien fonctionné pour moi, mis à part les problèmes occasionnels de flèches. Cependant, Shepherd offre beaucoup plus que ce que j'ai déjà examiné, en particulier en ce qui concerne le traitement et la gestion des événements. Cela vous permet d'adapter votre visite à votre application et à l'état actuel de l'utilisateur de manière plus personnalisée. Ils ont aussi une très bonne documentation.

Par exemple, si un utilisateur accède à une zone de votre page Web, l’événement peut automatiquement déclencher le passage à une autre étape de la visite. Je pourrais y plonger dans un prochain tutoriel.

En clôture

J'espère que vous avez aimé apprendre sur Shepherd. Il s’agit bien d’une visite visuelle raffinée et visuellement conviviale pour les développeurs que vous pouvez rapidement intégrer à n’importe quelle application..

Veuillez partager votre expérience avec Shepherd et d'autres bibliothèques de visites visuelles dans les commentaires. Et n'hésitez pas à poser des questions.

Vous pouvez également toujours me joindre directement sur Twitter @lookahead_io. Si vous souhaitez lire plus de mes tutoriels Envato Tuts +, en voici quelques-uns intéressants:

Liens connexes

Tour de berger
Berger sur GitHub
Planificateur de réunion (créez votre première réunion pour voir la visite visuelle)

Code