Integration von WhatsApp in Shopify

Als Shopify-Entwickler*in für große und mittelgroße Unternehmen weißt du bereits, wie wichtig eine nahtlose Kommunikation mit deinen Kund*innen ist. Um dies zu erreichen, kannst du die WhatsApp Business Platform nutzen, um automatisierte Nachrichten an Tausende von Kund*innen zu senden und den Prozess effizient zu skalieren, wenn dein Kund*innenstamm wächst.

In diesem Tutorial erfährst du, wie du WhatsApp mit Shopify verbindest und WhatsApp-Benachrichtigungen an Kund*innen sendest, die auf im Store ausgelösten Events basieren (z. B. dem Hinzufügen eines Produkts zu deinem Warenkorb oder dem Aufgeben einer Bestellung). Dazu verwenden wir die von Meta gehostete Cloud API.

Voraussetzungen

Um diesem Tutorial zu folgen, musst du Folgendes tun:

• Installiere Node.js und npm
• Richte einen Store auf Shopify mit Produkten und Zahlungsabwicklung
• Registriere dich für ein Entwicklerkonto auf Meta for Developers, richte eine Business-App ein und wähle ein WhatsApp Business-Konto aus.

Wenn du den letzten Schritt abschließt, wird dir ein temporärer Zugriffsschlüssel gewährt. Diesen benötigst du im weiteren Verlauf dieses Tutorials, also bewahre ihn gut auf.

Sobald du diese Anforderungen erfüllt hast, kannst du mit dem Rest des Tutorials fortfahren.

Eine Nachrichtenvorlage auf WhatsApp erstellen

Mit WhatsApp-Nachrichtenvorlagen kannst du mehrere Nachrichtenformate erstellen, die du mehrmals verwenden kannst, um Kund*innen Nachrichten zu senden, nachdem diese deiner App die Berechtigung dazu erteilt haben.

Folge diesen Schritten, um eine Vorlage für eine Bestellungsbenachrichtigung zu erstellen:

• Melde dich bei deinem Business Manager an und wähle dein Unternehmenskonto aus.
• Klicke auf das Hamburger-Menü oben links auf der Seite und dann auf WhatsApp Manager.
• Bewege deinen Mauszeiger über das Symbol für Kontofunktionen und klicke auf Nachrichtenvorlagen.
• Klicke auf Vorlage erstellen in der oberen rechten Ecke auf der Seite.
• Wähle auf der darauffolgenden Seite die Option Transaktionen für deine Kategorie, gib der Vorlage anschließend einen Namen (in diesem Fall „order_confirmation“) und wähle die Sprache aus.

• Klicke auf Weiter, um zum Vorlageneditor zu gelangen.

Nachdem die Vorlage „order_confirmation“ nun eingerichtet ist, solltest du ihre Gliederung festlegen. So sollte die Nachricht an die Kund*innen aussehen:

• Wir haben deine Bestellung erhalten!

