Senden von WhatsApp-Nachrichten aus Google Sheets mit AI Studio

Es ist ein einfaches, aber leistungsfähiges Konzept: Daten aus Ihrem Google Sheet abrufen und per WhatsApp versenden. Und dann können Sie Daten aus einer WhatsApp-Konversation abrufen und sie automatisch in ein Google Sheet eingeben. Ist Ihr Unternehmen auf der Suche nach einer schnellen und einfachen Integration zwischen WhatsApp und Google Sheets, um die Kundenerfahrung zu verbessern? In diesem Tutorial erfahren Sie, wie Sie das machen können.

In diesem Tutorial lernen Sie, wie Sie die No-Code/Low-Code-Plattform AI Studio von Vonage nutzen, um einen WhatsApp-Chatbot zu erstellen, der das Produktfeedback der Nutzer verarbeitet.

Preview of WhatsApp Feedback Flow

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Voraussetzungen

• Vonage Entwickler-Konto

• Vonage Virtuelle Nummer - Mieten Sie eine Nummer für Ihren virtuellen Agenten

• Google Sheets-Konto - Für Google anmelden

Wie man eine Google Sheets-Datenbank erstellt

Öffnen Sie Google Tabellen und klicken Sie auf Blank Spreadsheet. Geben Sie Ihrem Arbeitsblatt einen schönen Titel wie WhatsApp Product Feedback. Als Nächstes benennen Sie Ihr erstes Blatt users.

Das users Blatt wird 3 Spaltenüberschriften haben:

1. phone_number

2. first_name

3. last_name

Fügen Sie zu Testzwecken einen Benutzer hinzu, der alle drei Datenfelder ausfüllt.

• Für phone_numberfügen Sie Ihre eigene WhatsApp-Nummer oder eine andere Telefonnummer, auf die Sie zugreifen können, um WhatsApp zum Testen zu empfangen, hinzu. Telefonnummern sollten im internationalen Format ohne + oder 00 sein. Eine US-Nummer würde zum Beispiel lauten 15552345678.

Fügen Sie nun ein zweites Blatt namens responses. Das Blatt responses Blatt wird 4 Spaltenüberschriften haben:

1. phone_number

2. type

3. feature

4. feedback

Verwendung von Google Sheets als REST-API

Jetzt verwandeln Sie Ihr Google Spreadsheet in eine REST-API. Öffnen Sie die Registerkarte Erweiterungen und wählen Sie Apps Scripts. Mit Apps Scripts können Sie Code über Google Workspace-Anwendungen wie Google Sheets oder Google Docs schreiben, um deren Funktionen zu automatisieren und zu erweitern.

Geben Sie Ihrem neuen Projekt zunächst einen schönen Titel wie WhatsApp Product Feedbackund löschen Sie den Code in der Registerkarte unter code.gs.

So erstellen Sie einen GET-Anfrage-Endpunkt für Google Sheets

Sie können den folgenden Code in code.gs:

function json(sheetName, phoneNumber) {
 const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
 const sheet = spreadsheet.getSheetByName(sheetName);
 const data = sheet.getDataRange().getValues();
  // Find the row corresponding to the given phone number
 const headers = data[0];
 const rowIndex = data.findIndex(row => row[headers.indexOf('phone_number')] === phoneNumber);
  // If the phone number is found, return the corresponding entry, otherwise return null
 if (rowIndex !== -1) {
   const rowData = data[rowIndex];
   const jsonData = convertToJson([headers, rowData]);
   return ContentService
          .createTextOutput(JSON.stringify(jsonData))
          .setMimeType(ContentService.MimeType.JSON);
 } else {
   return ContentService
          .createTextOutput(JSON.stringify({error: "Phone number not found."}))
          .setMimeType(ContentService.MimeType.JSON);
 }
}


function doGet(e) {
 const path = e.parameter.path;
 const phoneNumber = e.parameter.phone_number; // Extract phone number from URL parameter
 return json(path, phoneNumber);
}

Aber was macht dieser Code? Die erste Funktion erzeugt unsere Logik, die einen Blattnamen, wie users, und eine phone_numberwie zum Beispiel Ihre WhatsApp-Nummer. Dann durchsucht sie das aktive Arbeitsblatt, um dieses bestimmte Blatt zu finden. In diesem Blatt findet sie die Spalte mit dem Namen phone_number und sucht dann jede Zeile anhand der phone_number die angegeben ist. Wenn es eine Übereinstimmung findet, nimmt es die Daten in dieser Zeile und konvertiert sie in ein JSON.

Die zweite Funktion erstellt einen GET-Endpunkt und extrahiert die Abfrageparameterwerte von path und phone_number. Dann sendet sie diese Werte zurück an die erste Funktion und gibt das empfangene JSON zurück.

So erstellen Sie einen POST-Anfrageendpunkt für Google Sheets

Unterhalb Ihrer GET-Anforderungslogik können Sie nun Folgendes hinzufügen:

