Führen Sie Besucher Schritt für Schritt durch Ihre Website oder App, auch über mehrere Seiten.

Öffnen Sie Produkttouren im Menü.

Eine Produkttour zeigt Schritt für Schritt eine Sprechblase neben einer echten Schaltfläche, einem Feld oder Menü Ihrer Website. Ideal, um neue Nutzer zu begrüßen, eine neue Funktion zu erklären oder durch die Einrichtung zu führen. Sie funktioniert auf jeder Website oder Web-App mit installiertem Messenger, auch in SaaS-Produkten für angemeldete Nutzer.

Tour erstellen

Klicken Sie auf Neue Tour und geben Sie ihr einen Namen.
Fügen Sie Schritte hinzu (bis zu 10). Für jeden Schritt:
- Element — klicken Sie auf den Cursor im Feld. Ihre Website öffnet sich in einem neuen Fenster; klicken Sie auf das gewünschte Element, und sein Selektor wird eingetragen. Sie können einen CSS-Selektor auch selbst eingeben. Leer lassen für einen Schritt in der Bildschirmmitte.
- Seite (optional) — die Seite des Schritts, z. B. /einstellungen. Leer lassen, um auf der aktuellen Seite zu bleiben.
- Position der Blase — automatisch oder unter, über, rechts oder links vom Element.
- Titel und Text — kurz und klar. Jeder Schritt lässt sich übersetzen; eine leere Übersetzung zeigt den Text in der Sprache Ihres Workspace.
Wählen Sie Ihre Farbe und wie die Tour startet.

Im Auswahlfenster wechseln Sie mit Seiten durchsuchen zuerst zu einer anderen Seite und klicken dann auf Wählen.

Touren über mehrere Seiten

Geben Sie einem Schritt eine Seite, und die Tour bringt Besucher beim Erreichen dieses Schritts dorthin und läuft auf der neuen Seite weiter. Besucher können zwischen den Schritten vor- und zurückgehen; die Tour merkt sich 30 Minuten lang in diesem Browser-Tab, wo sie war. Die Seiten müssen auf derselben Website wie der Messenger liegen.

Wie eine Tour startet

Von selbst auf passenden Seiten — wählen Sie unter Wer und wann die Seiten und eine Verzögerung. Jede Person sieht sie einmal: Nach Abschluss oder Schließen startet sie nicht erneut, unvollendet höchstens einmal am Tag.
Nur von Ihrer Seite aus — starten Sie sie per JavaScript, z. B. über einen Link „Rundgang zeigen“:

Shopxare('startTour', 'TOUR_ID')

Der Editor zeigt die genaue Zeile zum Kopieren. So gestartet, kann eine Tour jederzeit wiederholt werden.

Vor dem Livegang testen

Geben Sie unter Auf Ihrer Website Ihre Seitenadresse ein und klicken Sie auf Auf Ihrer Website ansehen. Die Tour läuft nur für Sie, auch als Entwurf, und wird nicht gezählt. Der Vorschaulink gilt eine Stunde.

Tipps für stabile Selektoren

Selektoren auf Basis von IDs oder eigenen Attributen funktionieren auch nach Designänderungen. Fügen Sie den gewünschten Elementen ein data-tour-Attribut hinzu:

<button data-tour="neues-projekt">Neues Projekt</button>

und verwenden Sie [data-tour="neues-projekt"] als Element. Wird ein Element nicht innerhalb von 3 Sekunden gefunden, öffnet sich der Schritt in der Bildschirmmitte.

Ergebnisse

Jede Tour zeigt, wie viele Personen sie gesehen, abgeschlossen und geschlossen haben — jede Person einmal gezählt. Sie können auch eine Zielgruppe oder ein Segment sowie Start- und Enddatum wählen.