Zum Inhalt springen

Intercom-Integration mit Jitterbit App Builder

Integration von Intercom mit App Builder Apps

Diese Anleitung beschreibt die einfachen Schritte zum Hinzufügen von Intercom, einer Messaging-Anwendung eines Drittanbieters, zu jedem App Builder app. Das Endergebnis ist, dass Ihre App Builder Die Anwendung wird mit Intercom verbunden und Sie können direkt über die App mit Benutzern chatten. Sie können auf Benutzernachrichten antworten, wenn Sie auf der Intercom-Website angemeldet sind, Email-Antworten an ihr Chatfenster senden oder sogar über Slack antworten. Die gesamte Konfigurationszeit beträgt ungefähr 10 Minuten.

Weitere Intercom-Dokumentation oder Hilfe finden Sie im Intercom Developer Hub, Intercom-Hilfecenter oder Community-Forum.

Anhang

So konfigurieren Sie App Builder App-Integration

  1. Melden Sie sich mit Ihren Intercom-Kontoanmeldeinformationen auf der Intercom-Website an.

  2. Klicken Sie unten links auf das Profilsymbol -> Jitterbit (oder Ihren Kontonamen) -> Neuen Arbeitsbereich hinzufügen…

    Notiz

    1. Sie sollten eine „Prod“-Version (für die Prod-Umfeld) und eine „Test“-Version (für Dev- und QA-Umgebungen) erstellen.

    2. Sie müssen die Einrichtung des Arbeitsbereichs abschließen, einschließlich der Angabe einer Kreditkarte, damit die Integration funktioniert und das Intercom-Symbol richtig angezeigt wird App Builder.

    Anhang

  3. Stellen Sie sicher, dass Ihre App „aktiviert“ ist.

  4. Notieren Sie sich die AppID in der Arbeitsbereichs URL (die AppID befindet sich auch im Javascript-Codeblock des vorgefertigten Widgets).

    Anhang

  5. In App Builder, erstellen Sie eine neue HTML-Vorlage für Intercom, die mit einer Sammlung verbunden ist, auf die die App Zugriff hat, und erstellen Sie Einträge für die folgenden drei Parameter:

    • AppID

    • Email

    • Benutzername

    Anhang

  6. Fügen Sie den folgenden Code in den Bereich Inhalt (Text) der Vorlage ein:

    <script>
    window.intercomSettings = {
      name: "<UserName>", // Full name WHO()
      email: "<Email>", // WHO('Email')
      app_id: "<AppID>" // Provided by Intercom
    };
    </script>
    
    <script>
    (
      function(){
        var w=window;
        var ic=w.Intercom;
    
        if(typeof ic==="function"){
          ic('reattach_activator');
          ic('update',intercomSettings);
        }
        else{
          var d=document;
          var i=function(){i.c(arguments)};
          i.q=[];
          i.c=function(args){i.q.push(args)};
          w.Intercom=i;
    
          function l(){
            var s=d.createElement('script');
            s.type='text/javascript';
            s.async=true;
            s.src='https://widget.intercom.io/widget/<AppID>';
            x=d.getElementsByTagName('script')[0];
            x.parentNode.insertBefore(s,x);
          }
    
          l();
    
          if(w.attachEvent){
            w.attachEvent('onload',l);
          }
          else{
            w.addEventListener('load',l,false);
          }
        }
      }
    )
    () //Manually Call the Listener if the page is loaded
    </script>
    
  7. Fügen Sie Ihrer Parameter-Tabelle ein Feld hinzu, um die Intercom-App-ID zu speichern. Nehmen Sie den in Intercom erstellten Zeichenfolgenwert und fügen Sie ihn an dieser Stelle ein.

    Anhang

  8. Fügen Sie die Parameterfelder IntercomAppID, WHO() und WHO(' Email') zum zugrunde liegenden Datenobjekt hinzu, das auf der Home- oder Splash-Seite der Anwendung und an jedem anderen „Einstiegspunkt“ der App verwendet wird.

    Wenn der Benutzer über eine Seite mit dieser Intercom-Vorlage einsteigt, wird auf jeder nachfolgenden Seite unten rechts das „Chat“-Symbol angezeigt. Wenn er die App jedoch über eine Seite aufruft, die NICHT über die HTML-Vorlage verfügt, wird ihm das Symbol nicht angezeigt und er hat auch keine Intercom-Funktionalität.

    Wichtig

    Benutzer-Email ist ein Pflichtfeld - DIE INTERCOM-INTEGRATION FUNKTIONIERT NICHT, WENN DER BENUTZER KEINE E-MAIL IN SEINEN PROFILEINSTELLUNGEN HAT

  9. Fügen Sie der Seite, auf der Sie die Intercom-Integration konfigurieren (normalerweise Home- oder Splash-Seite), ein HTML-Steuerelement hinzu. Verbinden Sie die Vorlageninformationen > Vorlage mit der erstellten HTML-Vorlage.

  10. Klicken Sie auf das Symbol Bindung für die HTML-Vorlage (im Steuerelementdetail) und erstellen Sie eine Eintragszuordnung:

    Vorlagenparameter Steuerelement- oder Spaltenname
    AppID IntercomAppID
    E- Email Benutzer-Email
    Benutzername Benutzername
  11. Aktualisieren Sie Ihre Seite und Sie sollten jetzt das Intercom-Symbol sehen

    Anhang