function doPost(e) {
 // Parse incoming POST data
 const postData = JSON.parse(e.postData.contents);

 // Extract data from the POST request
 const phoneNumber = postData.phone_number;
 const type = postData.type;
 const feature = postData.feature;
 const feedback = postData.feedback;

 // Get the "responses" sheet
 const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
 const sheet = spreadsheet.getSheetByName("responses");

 // Append a new row with the data
 const newRow = [phoneNumber, type, feature, feedback];
 sheet.appendRow(newRow);

 // Return success response
 return ContentService.createTextOutput("Row added successfully.");
}

Dadurch wird ein POST-Endpunkt erstellt, der wiederum die in der Anfrage gesendeten Informationen extrahiert. Hier werden die Daten jedoch im Body gesendet, so dass e.postData.contents dies gut handhabt. Sobald alle Daten extrahiert wurden und das responses Sheet geladen sind, wird eine neue Zeile in dem Array newRow. Sie wird dann mit der appendRow Methode hinzugefügt. Schließlich wird eine nette Antwortnachricht gesendet, damit wir in AI Studio wissen, dass unsere Operation erfolgreich war.

Jetzt können Sie Ihre Webanwendung bereitstellen und sie öffentlich zugänglich machen. Klicken Sie auf Bereitstellen.

Daraufhin öffnet sich ein Fenster, in dem Sie aufgefordert werden, "Bitte wählen Sie einen Bereitstellungstyp". Klicken Sie auf das Einstellungssymbol und wählen Sie Webanwendung. Für "Ausführen als" wählen Sie sich selbst. Und für "Wer hat Zugriff" wählen Sie Jeder. Fahren Sie fort und klicken Sie auf Zugriff autorisieren, um Google zu erlauben, den Zugriff auf das Projekt zu autorisieren.

Schließlich sehen Sie ein Panel für die neue Bereitstellung, das eine Web-App-URL enthält. Speichern Sie diese URL für später. Klicken Sie abschließend auf Fertig.

Wie man einen Inbound WhatsApp Chatbot erstellt

Um Ihren No-Code/Low-Code-Agenten zu erstellen, folgen Sie den Anweisungen in der AI Studio-Dokumentation. Es gibt drei wichtige Optionen für unseren Agenten, die Sie auswählen können:

• Typ: WhatsApp

• Vorlage: Von Grund auf neu beginnen

• Veranstaltung: Inbound

Unser Agent wird recht einfach sein und nur 4 verschiedene Knotentypen verwenden:

1. Knoten "Nachricht sendenSend Message Node: eine einzelne Textnachricht, die vom virtuellen Agenten an den Benutzer gesendet wird.

2. Eingabeknoten sammeln: Der virtuelle Agent stellt eine Frage an den Benutzer. Die Eingaben des Nutzers werden erfasst und in einem Parameterwert gespeichert.

3. Bedingter KnotenBedingter Knoten: ein logischer Operator, der es Ihrem Ablauf ermöglicht, zwischen verschiedenen Werten für einen Parameter zu unterscheiden. Z.B. if/else.

4. Webhook-Knoten: Mit diesem Knoten können Sie Daten an Dienste von Drittanbietern, wie z. B. Ihre Google Sheets-API, senden und von ihnen anfordern!

So erstellen Sie benutzerdefinierte Parameter in AI Studio

Unser Low-Code-Agent wird 5 benutzerdefinierte Parameter verwenden. Erstellen Sie die Parameter: feature, feedback, feedback_type, first_name, und last_name. Alle 5 sollten von der @sys.any Einheit sein.

Custom Parameters in AI Studio

Wie man einen WhatsApp-Benutzer-Feedbackfluss in AI Studio erstellt

Unser virtueller Agentenfluss besteht aus der Begrüßung des Benutzers mit seinem Namen und dem Sammeln des Produktfeedbacks von unserem Benutzer, bevor die Daten an unser Google Spreadsheet gesendet werden. Sie können die folgenden Knoten hinzufügen, beginnend mit dem Start-Knoten.

1. Abrufen des Benutzernamens a. Knotentyp: Webhook-Knoten b. Methode: GET c. URL: Ihre Web-App-URL aus dem vorherigen Abschnitt d. Body: Wählen Sie den Body-Typ Text e. Abfrageparameter:

   • Abfrage-Parameter: path

   • Wert: users

   f. Antwort-Mapping

   • Objektpfad: [0][“first_name”], Parameter: $first_name

   • Objektpfad: [0][“last_name”], Parameter: $last_name

GET Request with Response Mapping2. Willkommensnachricht

1. Knotentyp: Knoten "Nachricht senden

2. Ausgabeart: Text

3. Der Agent sagt: "Hey$first_name$last_namewillkommen zurück! Danke, dass du uns ein Feedback gegeben hast "

3. Feedback-Typ sammeln

1. Knotentyp: Eingabeknoten sammeln

2. Parameter: feedback_type

3. Nachricht: Antwort-Schaltflächen

4. Text: "Bitte wählen Sie die Art des Feedbacks"

Knöpfe:

1. Schaltfläche Titel: " Einen Fehler melden", Schaltfläche Wert: bug

2. Schaltfläche Titel: " Funktionsanfrage", Schaltfläche Wert: request

