Tooltips bieten eine unaufdringliche und kontextbezogene Erfahrung, um Kunden in Ihrem Produkt zu informieren und zu engagieren, sodass Sie eine schnellere Akzeptanz fördern können. Sie sind ideal, um Aufmerksamkeit auf neue Funktionen zu lenken und anderen Content für users sichtbar zu machen, wenn sie danach suchen, z. B. einen Artikel aus Ihrem Help Center anzuzeigen oder eine Product Tour zu starten.
Das Erstellen eines Tooltips ist schnell und einfach und erfordert keinen Code. So starten Sie:
Gestalten Sie Ihre Tooltips
Gehen Sie zuerst im Hauptmenü zu Outbound und klicken Sie oben rechts auf + Neue Nachricht.
Wählen Sie dann Tooltips als Inhaltstyp aus.
Sie können auch mit einer vorgefertigten Vorlage beginnen, indem Sie diesen Inhaltstyp in der linken Seitenleiste auswählen.
Hinweis:
Tooltips sind speziell für Desktop-Web-Apps konzipiert und werden in nativen mobilen Apps nicht unterstützt. Für die Schulung und Einbindung von Kunden in Ihrer mobilen App verwenden Sie Mobile Carousels.
Sie können mehrere Tooltips gleichzeitig hinzufügen, indem Sie sie derselben Gruppe zuordnen.
Diese haben dieselbe Zielgruppenansprache, Zeitplanung und Ziele. Es ist ideal, alle Onboarding-Tooltips für neue customers zusammenzufassen oder edukative Tooltips zu gruppieren, um einen besonders komplexen Teil Ihres Produkts zu unterstützen.
Sie können 100 Tooltips pro Gruppe und insgesamt 50 Gruppen erstellen.
Geben Sie Ihren Tooltips als Nächstes einen kurzen und prägnanten Titel. Wenn Sie beispielsweise eine neue Produktfunktion ankündigen, könnten Sie ihn „Feature launch“ nennen:
Wählen Sie eine Website, auf der Sie Ihre Tooltips hinzufügen möchten
Um mit der Gestaltung eines Tooltips zu beginnen, klicken Sie auf „Tooltips hinzufügen“:
Ein neues Fenster öffnet sich. Fügen Sie hier die Website hinzu, auf der Sie Ihre Tooltips einfügen möchten:
Diese URL dient nur zur Auswahl der richtigen Website – sie ist nicht die Ziel-URL, auf der Sie Ihren Tooltip den customers anzeigen. Seiten- und Zielgruppenregeln können Sie in einem späteren Schritt festlegen.
Nachdem Sie eine URL hinzugefügt haben, klicken Sie auf „Website öffnen“.
Wählen Sie aus, wo Sie Ihren Tooltip hinzufügen möchten
Sie können von hier aus zu einer anderen Seite navigieren, wenn dieser Tooltip für eine andere Seite gedacht ist.
Klicken Sie nun auf „Tooltip hinzufügen“, um mit der Gestaltung Ihres Tooltips auf dieser Seite zu beginnen:
Wählen Sie ein Element auf der Seite aus, an dem Sie Ihren Tooltip platzieren möchten:
Fügen Sie Ihrem Tooltip Inhalt hinzu
Sie können stilisierten Text verwenden und Links, Bilder, Videos, Code, Aufzählungen und nummerierte Listen hinzufügen.
Folgende Bild- und Videoformate werden unterstützt: PNG, JPG, JPEG, GIF und MP4.
Sie können auch Smart Links verwenden, um nach Inhalten zu suchen, die Sie bereits in Intercom erstellt haben. Zum Beispiel könnten Sie einen Smart Link zu einem Artikel in Ihrem Help Center hinzufügen, der weitere Informationen bietet, oder eine Product Tour starten, die Sie von diesem Tooltip aus starten möchten:
Hinweis:
Smart Links finden nur live (veröffentlichte) Inhalte, die Sie in Intercom erstellt haben, und ignorieren alle Zielgruppenregeln, die Sie für diese Inhalte festgelegt haben.
Inhalte, die durch einen Smart Link ausgelöst werden, werden beim Vorschauen eines Tooltips im Editor nicht angezeigt.
Gestalten Sie Ihren Tooltip
Symbol – Wählen Sie dies, wenn Sie möchten, dass ein Symbol neben einem Element auf der Seite angezeigt wird.
Kein Symbol – Wählen Sie dies, wenn der Inhalt nahtlos erscheinen soll, wenn ein Kunde mit der Maus über ein Element fährt.
Beschriftung – Wählen Sie dies, wenn Sie neben einem Element eine Beschriftung wie „Neu“ oder „Beta“ für eine Funktion in Ihrem Produkt hinzufügen möchten. Beachten Sie, dass Beschriftungen auf 16 Zeichen begrenzt sind.
Symboltyp – Wählen Sie aus, welchen Symboltyp Sie anzeigen möchten, z. B. ein Leuchtfeuer, um auf eine neue Funktion aufmerksam zu machen.
Symbolfarbe – Passen Sie die Farbe an, um Ihre Marke widerzuspiegeln oder auf der Seite hervorzuheben.
Inhalt anzeigen bei – Legen Sie fest, wann der Tooltip den Inhalt anzeigen soll, z. B. wenn ein Kunde mit der Maus darüber fährt oder darauf klickt.
Animiertes Leuchtfeuer – Dies lässt den Tooltip langsam blinken, bis ein Kunde damit interagiert, danach bleibt er statisch.
Es ist möglich, die Hintergrundfarbe und den Text für alle hier hinzugefügten Tooltips festzulegen. Verwalten Sie dies unter „Gruppeneinstellungen“.
Wählen Sie das richtige Layout für Ihren Tooltip
Verwenden Sie diese Steuerungen, um Ihren Tooltip genau dort zu positionieren oder zu verschieben, wo Sie ihn haben möchten. Sie können mit den folgenden Optionen experimentieren:
Überlagert – Dieser Tooltip schwebt über dem Element (wie der Messenger).
Eingebettet – Dieser Tooltip wird inline mit Ihrem HTML gerendert und kann so das Layout Ihrer Seite anpassen.
Ausrichten an – Bewegen Sie den Tooltip so, dass er mit dem Text in einem Element, neben dem Element oder neben dem Element ausgerichtet ist. Sie können auch einstellen, ob er links, rechts, oben, unten oder zentriert am Element sitzt.
Versatz – Erhöhen Sie die Präzision, indem Sie die Pixelabstände des Tooltips versetzen.
Platzierungseinstellungen
Klicken Sie nun auf „Platzierung“ und entscheiden Sie, ob die Tooltips sitewide (z. B. in Kopf- oder Fußzeilen) oder auf bestimmten Seiten (z. B. nur auf ausgewählten Seiten) angezeigt werden sollen.
Um zu steuern, auf welchen Seiten die Tooltips erscheinen, wählen Sie „Bestimmte Seiten“ und klicken Sie auf „+ Neue Regel hinzufügen“:
Definieren Sie als Nächstes die Seiten-URL, auf der Ihre Tooltips erscheinen sollen. Standardmäßig ist dies die Website-URL, die Sie zu Beginn ausgewählt haben, aber Sie können diese Regel bearbeiten und jede beliebige Seite auf Ihrer Website auswählen:
Stellen Sie sicher, dass die von Ihnen gewählte Seite das Element enthält, auf dem Sie den Tooltip platzieren.
Sie können auch „enthält“ verwenden, um flexibler zu sein, z. B. um Gruppen von Seiten oder Seiten mit einzigartigen Parametern (wie Benutzer-ID) anzusprechen. Zum Beispiel könnten Sie Seiten-URLs auswählen, die „project“ enthalten, um Kunden anzusprechen, wenn sie an Projekten arbeiten.
Fügen Sie so viele Seiten-URL-Regeln hinzu, wie Sie benötigen, um die richtigen Seiten anzusprechen.
Es ist ratsam, die URL direkt aus Ihrer App oder Website zu kopieren und einzufügen, da so alle im Adressfeld Ihres Browsers versteckten Zeichen, wie abschließende Schrägstriche, erfasst werden.
Elementabgleich
Hier können Sie das Element ändern, auf dem Ihr Tooltip platziert ist, indem Sie den CSS-Selektor verwenden, oder wenn Sie sehr spezifischen Text auf Ihrer Seite haben, auf den Sie den Tooltip setzen möchten, versuchen Sie „Nach Text“ zu suchen, um das genaue Element zu finden, das diesen Text enthält.
Wenn Sie den Elementabgleich „Nach Text“ verwenden, wird das erste Element auf der Seite gefunden, das diesen Textbegriff enthält.
Wenn Sie Schwierigkeiten haben, das richtige Element auf Ihrer Seite auszuwählen, versuchen Sie, den CSS-Selektor manuell auszuwählen.
Wenn Sie die Platzierung Ihrer Tooltips fertiggestellt haben, klicken Sie auf „Fertig“.
Sie können jetzt weitere Tooltips zu dieser Gruppe hinzufügen, die dieselben Regeln und Zeitpläne haben.
Wenn Sie Tooltips mit unterschiedlichen Regeln und Zeitplänen erstellen möchten, müssen Sie diesen speichern und dann einen neuen Tooltip gestalten.
Verwaltung von Häufigkeit und Hintergrundfarben:
Wählen Sie die Häufigkeit, mit der diese Tooltips angezeigt werden sollen, und legen Sie unter „Gruppeneinstellungen“ konsistente Hintergrundfarben fest:
Häufigkeit:
Wählen Sie, ob diese Tooltips jedes Mal angezeigt werden sollen, wenn sie die Zielgruppenregeln erfüllen, oder ob sie angezeigt werden sollen, bis sie genutzt werden und dann verschwinden. Dies ist ideal für Funktionsankündigungen oder um Aufmerksamkeit zu erzeugen.
Die Häufigkeit wird auf alle hier hinzugefügten Tooltips angewendet und kann nicht für einzelne Tooltips festgelegt werden.
Die Interaktion mit Tooltips wird durch Browser-Cookies und nicht durch Benutzerkonten verfolgt. Wenn Ihre users eine der folgenden Aktionen ausführen, sehen sie die Tooltips, mit denen sie zuvor interagiert haben, erneut:
Verwenden einen anderen Browser oder ein anderes Gerät
Löschen ihren Cache und ihre Cookies
Melden sich im Inkognito-Modus an
Hintergrundfarben:
Sie können auch eine Hintergrund- und Text-HEX-Farbe für alle hier hinzugefügten Tooltips festlegen. Dies ist ideal für Tooltips, die Designrichtlinien in Ihrem Produkt entsprechen müssen.
Wenn Sie die Gruppeneinstellungen verwaltet haben, klicken Sie auf „Speichern und schließen“.
Tooltip-Gruppen bearbeiten
Wenn Sie eine Tooltip-Gruppe bearbeiten, sehen Sie in der unteren Symbolleiste:
Alle Tooltips, die in der Gruppe enthalten sind.
Wie der Tooltip gekennzeichnet ist – ob es sich um einen CSS-Selektor oder ein Textelement handelt
Wo der Tooltip angezeigt wird – sitewide oder auf einer bestimmten Seite
Ob der Tooltip auf der aktuellen Seite ist.
Wenn Sie einen Tooltip bearbeiten, der nicht auf der aktuellen Seite ist, sehen Sie den Tooltip in der Mitte der Seite mit einer Banner-Fehlermeldung schweben.
Hier ist ein Beispiel für eine Tooltip-Gruppe, die die verschiedenen Einstellungen für die einzelnen Tooltips anzeigt.
Testen Sie es in einer Live-Umgebung
Wir empfehlen, Ihre Tooltips auf folgende Weise zu testen, bevor Sie sie für customers live schalten:
1. Testen Sie als neuer user
Wenn Sie Tooltips für neue users hinzugefügt haben, sollten Sie sich von Grund auf neu für Ihr Produkt anmelden und Ihren Tooltip als echter neuer user testen. So stellen Sie sicher, dass Ihr Tooltip funktioniert, wenn Ihr Produkt völlig neu ist und keine vorhandenen Daten enthält.
2. Testen Sie mit allen Ihren verschiedenen Produktberechtigungen
Wenn Ihr Produkt verschiedene Berechtigungsstufen hat, z. B. basic, admin, super admin; sollten Sie Ihren Tooltip als user mit jeder dieser Berechtigungsstufen testen. So stellen Sie sicher, dass Ihr Tooltip für jeden Benutzertyp funktioniert. Es stellt auch sicher, dass Ihr Tooltip auf Seiten hinzugefügt wurde, auf die jeder user zugreifen kann.
3. Testen Sie, dass Ihr Tooltip mit und ohne Produktinhalt funktioniert
Wenn Ihr Produkt mit nutzergenerierten Inhalten gefüllt werden kann, sollten Sie sicherstellen, dass Ihre Tooltips mit und ohne Inhalt funktionieren. Testen Sie sowohl leere Zustände als auch Ihr Produkt mit Inhalt.
Sie können Zielgruppenregeln verwenden, um nur sich selbst oder Ihre Teammitglieder Tooltips in der Vorschau anzeigen zu lassen und sicherzustellen, dass sie wie erwartet funktionieren. Zum Beispiel können wir users auswählen, bei denen „Email enthält examply“:
Dann schalten Sie die Tooltips live und besuchen die Webseite, auf der Sie sie hinzugefügt haben, um sie in Aktion zu sehen:
Fehlerbehebung
Wenn Sie Ihre Tooltips live geschaltet haben und sie nicht angezeigt werden, überprüfen Sie Folgendes:
Die richtige Seite ist unter Platzierungseinstellungen ausgewählt.
Die URL der Webseite hat sich nicht geändert.
Dynamische Elemente verändern nicht das Layout der Seite. Erfahren Sie, wie Sie das beheben.
Wenn ein Tooltip angezeigt wird, aber nicht an der richtigen Stelle, können Sie das Layout und die Positionierung bearbeiten.
Wenn Sie den Elementabgleich „Nach Text“ verwenden und unter Platzierungseinstellungen „Sitewide“ ausgewählt haben, wird wahrscheinlich auf Seiten mit diesem Text überall übereingestimmt. Versuchen Sie stattdessen, für diesen Tooltip einen CSS-Selektor für den Elementabgleich zu verwenden.
Hinweis: Wenn Sie eine Single-Page-Anwendung (SPA) verwenden, überprüft Intercom Tooltips nur beim ersten Laden des Messenger. Dies kann dazu führen, dass Tooltips nach Routenwechseln (wenn sich die URL ohne vollständiges Neuladen der Seite ändert) inkonsistent angezeigt werden.
Unser Support-Team kann eine Workspace-Einstellung aktivieren, die Tooltips bei jeder URL-Änderung neu bewertet, um sicherzustellen, dass sie in SPAs korrekt angezeigt werden. Kontaktieren Sie uns, wenn Sie dies für Ihren Workspace aktiviert haben möchten.