Verwendung von WhatsApp-Produktnachrichten mit der Vonage-Nachrichten-API

Einführung

Die Vonage-Nachrichten-API lässt sich in SMS, MMS und beliebte soziale Chat-Apps integrieren, so dass Sie mit Ihren Kunden über den Kanal kommunizieren können, den sie am liebsten nutzen. In Verbindung mit umfangreichen Funktionen und sofortigen Ergebnissen ergibt dies ein ansprechendes, kostengünstiges Chaterlebnis.

Kürzlich haben wir einige Verbesserungen an der WhatsApp-Kommunikationsplattform vorgenommen, indem wir Unterstützung für WhatsApp Produktnachrichten. Sie ermöglichen es einem Unternehmen, Produkte und Dienstleistungen zu präsentieren, und Kunden können Produkte durchsuchen und in den Warenkorb legen, ohne die WhatsApp-Konversation zu verlassen.

In diesem Tutorial gehen wir Schritt für Schritt durch die Einrichtung von WhatsApp Product Messages mit der Vonage Messages API.

Voraussetzungen

Bevor Sie beginnen, vergewissern Sie sich, dass Sie die folgenden Konten aktiviert und die Tools installiert haben:

• A Vonage Entwickler-Konto - Wenn Sie noch kein Konto haben, können Sie eines erstellen. Sie erhalten dann ein kostenloses Guthaben, um mit unseren APIs herumzuspielen.

• A Meta Commerce Konto - Sie benötigen die entsprechenden Berechtigungen, um einen Produktkatalog hinzuzufügen.

• ngrok - Ein kostenloses Konto ist erforderlich. Mit diesem Tool können Entwickler einen lokalen Entwicklungsserver für das Internet freigeben.

Hinzufügen von Produkten zum Katalog

Um unsere Produkte an die Kunden zu bringen, brauchen wir einen Ort, an dem wir die Metadaten, einschließlich des Titels, der Kategorie, des Preises usw., und ein Bild speichern können. Meta bietet Ihnen die Möglichkeit, all diese Informationen auf seinen Servern zu speichern, und zwar mit dem Meta Commerce Manager Seite.

Legen Sie ein Konto an, falls Sie das noch nicht getan haben, und navigieren Sie zum Meta Commerce Manager Seite und klicken Sie auf Katalog hinzufügen.

add-catalog.png

Sie müssen folgende Angaben machen Katalog-Typ. Wählen Sie Elektronischer Handel und drücken Sie Weiter.

Als nächstes haben wir zwei Möglichkeiten, unsere Produktdaten hochzuladen. Wir können wählen, ob wir unser Produkt manuell oder über eine Partnerplattform. Wir entscheiden uns für Produktinfo hochladen, lassen die anderen Punkte unverändert und drücken auf erstellen..

configure-settings.png

Sie haben nun einen neuen Katalog, und wenn Sie auf Artikelklicken, werden Sie sehen, dass Sie keine haben. Lassen Sie uns ein paar Artikel hochladen, indem Sie die Taste Artikel hinzufügen klicken.

add-items.png

Wir fügen Artikel hinzu, indem wir sie manuell in unseren Katalog hochladen.

Wählen Sie Manuellund dann Weiter um fortzufahren.

add-items-manually.png

Hier müssen wir Informationen für die folgenden Felder eingeben: Titel, Beschreibung, Preis, Website Link, Preis, Verkaufspreis, Facebook Produktkategorie, Zustand, Verfügbarkeit und Status. Sie benötigen auch ein Bild des Produkts. Fügen Sie einfach ein paar Artikel hinzu.

before-add-items.png

In meinem Fall erstelle ich einen Pizzaladen, also habe ich ein paar Pizzen und ein Getränk hinzugefügt, wie unten gezeigt.

after-add-items.png

Bevor Sie fortfahren, vergewissern Sie sich bitte, dass alle Einträge fehlerfrei angezeigt werden.

Kopieren Sie die Inhalts-ID Ihrer Artikel (aus dem vorherigen Screenshot), da wir diese später benötigen. Wir benötigen auch die katalog_id, die Sie auf der Seite Katalog Seite finden.

