Verwenden Sie diesen Artikel, um den Intercom Messenger auf Ihrer Website zu installieren, Ihre Kundendaten sicher zu verbinden und zu testen, ob alles funktioniert. Nach der Installation können Sie Kunden willkommen heißen, einführen und unterstützen, während sie zu loyalen Nutzern Ihrer App werden.
Die Schritte für eine vollständige und sichere Messenger-Installation sind:
Wählen Sie Ihren Installationstyp.
Installieren und testen Sie den Messenger.
Verbinden Sie Ihre Kundendaten und sichern Sie den Messenger (überspringen Sie diesen Schritt, wenn Sie nur Visitors & leads gewählt haben).
Hinweis: Dies ist die neue Messenger-Installationserfahrung, die schrittweise eingeführt wird. Wenn Ihr Workspace noch nicht umgestellt wurde, verwenden Sie stattdessen Install Intercom for visitors and leads on web oder Install Intercom for users on web.
Wählen Sie Ihren Installationstyp
Gehen Sie zu Einstellungen > Kanäle > Messenger Live Chat > Übersicht, suchen Sie die Website-Karte und wählen Sie Auf Website installieren.
Wählen Sie Ihren Installationstyp aus
Sie werden gefragt „Welche Informationen benötigt Ihr Team in Ihrem inbox?“ und sehen zwei Optionen:
Visitors & leads (schnellste Installation) — Gespräche sind nicht mit Benutzerdetails verknüpft. Sie können die zusätzliche Einrichtung später abschließen, um angemeldete Benutzer zu identifizieren.
Signed-in users, visitors & leads — Gespräche von angemeldeten Benutzern enthalten relevante Details, die Ihrem Team den Kontext geben, um personalisierten Support zu bieten. Erfordert Änderungen am Frontend und Backend.
Jede Karte zeigt eine Vorschau dessen, was Ihr Team für diese Option im Inbox sehen wird, damit Sie vergleichen können, bevor Sie sich entscheiden. Wählen Sie die Option, die zu Ihrem Unternehmen passt, und klicken Sie dann auf Weiter.
Tipp: Visitors & leads ermöglicht die schnellste Einrichtung. Sie können jederzeit später zurückkehren und die Einrichtung für Signed-in users, visitors & leads abschließen, wenn Ihr Team bereit ist.
Bitten Sie einen Entwickler um Hilfe (optional)
Falls nötig, können Sie einen Kollegen – wie einen Entwickler – bitten, die Installation abzuschließen. Klicken Sie auf Kollegen einladen, geben Sie deren E-Mail-Adresse ein, und eine Einladung wird gesendet, die ihnen erlaubt, Ihrem Workspace mit den minimal erforderlichen Berechtigungen zur Installation des Messengers beizutreten:
Kann allgemeine und Sicherheitseinstellungen verwalten
Kann Messenger-Einstellungen verwalten
Kann Workspace-Daten verwalten
Wählen Sie, wie Sie den Messenger installieren möchten
Wählen Sie eine der folgenden Methoden, um die Installation durchzuführen:
Mit benutzerdefiniertem Code
Code-Snippet
React
Angular
Vue
Ember
Oder über eine der folgenden Integrationen
WordPress
Google Tag Manager
Shopify
Segment
Wenn Sie eine dieser Optionen anklicken, wird sie ausgewählt und die spezifischen Schritte für diese Methode angezeigt. Viele dieser Methoden bieten eine Node.js Package Manager (NPM) Installation zur Vereinfachung an.
Hinweis: Für Single-Page Applications (SPAs) muss der Standard-Snippet-Ansatz angepasst werden. Folgen Sie der SPA-Installationsanleitung von Intercom, um dynamische Seitenänderungen korrekt zu handhaben.
Installieren Sie Intercom über Ihre gewählte Methode
Folgen Sie nun den Anweisungen für die von Ihnen gewählte Methode. Wenn Sie Code-Snippet, React, Angular, Vue oder Ember gewählt haben, erhalten Sie ein Code-Snippet, das auf ein NPM-Paket verweist. Dieses Snippet ist mit Ihrer einzigartigen Workspace-ID vorausgefüllt und sofort einsatzbereit.
Klicken Sie auf Code kopieren und fügen Sie es vor dem </body>-Tag auf jeder Seite ein, auf der der Messenger erscheinen soll.
Bearbeiten Sie dann den Code, um Intercom die E-Mail-Adresse oder user_id und das Anmeldedatum des aktuell angemeldeten Benutzers zu übermitteln:
var APP_ID = "your_app_id";
window.intercomSettings = {
app_id: APP_ID,
name: "Jane Doe", // Full name
email: "customer@example.com", // Email address
created_at: 1312182000 // Signup date as a Unix timestamp
};Nach dem Hinzufügen des Codes öffnen Sie Ihre App und der Messenger erscheint.
Wichtig: Beachten Sie beim Identifizieren von Benutzern Folgendes:
Sie können users entweder mit einer user_id oder einer E-Mail-Adresse identifizieren.
Wenn Sie sowohl eine user_id als auch eine E-Mail-Adresse senden, hat die user_id Vorrang bei der Identifizierung Ihrer users.
Übermitteln Sie user_id, E-Mail und user_hash immer dynamisch von Ihrem Server für den aktuell angemeldeten user – kodieren oder cachen Sie niemals die Identität eines einzelnen users fest im Snippet.
Testen Sie Ihre Installation
Klicken Sie auf Installation testen, um zu bestätigen, dass der Messenger wie erwartet funktioniert.
Nach erfolgreichem Test sehen Sie eine Bestätigung „Messenger ist installiert“.
Für den Pfad Visitors & leads lautet die Meldung: „Visitors können jetzt Gespräche von Ihrer Website starten. Sie erscheinen mit einem zufälligen Namen in Ihrem Inbox, bis sie ihre Daten teilen. Als Nächstes machen Sie den Messenger zu Ihrem eigenen. Passen Sie Farben, Launcher und Willkommensnachricht an Ihre Marke an.“
Für den Pfad Signed-in users, visitors & leads fahren Sie mit dem Abschnitt "Verbinden Sie Ihre Kundendaten" unten fort, um die Installation abzuschließen.
Von hier aus können Sie auf Ich mache das später oder Messenger anpassen klicken, um direkt mit der Gestaltung zu beginnen.
Beenden Sie Ihre Benutzersitzungen beim Logout
Stellen Sie sicher, dass Sie auch die Intercom-Shutdown-Methode aufrufen, um die Gespräche Ihrer Kunden zu löschen, wenn sie sich aus Ihrer App ausloggen:
Intercom('shutdown');Tipp: Rufen Sie Intercom('shutdown') in Ihrem Logout-Ereignishandler oder Äquivalent auf – überall dort, wo Ihre App die Sitzung eines users beendet.
Dies löscht sofort das Intercom-Cookie, sodass der nächste Besucher eine neue, anonyme Sitzung startet.
Jeder user, der einen gemeinsam genutzten Computer und Browser mit jemand anderem verwendet, kann die Gesprächshistorie des zuletzt angemeldeten users sehen, bis das Cookie abläuft. Daher ist es wichtig, dies bei jedem Logout aufzurufen.
Verbinden Sie Ihre Kundendaten
Überspringen Sie diesen Abschnitt, wenn Sie nur Visitors & leads gewählt haben – Ihre Installation ist bereits abgeschlossen, sobald Sie sie oben getestet haben. Wenn Sie Signed-in users, visitors & leads gewählt haben, fahren Sie unten fort, um Ihre Benutzerdatenattribute zu verbinden.
Hinweis: Der Pfad Signed-in users, visitors & leads erfordert Änderungen an Ihrem Frontend- und Backend-Code. Sie benötigen Entwicklerzugang, um diesen Abschnitt abzuschließen.
Generieren Sie für jeden Kunden ein Token, um Ihre Kundendaten zu sichern
Generieren Sie auf Ihrem Server für jeden angemeldeten user ein signiertes JSON Web Token (JWT). Zum Beispiel in Node:
const jwt = require('jsonwebtoken');
const token = jwt.sign(
{ user_id: user.id, email: user.email },
process.env.INTERCOM_SECRET_KEY,
{ algorithm: 'HS256', expiresIn: '1h' },
);
Für diesen Schritt benötigen Sie den geheimen Schlüssel Ihres Workspaces – er wird (maskiert) auf dem Bildschirm angezeigt. Bewahren Sie diesen Schlüssel auf Ihrem Server auf. Fügen Sie ihn niemals im Browser- oder App-Code ein.
Hinweis: Schlüssel sind plattformgebunden, und Ihr Workspace kann mehr als einen haben. Sie können einen Schlüssel in Ihren Messenger-Sicherheitseinstellungen erstellen, rotieren oder decodieren.
Fügen Sie das aktualisierte Snippet zu Ihrer Website hinzu
Fügen Sie eine Zeile zu dem bereits installierten Snippet hinzu. Die E-Mail wird aus dem Token extrahiert und verwendet, um die Identität des Messengers sicher darzustellen.
Intercom({
app_id: 'your_app_id',
intercom_user_jwt: token,
});
Dies gilt überall dort, wo Sie die Änderung bereitstellen, sodass jeder Ort, der diese Codebasis teilt, ebenfalls verbunden wird.
Testen Sie Ihre Installation
Klicken Sie auf Installation testen, um zu bestätigen, dass der Messenger wie erwartet funktioniert.
💡 Tipp: Brauchen Sie mehr Hilfe? Holen Sie sich Unterstützung in unserem Community-Forum. Finden Sie Antworten und erhalten Sie Hilfe von Intercom Support und Community-Experten.
Verwandte Artikel