Slack Integration

Sie können Intercom sofort so konfigurieren, dass Benachrichtigungen an einen Slack-Kanal gesendet werden.

Anhang

  1. Klicken Sie im Intercom-Website-Konto unten links auf das Profilbild-Symbol. Stellen Sie sicher, dass Ihre App markiert ist, und klicken Sie dann auf Integrationen.

    Anhang

  2. Scrollen Sie nach unten, suchen Sie die Slack-Option und klicken Sie auf Integrieren

  3. Wählen Sie aus, welche Benachrichtigungen an den Slack-Kanal weitergeleitet werden sollen, und klicken Sie dann auf die Schaltfläche Mit Slack verbinden.

    Anhang

  4. Melden Sie sich beim Slack Kanal des Teams an. Wählen Sie aus, an welchen Kanal die Benachrichtigungen gesendet werden sollen. Zu Testzwecken sollten Sie die Option Slackbot auswählen. Die Benachrichtigungen werden dann nur Ihnen angezeigt.

    Anhang

  5. Sie sollten jetzt eine Benachrichtigung erhalten, dass Intercom hinzugefügt wurde, und alle neuen Nachrichten werden im ausgewählten Kanal angezeigt.

    Anhang

  6. Um zu antworten, müssen Sie in der App auf den Link „Eine Nachricht“ klicken, der Sie zur Intercom-Website führt. Derzeit benötigen Sie eine zusätzliche Software, damit Sie direkt aus Slack antworten können.

Tipps und Fehlerbehebung

  • Als allgemeine Anleitung gilt, dass Sie sich beim Intercom-Website-Konto anmelden und die Nachrichtenfunktion zwischen diesem und Ihrer App testen. Das Intercom-Dashboard und die Website bieten viele Statistiken und relevante Daten, z. B. wer aktiv bei der App angemeldet ist, den Nachrichtenverlauf usw.

  • Bitte beachten Sie, dass die Intercom-Schaltfläche in Chrome unter Windows und Mac im Allgemeinen einwandfrei zu funktionieren scheint. Safari auf dem Mac scheint sehr inkonsistent zu sein. Testen Sie Ihre Implementierung unbedingt mit mehreren Browsern und idealerweise auch mit unterschiedlichen Operationssystemen.

  • Wie bei allen App Builder Apps: Wir empfehlen Ihnen, eine „Prod“-Version (für die Umfeld) und eine „Test“-Version (für Entwicklungs- und QA-Umgebungen) zu erstellen.