Zurück zu den Neuigkeiten für Entwickler

Integration der WhatsApp Business Platform mit HubSpot

13. März 2023VonRashed Talukder

HubSpot ist eine CRM-Plattform (Customer Relationship Management), mit der Organisationen ihre Produkte und Dienstleistungen effektiver vermarkten, verkaufen und supporten können.

Die WhatsApp Business Platform erlaubt es Unternehmen, die von Meta gehostete Cloud API zu nutzen, um direkt vom CRM-System aus über WhatsApp-Integrationen mit ihren Kund*innen zu kommunizieren. Dies ermöglicht einen einfachen Zugriff auf Messaging-Funktionen und eine direkte Integration in die meisten bestehenden technischen Systeme.

Hier sehen wir uns an, wie man diese Art der Integration mit HubSpot einrichtet und einen Workflow im CRM erstellt, um basierend auf Events und eigenen Regeln auf der HubSpot-Plattform automatisch auf Nachrichten von WhatsApp zu antworten.

Voraussetzungen

Um dieses Tutorial abzuschließen, benötigst du Folgendes:

  • Ein WhatsApp Business-Konto

  • Ein Meta for Developers-Konto

  • Ein HubSpot-App-Entwickler-Konto (wähle „App Developer“ aus, wenn du ein neues Konto erstellst) App-Entwickler-Konten von Hubspot bieten Funktionen und Dienstleistungen, die in den Nutzungsbedingungen aufgeführt sind. Dazu gehören der Zugriff auf die CRM-APIs und die Möglichkeit zur Erstellung von Apps.

  • Eine URL, die auf die ausgeführte Instanz dieser Glitch-Beispiel-App verweist, um Nachrichten von WhatsApp Business Messenger zu erhalten.

Dieser Artikel setzt voraus, dass du mit der WhatsApp Business Platform, Meta for Developers und HubSpot vertraut bist.

Senden von Nachrichten

Der erste Schritt besteht darin, deine Konten einzurichten. Das geht so:

  1. Erstelle ein Facebook-Entwicklerkonto bzw. melde dich an deinem bestehenden Konto an.

  2. Führe den Schritt „Entwicklungs-Assets und Plattformzugriff einrichten“ in der offiziellen Erste-Schritte-Dokumentation aus und sende eine Testnachricht.

  3. Füge deine Telefonnummer zur Cloud-API-App-Konfiguration hinzu.

Empfangen von Nachrichten mit einer Beispiel-App

Wir müssen einen Webhook und eine Webhook-Abonnenten-URL mit einem Endpunkt einrichten, um deine Webhooks zu testen. Dazu verwenden wir die oben erwähnte Beispiel-App.

Klicken oben rechts auf den Button „Remix to Edit“ (Zu bearbeitender Remix), um die Konfigurationsdetails bearbeiten zu können.

Öffne die ENV-Datei und füge den Cloud API-Zugriffsschlüssel in das Feld WHATSAPP_TOKEN ein. Im Feld VERIFY_TOKEN kannst du einen beliebigen String eingeben. Diesen solltest du dir aber notieren, weil wir ihn später benötigen.

Einrichten des Cloud API-Webhooks

Richte als Nächstes den Webhook für die API ein, um Abonnements für Updates oder Antworten auf Event-Änderungen zu ermöglichen. Beginne dazu im Meta for Developers-App-Dashboard für deine App. Klicke auf die Navigationsleiste für WhatsApp. Klicke anschließend unter „Erste Schritte“ auf „Konfiguration“ und dann auf „Bearbeiten“.

Fülle die Felder „Callback URL“ (Rückruf-URL) und „Verify Token“ (Verifizierungsschlüssel) im Dialogfeld „Edit webhook’s callback URL“ (Rückruf-URL des Webhooks bearbeiten) aus. Die Rückruf-URL lautet https://<<PROJECT NAME>>.glitch.me. Ersetze den Projektnamen durch den Namen deines Projekts (z. B. https://defiant-standing-mirror.glitch.me). Bestätige dann, dass die URL mit der URL oben identisch ist.

Klicke auf „Verify“ (Bestätigen) und dann auf „Save“ (Speichern). Im Entwicklerleitfaden findest du weitere Informationen zur Einrichtung von WhatsApp-Webhooks.

Bildschirm „Edit webhook callback URL“

Nun kannst du Testbenachrichtigungen an den Endpunkt senden.

Klicke auf derselben Seite unter dem Button „Edit“ (Bearbeiten) auf „Webhook Fields“ (Webhook-Felder), dann auf „Manage“ (Verwalten) und abonniere die Events, die du über den Endpunkt abrufen möchtest. Klicke als Nächstes auf „Test“ (Testen), um eine Benachrichtigung an die zuvor konfigurierte Telefonnummer des*der Empfänger*in zu senden.

