Verwenden Sie diesen Artikel, um einen Workflow einzurichten, der im Messenger geöffnet wird, wenn ein Kunde auf eine bestimmte Schaltfläche oder ein Element auf Ihrer Website klickt. Dies steht Teammitgliedern zur Verfügung, die den Messenger auf ihrer Seite installiert haben und Zugriff auf Workflows in ihrem Plan besitzen.

Zum Beispiel könnten Sie:

Gehen Sie zu Fin AI Agent > Workflows und klicken Sie auf Neuer Workflow.

Wählen Sie Von Grund auf neu erstellen und verwenden Sie den Auslöser „Wenn Kunde auf ein Website-Element klickt“.

Jetzt müssen Sie die Einstellungen konfigurieren, um eine Schaltfläche auf Ihrer Seite auszuwählen, die den Workflow auslöst. Wählen Sie einfach Element auf Ihrer Seite zum Start auswählen.

Wählen Sie dann die Website aus, auf der Sie diesen Workflow hinzufügen möchten, und klicken Sie auf Website öffnen.

Sie werden in einem neuen Fenster zu Ihrer Website weitergeleitet. Wählen Sie im Menü unten auf der Seite „Navigieren“, um zur Seite zu gelangen, die die Schaltfläche enthält, mit der Sie Ihren Workflow auslösen möchten:

Sobald Sie auf der richtigen Seite sind, klicken Sie im Menü auf Auswählen und dann auf das gewünschte Website-Element.

Nachdem Sie das richtige Element ausgewählt haben, klicken Sie auf Speichern und schließen. Sie kehren zum Workflow-Builder zurück, wo das ausgewählte Element als bestätigter Auslöser angezeigt wird. Um zu überprüfen, ob es korrekt registriert wurde, prüfen Sie, ob die Auslöserkonfiguration jetzt einen CSS-Selektor anzeigt – dies ist die eindeutige Adresse des Elements auf Ihrer Seite, z. B. .contact-button oder #chat-trigger. Wenn ein generischer Selektor statt eines spezifischen für Ihre Schaltfläche angezeigt wird, wiederholen Sie die Auswahl.

Wenn Sie mehrere Schaltflächen auf Ihrer Seite haben und alle denselben Workflow auslösen sollen, können Sie manuell eine gemeinsame CSS-Klasse definieren. Eine CSS-Klasse ist ein Label, das Sie HTML-Elementen im Code Ihrer Seite hinzufügen – jedes Element mit dieser Klasse kann dann als Auslöser fungieren. Ein CSS-Selektor ist die Übereinstimmungsregel, die Intercom verwendet, um dieses Element auf der Seite zu finden, z. B. .bot_launcher_button.
​

Beachten Sie vor der Einrichtung die untenstehende Einschränkung von einer Schaltfläche pro Seite:

Verwenden Sie zuerst den visuellen Selektor (öffnen Sie Ihren Workflow, klicken Sie auf Element auf Ihrer Seite zum Start auswählen und dann im unteren Menü auf Auswählen) und wählen Sie eine der Schaltflächen aus, die den Workflow auslösen sollen. Sie sehen dann den erfassten CSS-Selektor – Sie können ihn im angezeigten Feld manuell bearbeiten:

Stellen Sie sicher, dass alle Schaltflächen eine Klasse wie .bot_launcher_button teilen, und fügen Sie sie hier hinzu (falls noch nicht ausgewählt), dann speichern und schließen:

Jedes Element auf Ihrer Seite, das diese CSS-Klasse teilt, löst nun den Workflow aus, wenn es angeklickt wird.

Sobald Sie bestätigt haben, dass der Auslöser eingerichtet ist, können Sie mit dem Aufbau Ihres Workflows beginnen – fügen Sie Schritte wie eine Willkommensnachricht, Verzweigungen basierend darauf hinzu, ob der Besucher ein bekannter Kunde oder ein neuer lead ist, und Aktionen wie das Zuweisen des Gesprächs an ein Team. Siehe Workflow erstellen für eine vollständige Anleitung zu den verfügbaren Schritttypen.

Wenn Sie beispielsweise einen Workflow auf einer „Chat to us“-Schaltfläche verwenden, könnten Sie separate Pfade für neue leads und aktuelle Kunden erstellen:

Manchmal erscheint das Auswahlmenü unten nicht, wenn Sie Ihre Website mit dem Elementselektor öffnen. Dies wird meist durch eine der folgenden Ursachen verursacht. Die ersten beiden können von jedem behoben werden; die dritte und vierte erfordern technische Konfiguration, die möglicherweise einen Entwickler in Ihrem Team benötigt.

Um ein Element von Ihrer Website auszuwählen, muss der Messenger auf der Seite installiert sein, auf der Sie es erstellen möchten. Wenn er nicht installiert ist, wird das Auswahlmenü nicht geladen. Wenn Sie beispielsweise einen Workflow in Ihrem Produkt auslösen möchten, aber den Messenger nur für ausgeloggte Besucher installiert haben, erscheint das Auswahlmenü nicht in Ihrem Produkt.

Wenn Sie den Messenger nicht installiert haben, lesen Sie diese Anleitungen, um zu starten:

Das Auswahlmenü funktioniert nicht auf einer Seite, auf der Ihre Seite in einem iframe eines Drittanbieters eingebettet ist.

Der Intercom Messenger wird immer in seinem eigenen iframe (ein Inline-Frame – eine Möglichkeit, eine Webseite in eine andere einzubetten) gerendert. Dies ist erwartetes Verhalten und kann nicht geändert werden. Wenn Ihre Seite oder Ihr Produkt jedoch selbst in einem iframe eines Drittanbieters geladen wird (z. B. in einer Shopify-App oder einem Figma-Plugin), kann der Messenger keine Informationen von der übergeordneten Seite mit dem iframe abrufen.

In diesen Fällen wird die Auswahl eines Elements zum Auslösen eines Workflows nicht unterstützt.

Das Auswahlmenü verwendet die window.opener-Eigenschaft – eine Browser-API, die es dem Auswahlmenü ermöglicht, zurück zur Intercom-App im Tab zu kommunizieren, der Ihre Website geöffnet hat. Wenn das JavaScript Ihrer Seite (oder eine Drittanbieter-Bibliothek) window.opener auf null überschreibt, kann das Auswahlmenü keine Daten zurücksenden und wird nicht geladen.

Überprüfen Sie Ihren Cross-Origin-Opener-Policy-Header
Der Cross-Origin-Opener-Policy-Header (COOP) Ihres Servers steuert, ob eine Seite mit dem Fenster kommunizieren kann, das sie geöffnet hat. Wenn Ihr COOP-Header auf same-origin gesetzt ist, setzen Browser automatisch window.opener auf null, was verhindert, dass das Auswahlmenü geladen wird. Bitten Sie Ihren Entwickler, den Header-Wert auf unsafe-none zu ändern oder den Header ganz zu entfernen, um dies zu beheben.

Wenn Sie den richtigen Workspace auf Ihrer Seite installiert haben und das Auswahlmenü immer noch nicht geladen wird, chatten Sie mit uns im Messenger, wir helfen Ihnen gerne weiter.