Beim Erstellen eines Tooltips können Sie bestimmte Website-Elemente wie Buttons oder Überschriften auswählen, um Ihren Tooltip hinzuzufügen. Intercom verwendet CSS-Selektoren, um Ihnen die Auswahl dieser Elemente zu ermöglichen.
Wenn Sie ein Element auswählen, generiert der Tooltip automatisch einen CSS-Selektor, der angibt, wo er dem Element hinzugefügt werden soll. Den CSS-Code für das ausgewählte Element sehen Sie unten rechts unter Platzierung > Elementübereinstimmung:
Aus verschiedenen Gründen möchten Sie den CSS-Selektor möglicherweise manuell hinzufügen, die wir später in diesem Artikel behandeln. Wenn Sie den automatisch gewählten CSS-Selektor manuell bearbeiten möchten, klicken Sie einfach in das Feld und geben den gewünschten CSS-Selektor ein:
Warum sollte ich den CSS eines Tooltips bearbeiten?
Es gibt einige Gründe, warum Sie den CSS beim Auswählen eines Website-Elements bearbeiten möchten:
Ihr Produkt hat sich geändert
Wenn sich Ihr Produkt oder Ihre Website seit der Veröffentlichung Ihrer Tooltips geändert hat, funktioniert der ursprüngliche CSS möglicherweise nicht mehr. Dies kann daran liegen, dass das referenzierte Element nicht mehr existiert oder sich an einem deutlich anderen Ort befindet. In diesem Fall können Sie mit der Schaltfläche „Element ändern“ ein neues Element auswählen oder einen neuen Selektor manuell eingeben.
Ihr Produkt verwendet dynamisch generierte Klassen
CSS wird verwendet, um Stile auf Elemente Ihrer Website anzuwenden. Einige Web-Frameworks generieren die CSS-Klassen dynamisch, um diese Stile anzuwenden. Das bedeutet, dass sich die CSS-Selektoren bei jedem Zugriff eines users auf Ihr Produkt oder Ihre Website ändern können. In diesem Fall können Sie den automatischen CSS-Selektor nicht verwenden, um Ihren Tooltip hinzuzufügen.
Sie können einige der Selektoren so bearbeiten, dass sie ein Wildcard verwenden, damit der dynamisch generierte Teil des CSS-Selektors ignoriert wird. Das bedeutet, den CSS-Code so zu bearbeiten, dass nur ein Teil ausgewählt wird, der für alle users generisch ist. Im folgenden Beispiel bearbeiten wir den Selektor, um nach „button__“ statt „button__2kbli“ zu suchen, da der Teil „button_“ im CSS für alle users gleich erscheint.
Wie kann ich sicherstellen, dass mein Tooltip richtig angezeigt wird?
Der beste Weg, um sicherzustellen, dass Ihr Tooltip korrekt angezeigt wird, besteht darin, das HTML auf Ihrer Website mit einem speziellen Attribut zu versehen, auf das Intercom achten kann.
Hinweis: Dafür müssen Sie HTML bearbeiten.
Wenn Sie wissen, welche Elemente auf Ihrer Website Sie in einem Tooltip verwenden möchten, können Sie diesen Elementen das spezielle Datenattribut data-intercom-target="..." hinzufügen.
Wenn Sie beispielsweise auf Ihren Start-Button für einen Tooltip zeigen möchten, können Sie diesem Element data-intercom-target="Start button" hinzufügen. Durch diese HTML-Anmerkung ist es viel wahrscheinlicher, dass kleine Änderungen an Ihrem Produkt keine Auswirkungen auf Ihre Tooltips haben.
<div data-intercom-target="Start button">
...
</div>
Hinweis: Wenn Sie das HTML wie oben gezeigt anmerken, kann der Tooltip-Builder die Elemente mit der data-intercom-target-Anmerkung hervorheben, sodass Sie sie auswählen können.
Fragen?
Wenn Sie weitere Fragen zur Bearbeitung von CSS in Tooltips haben, chatten Sie einfach mit uns im Messenger, und wir helfen Ihnen gerne weiter. Hier sind weitere Möglichkeiten, Ihre Tooltips zu testen und sicherzustellen, dass sie wie erwartet funktionieren.