Zum Hauptinhalt springen

Installieren Sie Intercom für users auf der Website

Installieren Sie den Intercom Messenger und beginnen Sie, mit Ihren angemeldeten users zu kommunizieren.

Verfasst von Eric Fitzgerald

Die Installation des Messengers auf Ihrer Website dauert nur wenige Minuten. Nach der Installation können Sie Begrüßen, Onboarding durchführen und Kunden unterstützen, während sie zu treuen users Ihrer App werden.

Die zwei erforderlichen Schritte für eine vollständige und sichere Messenger-Installation sind:

Sie benötigen ein Intercom-Testkonto oder -Abo, um den Messenger zu installieren.


Erstinstallation des Messengers für users auf der Website

Gehen Sie zuerst zu Einstellungen > Channels > Messenger > Installieren und wählen Sie Für Web installieren.

Wählen Sie, wie Sie den Messenger installieren möchten

Wählen Sie eine der folgenden Methoden, um die Installation durchzuführen:

  • Code-Snippet

  • React

  • Angular

  • Vue

  • Ember

  • WordPress

  • Google Tag Manager

  • Shopify

  • Segment

Jede Methode bietet spezifische Schritte, wenn sie ausgewählt wird. Viele dieser Methoden bieten eine NPM-Installation, um Ihnen die Arbeit zu erleichtern.

Bitten Sie Ihren Entwickler um Hilfe (optional)

Bei Bedarf können Sie ein Teammitglied (z. B. einen Entwickler) bitten, die Installation abzuschließen. Klicken Sie einfach auf Teammitglied einladen.

Geben Sie deren E-Mail-Adresse ein, wird eine Einladung per E-Mail gesendet, die ihnen ermöglicht, dem Workspace Ihres Teams beizutreten.

Dem eingeladenen Teammitglied wird auf Advanced/Expert-Plänen ein lite seat und auf Essential-Plänen ein full seat zugewiesen. Sie erhalten die Mindestberechtigungen, die zur Installation des Messengers erforderlich sind:

  • Kann allgemeine und Sicherheitseinstellungen verwalten

  • Kann Messenger-Einstellungen verwalten

  • Kann Workspace-Daten verwalten

Selbst installieren

Wenn Sie Code-Snippet, React, Angular, Vue, Ember oder Shopify als Installationsmethode gewählt haben, können Sie entscheiden, ob Sie die Installation für folgende Nutzer abschließen möchten:

  • Für users mit Logins - Installieren Sie den Messenger für angemeldete users. Der Messenger zeigt Informationen wie Kundennamen und vorherige Unterhaltungen geräteübergreifend an.

  • Für Website-Besucher ohne Logins - Installieren Sie den Messenger für anonyme Website-Besucher, die nicht angemeldet sind. Unterhaltungen werden per Cookie im Browser gespeichert.

Wir empfehlen, den Messenger für users und Besucher zu installieren.

Sie müssen dann "Verbindung zum Messenger aktivieren".

Wichtig: Wenn dies deaktiviert ist, schlagen alle Anfragen an Intercom fehl. Die Messenger-APIs sind standardmäßig nicht aktiviert. Wie Sie auf der Messenger-Installationsseite sehen, sind die Codebeispiele ausgegraut, bis Sie diesen Schalter aktivieren. Dadurch werden die Messenger-APIs für Ihren Workspace eingeschaltet und die Verarbeitung von Traffic ermöglicht. Sie müssen dies aktivieren, um mit beliebigem user-Traffic zu beginnen.

Sobald Ihr Messenger eingerichtet ist, empfehlen wir außerdem, ihn mit JWTs zu sichern!

Installieren Sie Intercom mit der gewählten Methode

Folgen Sie nun den Anweisungen für die von Ihnen gewählte Methode. Wenn Sie beispielsweise WordPress gewählt haben, sehen Sie die Anweisungen für diese Methode unten.

Wenn Sie die Methode Code-Snippet, React, Angular, Vue oder Ember gewählt haben, erhalten Sie ein NPM-Paket mit einem Code-Snippet zum Kopieren und Einfügen in den Code Ihrer App. Dieses Snippet ist mit Ihrer eindeutigen Workspace-ID vorausgefüllt und sofort einsatzbereit.

Sie finden das Paket auch direkt auf der NPM-Seite.

Es gibt mehrere andere Vorlagen, z. B. das Einfügen des Code-Snippets in eine Node.js/Rails (Ruby)/Django (Python 3)- oder PHP-App. Sie können das Snippet auch in einer Single-Page-App verwenden oder das Rails-Gem zur Installation nutzen. Für Single-Page-Anwendungen (SPAs) folgen Sie der SPA-Installationsanleitung, um deren dynamische Natur zu berücksichtigen.

Klicken Sie auf Code kopieren und fügen Sie ihn vor dem </body>-Tag auf jeder Seite ein, auf der der Messenger in Ihrer App erscheinen soll.

Bearbeiten Sie dann den Code, um Intercom die E-Mail-Adresse oder user_id und das Anmeldedatum des aktuell angemeldeten Nutzers zu übermitteln.