Bildschirm „Webhook fields“

Um zu überprüfen, ob die App läuft und Events erfasst, gehe zu „Glitch“, klicke auf „Logs“ (Protokolle) und sieh dir die Protokolle für dein ausgewähltes Event an.

Bildschirm von Anzeigen von Protokollen in Glitch

Einrichten des HubSpot-CRM

Nun richtest du das HubSpot-CRM so ein, dass automatisch WhatsApp-Nachrichten an Kund*innen gesendet werden, deren Kontaktinformationen eine Telefonnummer enthalten.

Gehe zur HubSpot-Plattform und melde dich bei deinem Entwicklerkonto an oder erstelle ein neues Konto. Das Entwicklerkonto bietet eine 90-tägige kostenlose Testversion aller HubSpot-Unternehmensfunktionen, einschließlich Marketing, Vertrieb, Service und CMS, damit du die HubSpot-API und -Tools testen kannst.

Nachdem du dein Entwicklerkonto eingerichtet hast, klicke auf „Manage test accounts“ (Testkonten verwalten).

Mit Entwicklerkonto beim HubSpot-CRM angemeldet

Wähle dann „Create app test account“ (App-Testkonto erstellen) aus, nenne es demo_whatsapp_integration (oder nach Belieben) und klicke auf „Create“ (Erstellen).

Bildschirm „Create app test account“

Klicke auf das neu erstellte App-Testkonto und navigiere zum Dashboard. Klicke dann oben links in der Navigationsleiste auf „Contacts“ (Kontakte). Dir werden zwei Demokontakte angezeigt. Du kannst sie entfernen und einen neuen Kontakt mit einer Test-Telefonnummer hinzufügen, die du für WhatsApp-Tests verwenden kannst.

Dashboard für neues App-Testkonto

Verbinde WhatsApp mit dem HubSpot-CRM

Als Nächstes müssen wir eine WhatsApp-Integration mit dem HubSpot-CRM erstellen. Navigiere zuerst zu den Einstellungen in HubSpot. Klicke unter „Account Setup“ (Kontoeinrichtung) auf „Integrations“ (Integrationen) und dann auf „Connected Apps“ (Verbundene Apps).

Bildschirm „Connected apps“

Wähle „Visit App Marketplace“ (App-Marktplatz besuchen) aus. Suche über das Suchfeld nach der WhatsApp-Anwendung. Klicke auf „WhatHub: WhatsApp Integration“ (WhatHub: WhatsApp-Integration).

App Marketplace

Wähle das Konto demo_whatsapp_integration aus und klicke auf „Choose Account“ (Konto auswählen). Auf der Kontaktseite wird dann neben den anderen Kontaktoptionen ein WhatsApp-Symbol angezeigt. Klicke darauf, um mit dem Senden von Nachrichten aus dem Hubspot-CRM zu beginnen. Du kannst selbstdefinierte Nachrichten oder die vordefinierten Vorlagen verwenden.

Selbstdefinierte WhatsApp-Nachricht

Du kannst auch auf dem Tab „Activity“ (Aktivität) eine Liste von Nachrichten und deren Status anzeigen.

Einrichten eines automatischen Workflows

Als Nächstes integrieren wir dies in einen Workflow, der durch ein Event im CRM ausgelöst wird. Dazu richten wir im HubSpot-Dashboard einen eigenen Workflow ein. Klicke in der Navigationsleiste auf „Automation“ (Automatisierung) und dann auf „Workflows“, um das Workflow-Dashboard anzuzeigen.

Klicke auf „Create workflow“ (Workflow erstellen) und wähle die Option „From scratch“ (Von Grund auf) aus. Klicke jetzt auf „Contact-based“ (Kontaktbasiert) und dann auf „Next“ (Weiter).

Bildschirm „Back to workflows“

Klicke auf „Set up triggers“ (Trigger einrichten) und wähle die Option „WhatsApp message sent from HubSpot portal integration event“ (Event: aus der HubSpot-Portalintegration gesendete WhatsApp-Nachricht) aus.

Bildschirm „Set up triggers“

Wähle den Filtertyp „Message sent“ (Gesendete Nachricht), lege den Workflow-Trigger auf „is equal to any of“ (Entspricht einem der folgenden Werte) und gib als Wert „Buy item“ (Artikel kaufen) an. Klicke abschließend auf „Apply filter“ (Filter anwenden) und dann auf „Save“ (Speichern).

Klicke als Nächstes auf das +-Symbol und füge eine weitere Aktion hinzu. Klicke in der Liste „Choose an action“ (Aktion auswählen) auf „Create task“ (Aufgabe erstellen).