Beachten Sie, dass sich die Vonage-Dokumentation auf die Inhalts-ID als bezeichnet. produkt_einzelhändler_id.

Wenn Sie weitere Einzelheiten über Kataloge erfahren möchten, lesen Sie bitte die Meta-Dokumentation.

Informationen zum WhatsApp Business Account und zur Arbeit mit Katalogen

Um Produktartikel in Produktnachrichten einzuschließen, die von einer mit Ihrem WhatsApp Business Account (WABA) verbundenen Nummer gesendet werden, muss der Katalog der diese Artikel enthält, mit Ihrem WABA verknüpft sein.

Es gibt hauptsächlich zwei Möglichkeiten, Ihren WhatsApp Business Account mit Ihrem Katalog zu verknüpfen.

1. Eigenes Konto - wird durch den eingebetteten Anmeldeprozess erstellt (über das Vonage Dashboard).

2. Verwaltetes Konto - wird für Sie von einem Partnerunternehmen wie z. B. Vonage erstellt. Um einen Katalog mit einem Managed Account zu verbinden, müssen Sie das Partnerunternehmen (z. B. Vonage) dem Katalog zuordnen.

Wir verwenden ein Eigenes Konto für dieses Beispiel, aber die Dokumentation zum Verbinden eines Verwaltetes Konto finden Sie hier.

Virtuelle Nummer kaufen

Bevor wir ein Eigenes Kontoeinrichten, müssen wir eine virtuelle Telefonnummer kaufen, die wir für unser Pizza-Geschäft nutzen können.

Um eine zu erwerben, loggen Sie sich in das Vonage Dashboardund gehen Sie zu Rufnummern > Nummern kaufenund suchen Sie nach einer Nummer, die Ihren Anforderungen entspricht.

buy-numbers.png

Notieren Sie sich die von Ihnen gekaufte Nummer, da wir sie im nächsten Teil der Einrichtung verwenden werden.

Einrichten eines eigenen WhatsApp-Geschäftskontos

Anmeldung beim Vonage Dashboardund gehen Sie zu Externes Konto und klicken Sie auf den WhatsApp Social Channel, um zu beginnen.

whatsapp-social-channels.png

Sie sehen einen Einrichtungsbildschirm und drücken Weiter mit Metadrücken, wie unten gezeigt.

whatsapp-vonage-setup.png

Als Nächstes müssen Sie Ihr Meta Business-Konto vervollständigen und Ihr WhatsApp Business-Konto mit Ihrem Profil verknüpfen.

setupprocess.gif

Sobald Sie fertig sind, wird ein Popup-Fenster mit einigen hilfreichen Tipps angezeigt, wie Sie Ihre WhatsApp-Nummer uneingeschränkt nutzen können, also drücken Sie Weiter. Sie müssen die Telefonnummer, die Sie verwenden möchten, und den API-Schlüssel, an den der WhatsApp-Nachrichtenverkehr gehen soll, auswählen. Sie können WhatsApp das bevorzugte Hosting überlassen. Drücken Sie . Meine WhatsApp-Nummer live abrufen um fortzufahren.

associate-number-with-vonage.png

Sie sollten Ihr verbundenes WhatsApp-Konto auf der Seite Externe Konten auf dem Bildschirm Externe Konten im Vonage Dashboard.

connected-wa-account.png

Verbinden des Katalogs mit WhatsApp

Gehen Sie zu Ihrem Meta Commerce-Konto und navigieren Sie zu Geschäftliche Einstellungen, WhatsApp-Konten, dann WhatsApp-Manager, wie unten gezeigt.

wa-accounts.png

Weiter zu Konto-Tools, Katalogdann Wählen Sie einen Katalog

wa-manager.png

Sie haben nun die Möglichkeit, einen Katalog zu verbinden. Wählen Sie den Katalog aus, den wir zuvor erstellt haben und der Katalog_Produkte.

connect-catalog.png