3. Schaltfläche Titel: "️ Sonstiges", Schaltfläche Wert: other

4. Merkmal "Sammeln

1. Knotentyp: Eingabeknoten sammeln

2. Parameter: feature

3. Nachricht: Antwort-Schaltflächen

4. Körper: "Um welches Merkmal handelt es sich?"

5. Knöpfe:

6. Schaltfläche Titel: " Merkmal Eins", Schaltfläche Wert: one

   • Schaltfläche Titel: " Merkmal Zwei", Schaltfläche Wert: two

   • Schaltfläche Titel: " Merkmal Drei", Schaltfläche Wert: three

5. Wenn Rückmeldung = Fehler

1. Knotentyp: Bedingung

2. Bedingung: wenn Typ = Fehler

3. Parameter: feedback_type

   • Operation: ist gleich

   • Wert: bug

Hier weicht Ihr Ablauf für einen einzigen Schritt ab. Der Grund dafür ist, dass wir den Nutzern erlauben wollen, uns Fotos von ihren Fehlern zu schicken, aber für alle anderen Rückmeldungen erwarten wir, dass sie ihre Beschreibungen abtippen. Also von dem if type = bug Exit-Point im vorherigen Knoten mit dem Collect Bug Report Node verbinden. Verbinden Sie den Standard-Exit-Point des vorherigen Knotens mit dem Collect Feedback Node. Die beiden Knoten sind wie folgt:

6. Fehlerbericht sammeln

1. Knotentyp: Eingabeknoten sammeln

2. Parameter: feedback

3. Nachricht: Text:

4. Text: " Bitte beschreiben Sie den Fehler. Sie können auch ein Foto des Fehlers schicken."

Erwartete Eingabe: Text & Bild

7. Feedback sammeln

1. Knotentyp: Eingabeknoten sammeln

2. Parameter: feedback

3. Nachricht: Text:

4. Text: " Bitte beschreiben Sie Ihr Feedback"

5. Erwartete Eingabe: Nur Text

8. An Google Sheets senden

1. Knoten-Typ: Webhook-Knoten

2. Methode: POST

3. URL: Ihre Web-App-URL aus dem vorherigen Abschnitt

4. Körper: {"Telefonnummer": $SENDER_PHONE_NUMBER, "type": "$feedback_type", "Merkmal": "$feature", "feedback": "$feedback"}

POST Request in AI Studio9. Dankesnachricht

1. Knotentyp: Knoten "Nachricht senden

2. Ausgabeart: Text

3. Der Agent sagt: "Vielen Dank für das wertvolle Feedback. Ich wünsche Ihnen einen schönen Tag!"

10 Gesprächsknoten beenden

Jetzt ist Ihr Agent bereit, automatisch WhatsApp-Nachrichten von Google aus zu versenden!

Wie Sie Ihren WhatsApp Chatbot testen

Nachdem Ihr virtueller Agent nun angeschlossen ist, können Sie das Fenster Tester öffnen.. Fügen Sie zunächst einen Testwert phone_number Wert hinzu, indem Sie auf das Einstellungssymbol in der oberen rechten Ecke klicken. Suchen Sie den SENDER_PHONE_NUMBER Systemparameter und fügen Sie den Wert aus Ihrem users Tabelle in Google ein. Klicken Sie erneut auf das Einstellungssymbol im Tester, um das Feld Ausgangsparameter zu schließen. Jetzt können Sie auf das Aktualisierungssymbol klicken und Ihre Testkonversation starten.

Wie cool ist Ihr neuer Produkt-Feedback-Agent?! Haben Sie getestet, ob Sie Fotos für Fehlerberichte hinzufügen können? Schauen Sie sich das Google Sheet an und sehen Sie, wie es eine URL hinzufügt. Wenn Sie versuchen, die URL zu öffnen, sollten Sie das Bild, das an Ihren virtuellen Agenten gesendet wurde, automatisch herunterladen - großartig!

Schlussfolgerung

In diesem Tutorial haben Sie eine Integration von WhatsApp und Google Sheets erstellt. Sie können nun automatisch WhatsApp-Nachrichten aus Google Sheets versenden und auch neue Daten aus WhatsApp in Google Sheets eingeben. Und das alles ohne oder mit wenig Code!

Wie werden Sie Ihren Agenten erweitern? Sie können die Authentifizierung zu Ihrer Google Sheets-API hinzufügen. Oder Sie können Ihren Agenten mit unserem Generative AI Node benutzerfreundlicher gestalten. Mit dem Live Agent Routing Node können Sie einen Nutzer auch direkt mit einem Mitglied Ihres Teams verbinden.

Was auch immer Sie tun wollen, wir wollen davon hören! Bitte kontaktieren Sie uns in unserer Entwickler-Community Slack oder auf X, früher bekannt als Twitter.

Zusätzliche Ressourcen

• Endlose FAQs auf WhatsApp mit generativer KI und AI Studio

• Geringer Code-Einsatz: AI Studio mit Airtable

• Erstellen einer Farewell App mit Vonage AI Studio und Notion als Datenbank

• Wie man ein KI-Mockup für Konversation erstellt