Zum Hauptinhalt springen

Intercom für users im Web installieren

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 Kunden willkommen heißen, einführen und 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 Abonnement, um den Messenger zu installieren.

Hinweis: Eine neue Installationserfahrung für den Messenger wird schrittweise eingeführt. Wenn Sie einen aktualisierten Installationsablauf in Ihrem Workspace sehen, folgen Sie stattdessen Install Messenger on your website. Dieser Artikel beschreibt den vorherigen Ablauf.


Erstinstallation des Messengers für users im Web

Gehen Sie zuerst zu Einstellungen > Kanäle > 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 zur Installation:

  • Code-Snippet

  • React

  • Angular

  • Vue

  • Ember

  • WordPress

  • Google Tag Manager

  • Shopify

  • Segment

Jede Methode bietet spezifische Schritte bei Auswahl. Viele dieser Methoden bieten eine Node Package Manager (NPM) Installation zur Erleichterung an.

Bitten Sie Ihren Entwickler um Hilfe (optional)

Falls nötig, können Sie einen Kollegen (z. B. einen Ingenieur) bitten, die Installation abzuschließen. Klicken Sie einfach auf Kollegen einladen.

Nachdem Sie deren E-Mail-Adresse eingegeben haben, wird eine Einladung per E-Mail versendet, die es ihnen ermöglicht, dem Workspace Ihres Teams beizutreten.

Der eingeladene Kollege erhält einen Lite-Sitz bei Advanced / Expert Plänen und einen Vollsitz bei Essential Plänen. Sie erhalten die minimal erforderlichen Berechtigungen zur Installation des Messengers:

  • 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 wählen, 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 Gespräche geräteübergreifend an.

  • Für Website-Besucher ohne Logins – Installieren Sie den Messenger für anonyme Website-Besucher, die nicht angemeldet sind. Gespräche werden über einen Cookie im Browser gespeichert.

Wir empfehlen, den Messenger sowohl für users als auch für Besucher zu installieren.

Sie müssen dann die Option „Verbindung zum Messenger aktivieren“ einschalten.

Wichtig: Wenn diese Option 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. Dies schaltet die Messenger-APIs für Ihren Workspace ein und stellt sicher, dass der Messenger Traffic akzeptiert. Sie müssen dies aktivieren, um mit Nutzer-Traffic zu starten.
​
Nachdem Sie den Messenger eingerichtet haben, empfehlen wir auch, ihn mit JWTs zu sichern!

Installieren Sie Intercom mit Ihrer gewählten Methode

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

Wenn Sie die Methode Code-Snippet, React, Angular, Vue, oder Ember gewählt haben, erhalten Sie ein NPM-Paket mit einem Code-Snippet, das Sie in den Code Ihrer eigenen App kopieren und einfügen können. Dieses Snippet ist mit Ihrer einzigartigen Workspace-ID vorausgefüllt und sofort einsatzbereit.

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

Es gibt mehrere weitere 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 einfügen oder das Rails-Gem zur Installation verwenden. Für Single-Page-Anwendungen (SPAs) folgen Sie dem SPA-Installationsleitfaden, um deren dynamische Natur zu berücksichtigen.

Klicken Sie auf Code kopieren und fügen Sie es 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 users zu senden.

Nach dem Hinzufügen des Codes öffnen Sie Ihre App und der Messenger erscheint.

Beenden Sie Ihre user-Sitzungen beim Logout

Stellen Sie sicher, dass Sie auch die Intercom-Shutdown-Methode aufrufen, um die Gespräche Ihrer Kunden beim Logout aus Ihrer App zu löschen.
​
Jeder user, der einen gemeinsam genutzten Computer und Browser mit jemand anderem verwendet, kann die zuletzt angemeldete Gesprächshistorie sehen, bis der Cookie abläuft. Deshalb ist es sehr wichtig, Intercom richtig herunterzufahren, wenn eine user-Sitzung in Ihrer App endet (manuell oder automatisch ausgeloggt).

Wichtig:

  • Sie können users entweder mit einer user_id oder E-Mail-Adresse identifizieren.

  • Wenn Sie eine user_id und 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, daher empfehlen wir, die Identitätsprüfung zu aktivieren.

  • Sie können Intercom auch benutzerdefinierte Attribute über Ihre users senden.

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

  • Übergeben Sie user_id, email und user_hash immer dynamisch von Ihrem Server für den aktuell angemeldeten user – speichern oder codieren 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 und nicht als anderer user getrackt wird.

Aussehen und Verhalten Optionen

Die erste Option erlaubt Ihnen zu wählen, ob Sie den Messenger für Ihre Website-Besucher vor dem Start anzeigen oder verbergen möchten. Standardmäßig wird der Messenger angezeigt.

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

Installation überprüfen

Sie können die erfolgreiche Installation überprüfen, indem Sie auf Installation überprü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ösungen. Weitere Fehlerbehebungen umfassen die Überprüfung von Browser-Einschränkungen wie Werbeblocker oder privaten Modus, die den Messenger blockieren können, sowie das Vermeiden von Public-Suffix-Domains für eine korrekte Sichtbarkeit.

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 nur die letzten 14 Tage der Gesprächshistorie im Messenger. Mehr erfahren →


Intercom für einen Kunden installieren

Wenn Sie keinen Zugriff auf den Intercom-Workspace haben, können Sie hier den JavaScript-Code 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 ein Kunde sich für Ihre App, Website oder Dienst angemeldet hat, gesendet als Unix-Timestamp.


Intercom für EU- und AU-gehostete Workspaces installieren

Um Intercom zu installieren, wenn Sie unser EU- oder AU-Hosting verwenden, müssen Sie einen zusätzlichen api_base-Parameter angeben. Die Werte dafür sind in der folgenden Tabelle aufgeführt.

Datenhosting-Region

api_base-Wert

Vereinigte Staaten (US)

Europäische Union (EU)

Australien (AU)


Intercom in einer Desktop-Umgebung installieren

Technisch ist es möglich, Intercom in einer Desktop-Anwendung einzubinden, jedoch unterstützen wir Desktop-Umgebungen nicht offiziell. Der Intercom Messenger wurde für den Einsatz in Web-Umgebungen entwickelt (Liste der unterstützten Browser). Diese Web-Umgebungen unterstützen spezifische Web-Funktionalitäten, von denen unser Messenger abhängt (z. B. Javascript und CSS).

Electron und ähnliche Technologien ermöglichen es, Desktop-Anwendungen mit Web-Technologie zu erstellen, und es ist möglich, Intercom in solchen Anwendungen zu installieren – es gibt sogar Community-Bibliotheken, die bei der Installation von Intercom in Electron-Umgebungen helfen, jedoch ist dies keine offizielle Unterstützung.

Hat dies deine Frage beantwortet?