Bildschirm „Choose an action“

Nenne sie „Test Task“ (Testaufgabe) und weise sie deinem Testkonto zu. Klicke dann auf „Save“ (Speichern). Klicke als Nächstes auf „Review, publish“ (Prüfen, veröffentlichen) und aktiviere den Workflow durch Klicken auf „Turn on“ (Aktivieren) oben rechts.

Bildschirm zum Aktivieren des Workflows

Wähle nun „Test“ (Testen) aus und wähle deinen Testkontakt aus, um den Workflow zu testen. Dadurch wird der Workflow ausgelöst, wie unten dargestellt.

Bildschirm zur Auswahl deines Testkontakts

Als Nächstes erstellen wir eine Integration, die auf WhatsApp hört und automatisch Daten im HubSpot-CRM aktualisiert, wenn eine Benachrichtigung eingeht. Bevor wir den Workflow einrichten, müssen wir den Testkontakt zu einer Liste hinzufügen. Klicke auf „Contacts“ (Kontakte) und dann auf „Lists“ (Listen), um eine neue Liste zu erstellen.

Navigiere anschließend zur Seite „Workflow“, erstelle einen neuen Workflow und nenne ihn „WhatsApp-Automatisierung“.

Wähle die kontaktbasierte Liste aus, füge den Listennamen hinzu und wähle dann „Static List“ (Statische Liste) aus. Klicke auf „Next“ (Weiter) und dann auf den Button zum Hinzufügen eines Filters.

Wähle nun in der Liste „Add filter“ (Filter hinzufügen) „List membership“ (Listenmitgliedschaft) aus, um sie als Filter hinzuzufügen, und klicke dann auf „Save list“ (Liste speichern).

Bildschirm „Add filter“

Jetzt kannst du mit der Einrichtung des Workflows weitermachen. Wähle dazu „Contact-based“ (Kontaktbasiert) aus und füge den Kontaktregistrierungs-Trigger zur Listenmitgliedschaft hinzu.

Bildschirm „Contact enrollment trigger“

Richte eine Aufgabe ein, die ausgelöst wird, wenn dieser Workflow aktiviert wird. Prüfe, ob diese Aufgabe in der Zeitleiste „Actions“ (Aktionen) angezeigt wird, und klicke auf „Save“ (Speichern).

Klicke in der Liste „Choose an action“ (Aktion auswählen) auf „Send a webhook“ (Webhook senden).

Option „Send a webhook“

Erstelle als Nächstes die Aktion, damit der Workflow die Nutzlast an den Endpunkt sendet, wenn der Workflow ausgelöst wird.

Bildschirm „Send a webhook“

Stelle sicher, dass du die URL verwendest, die du zuvor im Tutorial eingerichtet hast. Klicke auf „Save“ (Speichern). Abschließend testest du den Workflow wie zuvor: Öffne die Liste „Test“ (Testen), wähle deinen Testkontakt aus der Liste „Preview for“ (Vorschau für) aus und klicke auf „Test“ (Testen). Der Workflow ist abgeschlossen.

Sehen wir uns nun deine Protokolle und die Aktionen-Zeitleiste an. Navigiere zurück zur Aktionen-Zeitleiste, um die erstellte Aufgabe zu prüfen.

Protokolle und Aktionen-Zeitleiste

Um deine Protokolle zu prüfen, gehe zurück zur ausgeführten Glitch-App und sieh dir die Protokolle an, um die Nachrichtenzustellung zu bestätigen.

Protokolle in der Glitch-App anzeigen

Fazit

Durch die Integration der WhatsApp Business Platform mit HubSpot lässt sich das Versenden und Empfangen von Nachrichten auf der Grundlage von Regeln automatisieren, die du für die Events und Aktionen deiner Kund*innen erstellst.

In diesem Artikel wird Schritt für Schritt erklärt, wie man diese beiden Dienste miteinander verbindet, um WhatsApp-Nachrichten an registrierte Kontakte zu senden. Du hast eigene Workflows eingerichtet, die auf der Grundlage vordefinierter Events Aktionen auslösen. Außerdem hast du einen Workflow eingerichtet, der eine Benachrichtigung an einen zuvor eingerichteten Endpunkt sendet und eine neue Aufgabe beginnt.

Um sicherzustellen, dass deine Nachrichten deinen Kund*innen zeitnah relevante und erwartete Informationen liefern, solltest du auf die Anzahl der Nachrichten achten. Vermeide Spamming, damit deine Kund*innen zufrieden und interessiert bleiben.

Weitere Möglichkeiten, wie du WhatsApp in deine Apps und Projekte integrieren kannst, findest du in unseren Tutorials für Entwickler*innen.