• Hallo [customer's name],

• danke für deinen Einkauf bei uns.

• Wir bearbeiten jetzt deine Bestellung (23190). Dein Paket wird innerhalb der nächsten zwei bis drei Werktage (Feiertage und Wochenenden ausgenommen) an dich versendet.

• Wir schicken dir noch eine E-Mail, sobald dies der Fall ist.

Wähle in deinem Vorlageneditor Text für den Kopfzeilenabschnitt aus. Der Absatz „Wir haben deine...“ dient als Kopfzeile. Der Rest der Nachricht wird in den Inhaltsabschnitt kopiert.

Klicke anschließend zweimal unter dem Textfeld auf Variable hinzufügen, um zwei Variablen hinzuzufügen. Kopiere die erste Variable – {{1}} – und füge sie anstelle des Kund*innennamens ein. Kopiere anschließend die zweite Variable – {{2}} – und füge sie anstelle der Bestellnummer in der Klammer ein.

Wenn du fertig bist, sollte deine Nachricht wie folgt aussehen. Du findest den Vorschaubereich auf derselben Seite.

Klicke auf Senden, um die Nachrichtenvorlage zu speichern.

Nachdem die Vorlage nun fertig ist, kannst du mit der WhatsApp Business Platform einen Webhook in deinem Shopify-Administratorbereich erstellen und eine Anwendung festlegen, die die Nachricht automatisch an Kund*innen sendet, wenn sie eine Bestellung aufgeben.

Webhooks zum Senden von Benachrichtigungen an einen Express-Server verwenden

Angenommen, du möchtest du Kund*innen automatisch eine Nachricht senden, wenn sie eine Bestellung in deinem Shopify-Store aufgeben. Du könntest zum Beispiel alle fünf Minuten den Store auf neue Bestellungen überprüfen. Jedoch ist es ineffizient, ständig neue API-Anfragen an deinen Store zu senden, vor allem, wenn keine neue Bestellungen aufgegeben wurden.

Es ist wesentlich effizienter, wenn ein Webhook auf ein „Order Creation“-Event in deinem Store wartet und dich jedes Mal benachrichtigt, wenn Kund*innen Bestellungen aufgeben.

Hier findest du die grundlegenden Schritte, um einen Webhook für die „Order Creation“ zu erstellen und ihn einem Express-Server zuzuordnen.

Ein Node.js-Projekt einrichten

Erstelle zunächst einen Ordner mit dem Namen „whatsapp-demo“ für dein Projekt.

Öffne anschließend mit „cd“ das Befehlsterminal in „whatsapp-demo“ und führe den folgenden Befehl aus, um ein Node.js-Projekt zu initialisieren:

npm init -y

Installiere die Bibliothek express, die du zum Erstellen eines Webservers auf Node.js verwenden wirst, indem du den folgenden Befehl ausführst:

npm i express

Nachdem du nun deine Entwicklungsumgebung eingerichtet hast, erstellst du den Express-Server.

Einen Express-Server erstellen

Erstelle eine Datei mit dem Namen „test.js“ im Ordner „whatsapp-demo“. Öffne sie mit deinem bevorzugten Quellcode-Editor, kopiere den nachstehenden Code und füge ihn ein:

const express = require('express')
const app = express()

app.post('/webhooks/orders/create', (req, res) => {
 console.log('Yes, We got an order!')
 res.sendStatus(200)
})

app.listen(3000, () => console.log('Now running on port 3000!'))

Mit dem obenstehenden Code hast du einen einfachen Express-Server eingerichtet, der eine Nachricht auf dem Serverterminal anzeigt, wenn der Webhook eine Benachrichtigung zur „Order Creation“ sendet.

Bevor du dies dem Shopify-Webhook zuordnest, musst du zunächst einen Tunnel einrichten.

Einen HTTPS-Verkehrstunnel einrichten

Beim Einrichten eines Webhooks verlangt Shopify von dir, dass du eine öffentliche URL angibst, an die die Benachrichtigung gesendet werden soll.

Wenn du diesem Tutorial auf einem öffentlichen Server folgst, verwende dessen URL. Wenn du diesem Tutorial auf deinem lokalen Computer folgst, musst du einen Tunnel mit einer öffentlich zugänglichen HTTPS-URL erstellen.

Installiere zunächst ngrok, indem du den folgenden Befehl ausführst:

npm install -g ngrok

Starte als Nächstes ein anderes Terminalfenster und führe den folgenden Befehl aus, um die getunnelte URL für deinen lokalen Server abzurufen:

ngrok http 3000
Forwarding                    https://xxxx-xxx-xxx-xxx-xxx.ngrok.io

Notiere dir die URL, denn du wirst sie im nächsten Schritt brauchen. Beachte, dass du beim Neustarten des Clients eine neue URL erhältst und alle Verweise auf diese aktualisieren musst.

Einen Webhook in Shopify erstellen

Rufe den Administratorbereich deines Shopify-Stores auf und navigiere zu Einstellungen > Benachrichtigungen. Scrolle dort nach unten zu Webhooks und klicke auf Webhook erstellen.

Füge einen Webhook für die „Order Creation“ hinzu und gib deine Tunnel-URL oder öffentliche URL an, die du im vorangehenden Abschnitt erstellt hast.

Führe deinen lokalen Server in einem anderen Terminal mit Node index.js aus und klicke dann auf Testbenachrichtigung senden.

Wenn alles richtig funktioniert, erhältst du auf dem Terminal deines Servers die Meldung: „Yes, We got an order!“.

Jetzt hast du eine funktionierende Verbindung zwischen deinem Shopify-Store und dem Express-Server. Als Nächstes sendest du die WhatsApp-Nachrichtenvorlage an die*den Kund*in, nachdem diese*r eine Bestellung aufgegeben hat.

Eine selbstdefinierte Nachricht mit der Vorlage „order_notification“ senden

Installiere zunächst Axios, indem du den folgenden Befehl auf deinem Terminal ausführst:

npm i axios

Du wirst Axios verwenden, um die POST-Anfrage für das Senden der WhatsApp-Nachricht an die*den Kund*in zu erstellen.

Erstelle nach dem Installieren von Axios eine weitere Datei mit dem Namen „customMessage.js“ in deinem Projektordner, importiere dann Axios und füge den folgenden Code in die Datei ein:

const axios = require('axios').default
const express = require('express')
const app = express()

Erstelle anschließend eine Weiterleitung zur Verarbeitung der „Order Creation“-Benachrichtigung von Shopify, indem du Folgendes ausführst:

app.post('/webhooks/orders/create', async (req, res) => {
const body = await getRawBody(req);

const order = JSON.parse(body.toString());

console.log("Yes, We got an order!", order.customer.phone);
  
// Remaining code will go here

})

Wenn Shopify /webhooks/orders/create mit einer Bestellung aufruft, werden die Bestelldetails an die Weiterleitung innerhalb von res, dem zweiten Argument deiner asynchronen Rückruffunktion, und ein JavaScript-Objekt gesendet.

Nimm als Nächstes die Telefonnummer, den Vornamen und die Bestellnummer der*des Kund*in und erstelle daraus die API-Anfrageparameter:

        const data = {
        "messaging_product": "whatsapp", 
         "to": `${order.customer.phone}`, 
        "type": "template", 
         "template": { 
        "name": "order_confirmation", 
        "language": { "code": "en_GB" },
        "components": [
        {
          "type": "body",
          "parameters": [
          {
            "type": "text",
            "text": `${order.customer.first_name}`
          },
          {
            "type": "text",
            "text": `${order.id}`
          }
        ]
      }
    ] 
  } 
} 

Das obige Objekt enthält alle Parameter, die zum Abschließen der Anfrage erforderlich sind. Stelle sicher, dass der im Objekt angegebene Vorlagenname mit dem zuvor in deinem WhatsApp Business Manager erstellten Namen übereinstimmt.

Erstelle anschließend ein „config“-Objekt mit einem eingebetteten „headers“-Objekt. Lege im „headers“-Objekt deinen WhatsApp-Zugriffsschlüssel als „Authorization“-Wert (ersetze ACCESS_TOKEN mit dem Schlüssel) und „application/json“ als „Content-Type“ fest:

 const config = {
 headers: { Authorization: `Bearer <ACCESS_TOKEN>`, 'Content-Type':   'application/json'}
};

Erstelle nun eine POST-Anfrage mit Axios und übergib sowohl das „config“-Objekt als auch das „data“-Objekt als Argumente. Bette dann die Methoden „catch“ und „then“ ein, um das Ergebnis anzuzeigen (oder die Fehlernachricht, wenn das Promise fehlschlägt):

  if (order.customer.phone) {
   return res.sendStatus(403);
  } else {
  axios
  .post(
    "https://graph.facebook.com/<API_VERSION>/<YOUR_WABA_ID>/messages",
  data,
  config
  )
  .then((result) => console.log(result))
  .catch((err) => console.log(err));

  return res.sendStatus(200);
}

Ersetze YOUR_WABA_ID durch deine WhatsApp Business-ID aus deinem WhatsApp-App-Dashboard und API_VERSION durch eine kompatible Cloud API-Version (standardmäßig v15.0).

Die App ist fertig!

Um sie zu testen, sollte der ngrok-Tunnel noch ausgeführt werden und du musst den Express-Server in einem separaten Terminal starten:

node customMessages.js

Andere Shopify-Events

Zusätzlich zur Bestellungsaufgabe stellt Shopify über 50 Webhooks für unterschiedliche Events bereit. Du kannst die Erstellung und Aktualisierung von Einkaufswagen, Produktsammlungen, erfolgreiche und fehlgeschlagene Abrechnungsversuche und vieles mehr abonnieren.

Folge einem ähnlichen Ablauf, wie oben beschrieben, um diese Webhooks zu verwenden, d. h. indem du einen neuen Webhook in deinem Shopify-Administratorbereich erstellst und das Thema als eine Weiterleitung in deinem Express-Server registrierst.

Wie du siehst, hilft dir die WhatsApp Business Platform dabei, nahtlos mit deinen Kund*innen zu kommunizieren, sowohl manuell als auch programmgesteuert basierend auf Events in deinem Shopify-Store.

Mit der WhatsApp-Integration von Shopify kannst du Massennachrichten in Echtzeit an deine Kund*innen senden. Nachrichten können automatisch (z. B. basierend auf einem Event) oder manuell gesendet werden. Die Integration ist nicht nur leicht einzurichten, sondern auch äußerst skalierbar. Durch die Kombination von WhatsApp und Shopify wird die Kommunikation mit Kund*innen konsistent, effektiv und wirkungsvoll.

Weitere Informationen dazu, wie du WhatsApp in deine Apps und Projekte integrieren kannst, findest du in unseren anderen Entwicklungs-Tutorials.