So erstellen Sie eine Benutzertour mit Shepherd in JavaScript

Was Sie erstellen werden

Einführung

Unabhängig davon, wie einfach wir versuchen, unsere Webanwendungen zu erstellen, ist es oft hilfreich, neue Benutzer durch ihre ersten Erfahrungen zu führen. Visuelle Touren sind wahrscheinlich der einfachste Weg.

Wenn Sie meinen Envato Tuts + Aufbau Ihres Startups mit der PHP-Serie gefolgt sind, sind Sie mit Meeting Planner vertraut. Nachdem ich die Benutzer bei der Planung ihres ersten Meetings gesehen hatte, entschied ich, dass es am besten ist, eine Art Leitfaden zu erstellen.

Zuerst überlegte ich mir, es selbst zu bauen, aber dann fand ich eine Open-Source-Option, Shepherd.

In dem heutigen Tutorial werde ich Ihnen den Aufbau einer visuellen Benutzerführung mit Shepherd vorstellen. Shepherd zu verwenden ist relativ unkompliziert, und ich werde einige meiner eigenen Codes überprüfen, die ich zur Vereinfachung des Authoring-Prozesses verwendet habe.

Shepherd ist ein Open-Source-Angebot von HubSpot, einem Inbound-Marketing-Service. Ein großes Lob an sie für das Angebot einer robusten Bibliothek mit guter Dokumentation.

Ich nehme an den Kommentarthreads unten teil, also zögern Sie nicht, Fragen zu stellen und Ihr Feedback zu teilen. Ich bin besonders an Ihren Erfahrungen mit anderen visuellen Reiseleiterlösungen interessiert. Sie können mich auch auf Twitter @lookahead_io erreichen.

Wie arbeitet der Hirte?

Gehen wir durch ein einfaches Szenario für Shepherd.

Die Integration einer grundlegenden Tour mit Shepherd in Ihre Anwendung ist unkompliziert. Zunächst wählen Sie eine Design-Datei aus und integrieren ihr JavaScript folgendermaßen:

Sie können die Dateien von der Shepherd GitHub-Seite herunterladen. Ich benutze die Hirte-Thema-Pfeile.css oben, Sie können jedoch eine der folgenden Standardeinstellungen auswählen und anpassen:

Als Nächstes erstellen Sie ein Tourobjekt:

var tour; tour = new Shepherd.Tour (defaults: classes: 'Hirte-Thema-Pfeile', scrollTo: true);

Die Standardwerte können für alle Schritte definiert werden, wenn Sie die Tour erstellen. Die Klassen beziehen sich auf die von Ihnen verwendeten Themendefinitionen, z. Hirte-Thema-Pfeile. Und scrollTo stellt sicher, dass alle Schritte im sichtbaren Ansichtsfenster angezeigt werden.

Dann fügen Sie der Tour einzelne Schritte hinzu:

tour.addStep ('example-step', text: 'Dieser Schritt befindet sich am unteren Rand des . Beispiel-CSS-Selektor element. ', attachTo:' .example-css-selector bottom ', Klassen:' example-step-extra-class ', Schaltflächen: [text:' Next ', action: tour.next]);

Das Text ist das, was im Körper der visuellen Tour erscheint. Anhängen an zeigt auf einen CSS-Selektor für das Element, auf das das Tour-Popup in diesem Schritt zeigen soll. Das Tasten können Sie eine oder mehrere Schaltflächen und deren Aktionen definieren, z. Nächster.

Und zum Schluss starten Sie die Tour:

tour.start ();

Shepherd baut auf Tether auf, einem weiteren HubSpot-Open-Source-Angebot, mit dem Elemente auf anderen Elementen auf einer Seite positioniert werden können. Tether sorgt dafür, dass Ihre Schritte niemals den Bildschirm überlaufen oder abgeschnitten werden.

Ich hatte zwar keine Probleme mit Tether, aber ich hatte Probleme mit Shepherd, bei dem auf einigen Elementen keine Pfeile angezeigt wurden. Dies geschah zufällig und ich bin nicht der einzige mit diesem Problem. Das HubSpot-Team hat nach zwei Wochen keine meiner GitHub-Anfragen beantwortet, was etwas enttäuschend ist. Dennoch ist Shepherd insgesamt eine großartige JavaScript-Bibliothek.

Tether in Ihre eigene Anwendung integrieren

Als ich anfing, mit Shepherd zu experimentieren, stellte ich schnell fest, dass die Erstellung eines Leitfadens mit vielen Schritten recht langwierig werden konnte. Dies ist etwas, was ich in meiner eigenen Implementierung angesprochen habe.