Nachdem Sie den Code hinzugefügt haben, öffnen Sie Ihre App und der Messenger wird erscheinen.

Beenden Sie Ihre User-Sitzungen beim Logout

Stellen Sie sicher, dass Sie auch die Intercom-Shutdown-Methode aufrufen, um die Unterhaltungen Ihrer Kunden zu löschen, wenn sie sich aus Ihrer App abmelden.

Jeder Nutzer, der einen gemeinsam genutzten Computer und Browser mit jemand anderem verwendet, kann die zuletzt angemeldete Personens Gesprächsverlauf sehen, bis das Cookie abläuft. Daher ist es sehr wichtig, Intercom ordnungsgemäß zu beenden, wenn eine Sitzung Ihres users in Ihrer App endet (manuell oder automatisch ausgeloggt).

Wichtig:

  • 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.

  • Wenn Sie user_id verwenden, kann die E-Mail-Adresse weiterhin zur Identifizierung Ihrer users in Intercom genutzt werden. Wir empfehlen daher, die Identitätsverifizierung zu aktivieren.

  • Sie können Intercom auch mit benutzerdefinierten Attributen über Ihre users senden.

  • Wenn Sie das zoom-CSS auf Ihrer Webseite verwenden, stellen Sie sicher, dass die Intercom-Widgets davon nicht betroffen sind.

  • Übergeben Sie user_id, email und user_hash immer dynamisch vom Server für den aktuell angemeldeten Nutzer — kodieren oder cachen Sie niemals die Identität eines einzelnen users im Snippet. Wenn ein Besucher ausgeloggt ist, lassen Sie diese Felder ganz weg, damit er als anonymer Besucher verfolgt wird, statt als ein anderer user identifiziert zu werden.

Optionen für Aussehen und Verhalten

Die erste Option ermöglicht Ihnen, festzulegen, ob Sie den Messenger vor dem Start für die Zielgruppe Ihrer Website anzeigen oder ausblenden möchten. Andernfalls wird standardmäßig der Messenger angezeigt.

Die zweite Option verlinkt zu den Messenger-Einstellungen, wo Sie Farben und Thema des Messengers ändern können.

Überprüfen Sie die Installation

Sie können überprüfen, ob die Installation erfolgreich war, indem Sie auf Installation prüfen klicken. Diese Schaltfläche zeigt eine Erfolgsmeldung an, wenn der Messenger gefunden wurde, oder weist darauf hin, ob etwas schiefgelaufen ist.

Wenn Sie den Intercom Messenger installiert haben und er nicht korrekt angezeigt wird, finden Sie hier einige häufige Lösungswege. Weitere Fehlerbehebungen umfassen die Überprüfung von Browser-Beschränkungen wie Werbeblocker oder privates Surfen, die den Messenger blockieren können, sowie das Vermeiden von Public-Suffix-Domains, um eine korrekte Sichtbarkeit zu gewährleisten.

Fahren Sie nun mit dem nächsten Schritt der Installation fort und sichern Sie Ihren Messenger mit JWTs.

Hinweis: Ohne Messenger-Sicherheit sehen Ihre users im Messenger nur ihre letzten 14 Tage Gesprächsverlauf. Mehr erfahren →


Installation von Intercom für einen Kunden

Wenn Sie keinen Zugriff auf den Intercom-Workspace haben, können Sie den JavaScript-Code hier abrufen 👇 Sie müssen WORKSPACE_ID manuell durch die eindeutige Workspace-ID Ihres Intercom-Kontos ersetzen.

<script>
var APP_ID = "WORKSPACE_ID"; // Replace this with your workspace 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
};
</script>
<script>(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/' + APP_ID;var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();</script>

Der Wert für created_at sollte das Datum sein, an dem sich ein Kunde für Ihre App, Website oder Ihren Service angemeldet hat, gesendet als Unix-Timestamp.


Installation von Intercom für in EU und AU gehostete Workspaces

Wenn Sie Intercom mit unserer EU- oder AU-Hosting verwenden, müssen Sie einen zusätzlichen api_base-Parameter angeben. Die Werte hierfür sind in der folgenden Tabelle aufgeführt.

Region der Datenhaltung

api_base-Wert

Vereinigte Staaten (US)

Europäische Union (EU)

Australien (AU)


Intercom in einer Desktop-Umgebung installieren

Es ist technisch möglich, Intercom in einer Desktop-Anwendung einzubinden, jedoch unterstützen wir Desktop-Umgebungen nicht offiziell. Der Intercom Messenger wurde für den Betrieb in einer Web-Umgebung entwickelt und getestet (Liste der unterstützten Browser). Diese Webumgebungen bieten bestimmte Web-Funktionalitäten, auf die unser Messenger angewiesen ist (z. B. Javascript und CSS).

Electron und ähnliche Technologien ermöglichen es, Desktop-Anwendungen mit Webtechnologie zu erstellen, und es ist möglich, Intercom in diesen Anwendungen zu installieren – es gibt sogar Community-Bibliotheken, die bei der Installation von Intercom in Electron-Umgebungen helfen, jedoch ist dies kein offiziell unterstützter Weg.

Hat dies deine Frage beantwortet?