Gehen Sie zu Ihren Meta Business Einstellungenund klicken Sie auf Datenquellen, dann Katalogeund geben Sie Vonage als Partner mit einer Geschäfts-ID ein. Die ID lautet 2290848174274168. Kontakt Vonage-Unterstützungder die Genehmigung des Partnerantrags und die Verbindung des Katalogs veranlassen wird.

partners.png

Erstellen einer nachrichtenfähigen Vonage-Anwendung

Um mit der Nachrichten-API zu interagieren, müssen wir eine Vonage-API-Anwendung erstellen, um unsere Anfragen zu authentifizieren. Betrachten Sie Anwendungen eher als Container und Metadaten, um alle Ihre Daten auf der Vonage-Plattform zu gruppieren. Wir werden erstellen wir eine Anwendung mit dem Vonage API Dashboard.

Geben Sie einen Namen ein (z. B. "WhatsAppProductMessage") und klicken Sie auf Öffentlichen und privaten Schlüssel generieren. Sie werden aufgefordert, eine Schlüsseldatei auf der Festplatte zu speichern - den privaten Schlüssel. In der Regel ist es eine gute Idee, diesen Schlüssel in Ihrem Projektordner aufzubewahren, da Sie ihn später noch benötigen werden. Wir werden den privaten Schlüssel später zur Erzeugung eines JSON-Web-Tokens (JWT) verwenden.

Anwendungen arbeiten mit einem öffentlichen/privaten Schlüsselsystem. Wenn Sie eine Anwendung erstellen, wird ein öffentlicher Schlüssel erzeugt und bei Vonage gespeichert. Ein privater Schlüssel wird generiert, nicht bei Vonage aufbewahrt und bei der Erstellung der Anwendung an Sie zurückgegeben.

Als nächstes müssen Sie die Option Nachrichten Fähigkeit aktivieren und eine Eingehende URL und eine Status-URL. An dieser Stelle sollten Sie normalerweise etwas wie ngrok verwenden, um Port 4040 weiterzuleiten. Sie können dies von einem Terminal oder einer Eingabeaufforderung aus tun, indem Sie ngrok http 4040. Sie haben nun eine Weiterleitungsadresse, die Sie sowohl in die Eingehend und Status URLs eingeben können.

ngrok-running.png

Wenn eine Nachricht die Nachrichten-APIerreicht, werden die Daten dazu an die Eingehende URL. Wenn Sie eine Nachricht über die API senden, werden die Daten über den Nachrichtenstatus an die Status-URL.

Sobald sie erstellt ist, gehen Sie zu Soziale Kanäle verknüpfenund wählen Sie die zuvor erstellte WhatsApp-Nummer aus, und drücken Sie verknüpfen..

link-wa-account.png

Ein JWT-Token erstellen

JSON Web Token (JWT) definiert ein kompaktes und in sich geschlossenes Verfahren zur sicheren Übertragung von Informationen zwischen Parteien in Form eines JSON-Objekts. Diese Informationen können überprüft werden und sind vertrauenswürdig, da sie digital signiert sind. Aus Sicherheitsgründen wird empfohlen, bei der Arbeit mit der Nachrichten-API und anderen Vonage-Produkten ein JWT-Token zu verwenden.

Wir haben eine Website eingerichtet, auf der Sie in wenigen Schritten einen Token erstellen können. Klicken Sie auf hier und fügen Sie Ihren privaten Schlüssel sowie Ihre Anwendungs-ID. Dann müssen Sie angeben, wie lange das Token gültig sein soll. Wählen Sie drei Tage, und Ihr JWT-Token ist verfügbar. Kopieren Sie es vorerst an einen sicheren Ort. Es ist auch erwähnenswert, dass Vonage mehrere Server-SDKs die JWTs für unsere Produkte erstellen können.

jwt-generator.png

Nachrichtenvorlagen konfigurieren

Denken Sie daran, dass eine Produktnachricht nicht verwendet werden kann, um eine WhatsApp-Konversation zu beginnen. Sie kann nur als Teil einer bestehenden Konversation gesendet werden, die entweder durch eine Nachricht des Kunden an das Unternehmen oder durch das Senden einer Vorlagennachricht durch das Unternehmen an den Kunden begonnen wurde. In diesem Beispiel senden wir eine Vorlagennachricht an den Kunden mit WhatsApp-Manager. Wenn Sie angemeldet sind, wählen Sie Konto-Toolsund dann Nachrichtenvorlage.

wa-message-templates.png

Wählen Sie Nachrichtenvorlage erstellen. Wählen Sie unter Kategorie Dienstprogramm .. Geben Sie der Vorlage den Namen beispiel_dienstprogramm_nachricht und wählen Sie die gewünschte Sprache. Wenn Sie fertig sind, drücken Sie Weiter.

utility-message.png

Bereitstellen einer Körper Text wie z.B. "Willkommen bei Michaels Lebensmittelladen! Schauen Sie sich ruhig um". Klicken Sie nun auf Absenden Schaltfläche. Sie sehen den folgenden Bildschirm; es dauert einige Zeit, bis Meta den Artikel freigibt. (Als ich diesen Artikel schrieb, dauerte es fast 10 Stunden, bis er genehmigt wurde).

message-template-status.png

Testen der Anwendung

Sobald Ihre Nachrichtenvorlage genehmigt wurde, speichern Sie die drei Skripte unten, um die Anwendung zu testen, indem Sie nur die folgenden Änderungen vornehmen.

• Ersetzen Sie ADD_YOUR_JWT_TOKEN durch das im vorherigen Schritt erstellte.

• Ersetzen Sie ADD_YOUR_VONAGE_NUMBER durch die Vonage-Nummer, die Sie zuvor gekauft haben.

• Ersetzen Sie ADD_YOUR_DESTINATION_NUMBER durch eine Nummer, die Sie erreichen können.

Vorlage.sh - Führen Sie dies aus, nachdem Ihre Nachrichtenvorlage von Meta genehmigt wurde.

einzeln.sh - Führen Sie dies aus, nachdem Sie die Nachricht erhalten und bearbeitet haben. Sie sollten auch die katalog_id und product_retailer_id hinzufügen, um eine einzelne Nachricht anzuzeigen.

multiple.sh - Führen Sie diese Datei jederzeit aus, nachdem Sie die erste Vorlage erhalten haben. Sie sollten auch die katalog_id und produkt_einzelhändler_id hinzufügen, um mehrere Nachrichten anzuzeigen.

Anzeigen der Ergebnisse in WhatsApp

Nachdem Sie die template.sh und die single.shgesendet haben, sehen Sie eine vom Unternehmen initiierte Unterhaltung, die nur die Cola zeigt.

iphone1.png

Klicken Sie auf Ansichtklicken, haben Sie die Möglichkeit Zum Warenkorb hinzufügen oder Nachricht an Unternehmen. Wir legen die Cola in den Warenkorb und können diese Bestellanfrage nun an das Unternehmen zurückschicken.

iphone2.png

Für mehrere Produkte führen Sie die Datei multiple.sh Skript aus und Sie werden folgendes sehen. Wir können auch mehrere Artikel in den Warenkorb legen, wie unten gezeigt.

iphone3.png

iphone4.png

Nachbereitung

Nachdem Sie nun gesehen haben, wie man WhatsApp-Produktnachrichten verwendet, ist es an der Zeit, Ihre eigenen zu erstellen! Sie könnten dieses Projekt erweitern, indem Sie einen Zahlungsprozessor verwenden, um automatisch Zahlungen zu akzeptieren, ohne dass ein Benutzer eingreifen muss. Vergessen Sie auch nicht, sich auf die WhatsApp-Produktnachrichten Seite für weitere Informationen.

Wenn Sie Fragen oder Feedback haben, besuchen Sie den Vonage Entwickler-Slack oder senden Sie mir einen Tweet auf Twitterund ich werde auf Sie zurückkommen. Nochmals vielen Dank fürs Lesen, und wir sehen uns beim nächsten Mal!