Ich wollte die Tour nicht mit einem längeren JavaScript-Code bündeln, der im Laufe der Zeit gepflegt werden müsste. Stattdessen habe ich mich dazu entschieden, ein Array zu erstellen und die Schaltflächen programmgesteuert anzupassen, je nachdem, ob sich Benutzer am Anfang oder am Ende der Tour befanden.

Zum Beispiel erstelle ich eine Schritte[] Array und definierte die Tour durch Füllen des Arrays:

var tour; var Schritte = []; steps.push (['. nav-tabs top', 'Welcome', 'Erlaube mir, dir zu zeigen, wie man einen' + title + 'plant.

Wenn Sie möchten, können Sie diese Anleitung deaktivieren.

']); steps.push (['# headingWho top', 'Wen möchten Sie einladen?', 'Sie können eine Person oder eine Gruppe von Personen zu Ihrem' + title + 'hinzufügen.

Klicken Sie auf die Personenschaltfläche, um Teilnehmer hinzuzufügen.

']); steps.push (['# invitation-url bottom', 'Invitation by email', 'Sie können den Meeting-Link alternativ an Ihre Teilnehmer senden']); steps.push (['# titleWhat bottom', 'Worum geht es in Ihrer Besprechung?', 'Sie können den Betreff Ihres' + title + 'anpassen. Wir werden ihn für die Einladungs- und Erinnerungs-E-Mails verwenden.

Klicken Sie auf die Bleistift-Schaltfläche, um den Betreff zu bearbeiten.

']); if ($ ('# headingActivity'). length> 0) steps.push (['# headingActivity oben', 'Was möchten Sie tun?', 'Sie können eine oder mehrere Aktivitätsideen vorschlagen. Mit mehreren Ideen können Sie Ihre Teilnehmer können Ihnen helfen, ihren Favoriten auszuwählen.

Klicken Sie auf die Plus-Schaltfläche, um Aktivitäten vorzuschlagen.

']); steps.push (['# headingWenn top', 'Wann möchten Sie sich treffen?', 'Schlagen Sie ein oder mehrere Datums- und Zeitangaben für Ihren' + title + 'vor. Bei mehr als einem können Ihre Teilnehmer Ihnen bei der Auswahl helfen.

Klicken Sie auf die Schaltfläche +, um sie hinzuzufügen.

']); steps.push (['# titleWhere top', 'Wo möchten Sie sich treffen?', 'Schlagen Sie einen oder mehrere Orte für Ihren' + Titel + 'vor. Bei mehreren Orten können Ihre Teilnehmer Ihnen bei der Auswahl helfen.

Wir verwenden Google Places, um das Hinzufügen zu vereinfachen. Klicken Sie auf die Schaltfläche +, um zu beginnen.

']); steps.push (['. virtualThing top', 'Ist dies ein virtuelles Meeting?', 'Wechseln zwischen persönlich und virtuell '+ title +' wie Telefonanrufe oder Online-Konferenzen. ']); steps.push (['# actionSend top', 'Einladungen senden', 'Die Planung ist kollaborativ. Nachdem Sie Zeiten und Orte hinzugefügt haben, können Sie dies tun Einladen Teilnehmer, um ihre Favoriten auszuwählen. Für virtuelle '+ title +' \ s ist kein Platz erforderlich.']); steps.push (['# actionFinalize right', 'Finalisierung des Plans', 'Wenn Sie einen Zeitpunkt und einen Ort auswählen, können Sie das tun Komplett der Plan. Wir werden die Einladungen und Setup-Erinnerungen per E-Mail verschicken. ']); steps.push (['# tourDiscussion left', 'Messages mit Teilnehmern teilen', 'Sie können mit den Teilnehmern auf der Site hin und her schreiben Mitteilungen Tab.

Nachrichten werden per E-Mail zugestellt.

']); steps.push (['. container', 'Eine Frage stellen', 'Benötigen Sie Hilfe?) Stellen Sie eine Frage und wir werden so schnell wie möglich antworten.

Wenn Sie möchten, können Sie die Anleitung in den Einstellungen deaktivieren.

']);

Jedes hinzugefügte Array-Element enthielt drei Elemente:

Das visuelle CSS-Element, auf das dieser Schritt hinweist, und wo z. '#headingWho top'
Text für den Header, z. 'Wann willst du dich treffen?'
Text für die Anweisung

Die Pflege dieses Arrays war für mich viel einfacher als das Definieren von Schaltflächen für jeden einzelnen Schritt des Lernprogramms. Dies bedeutete jedoch, dass ich Tasten programmatisch definieren musste, während ich die Schritte in die Tour lud.

Ich habe diesen Code geschrieben, um Schaltflächen für die Tour richtig hinzuzufügen und darauf zu reagieren. Mit jedem Schritt wird ein erstellt Taste Array, das ich sonst manuell definieren müsste:

für (i = 0; i < steps.length; i++)  buttons=[]; // no back button at the start if (i>0) buttons.push (text: 'Back', Klassen: 'Shepherd-button-secondary', Aktion: function () return tour.back (););  // Kein nächster Button im letzten Schritt if (i! = (steps.length-1)) buttons.push (text: 'Next', Klassen: 'Shepherd-button-primary', Aktion: function ()  return tour.next (););  else buttons.push (text: 'Close', Klassen: 'Shepherd-button-primary'), Aktion: function () return tour.hide ();;

Zum Beispiel hat der erste Schritt nein Zurück Taste und der letzte Schritt hat nein Nächster Taste. Aber der letzte Schritt hat eine Schließen Taste.

Dann jeder Schritt von meinem Array und jedem Taste Array wird der Tour hinzugefügt.

tour.addStep ('step _' + i, text: steps [i] [2], titel: steps [i] [1], attachTo: steps [i] [0], // Klassen: 'Shepherd Shepherd-open Hirte-Thema-Pfeile Hirte-transparenter Text ', Schaltflächen: Schaltflächen,);

Bei diesem Ansatz musste ich nicht die gleichen Schaltflächen für jeden Schritt meines Tutorials neu definieren. Es bietet auch einige programmatische Funktionen, um die Tour für die Zukunft dynamisch anzupassen.

Mit Yii, meinem gewählten PHP-Programmier-Framework, habe ich meiner Asset-Datei die erforderlichen Include-Dateien hinzugefügt. Dies wird auf bestimmten Seiten geladen, auf denen die Tour benötigt wird. In meinem Fall die Besprechungsplanungsseite:

Sie sehen oben das CSS für das Shepherd-Thema und das JavaScript für Tether, Shepherd und meine Tourdefinitionsdatei, meeting_tour.js.

Ich habe auch CSS hinzugefügt, um die Gesamtbreite meines Tour-Popups zu steuern 40% des Ansichtsfensters:

.Schäfer-Element. Schäfer-Theme-Pfeile max-width: 40%;

Sie können das Beispiel-Tourvideo oben oder bei Vimeo ansehen. Wenn Sie es selbst ausprobieren möchten, melden Sie sich bei Meeting Planner an und Sie werden sofort zur Terminplanungstour weitergeleitet.

Andere Dinge zu beachten

Deaktivieren der visuellen Tour

Ich habe eine Benutzereinstellung erstellt, in der Benutzer die Tour schnell abschalten können. Anstatt bei jedem Schritt einen ablenkenden Aus-Button zu verwenden, fügte ich einen Link hinzu Schalten Sie den Guide aus auf den ersten und letzten Schritten der Tour:

Das Deaktivieren erfolgt interaktiv über AJAX und zeigt einen hilfreichen Link zu der Einstellungsseite. So können neue Benutzer leicht herausfinden, wie sie die Tour wieder aktivieren können:

Hirten fortschrittliche Fähigkeiten

Ich habe Ihnen gerade die Grundlagen von Shepherd gezeigt und wie Sie es schnell in Ihre Webanwendung integrieren können. Bisher hat es gut funktioniert, abgesehen von den gelegentlichen Problemen mit Pfeilen. Shepherd bietet jedoch viel mehr als bisher, insbesondere im Bereich der Ereignisverarbeitung und -verwaltung. Auf diese Weise können Sie Ihre Tour an Ihre Anwendung und den aktuellen Status des Benutzers angepasst werden. Sie haben auch eine sehr gute Dokumentation.

Wenn beispielsweise ein Benutzer in einen Bereich Ihrer Webseite springt, kann das Ereignis automatisch einen Sprung zu einem anderen Schritt der Tour auslösen. Ich könnte in einem zukünftigen Tutorial darauf eingehen.

Abschließend

Ich hoffe, es hat dir Spaß gemacht, über Shepherd zu lernen. Es ist sicherlich eine visuell ausgefeilte, entwicklerfreundliche visuelle Tour, die Sie schnell in jede Anwendung integrieren können.

Teilen Sie Ihre Erfahrungen mit Shepherd und anderen visuellen Tourbibliotheken in den Kommentaren mit. Und zögern Sie nicht, Fragen zu stellen.

Sie können mich auch immer direkt auf Twitter @lookahead_io erreichen. Wenn Sie mehr über meine Envato Tuts + -Tutorials lesen möchten, finden Sie hier einige interessante: