Erstellen eines KI-gestützten WhatsApp-Chatbots: Eine Schritt-für-Schritt-Anleitung

Veröffentlicht: 2024-03-22
KI/ML 9 Min. 4
22. März 2024

Zusammenfassung:

Erfahren Sie Schritt für Schritt, wie Sie einen KI-gestützten WhatsApp-Chatbot erstellen und dabei die Funktionen von Node.js und OpenAI nutzen. Von der Einrichtung eines Meta-Geschäftskontos bis hin zur Integration von WhatsApp API und OpenAI unterstützt dieser Leitfaden Unternehmen dabei, Kundeninteraktionen zu optimieren und neue Möglichkeiten der automatisierten Kommunikation zu erschließen.

Im heutigen digitalen Zeitalter ist es für Unternehmen von größter Bedeutung, die Leistungsfähigkeit der künstlichen Intelligenz (KI) zur Verbesserung der Kundeninteraktionen zu nutzen, um auf dem Markt an der Spitze zu bleiben. WhatsApp ist eine der am weitesten verbreiteten Messaging-Plattformen weltweit und bietet Unternehmen eine hervorragende Gelegenheit, effektiv mit ihrer Zielgruppe in Kontakt zu treten. Betreten Sie das Reich der KI-gestützten WhatsApp-Chatbots. Diese virtuellen Assistenten revolutionieren den Kundenservice, bieten Support rund um die Uhr und optimieren Kommunikationsprozesse.

Unabhängig davon, ob Sie ein aufstrebendes Startup oder ein etabliertes Unternehmen sind, kann die Navigation durch die Entwicklungsschritte mit dem richtigen Ansatz einfacher gestaltet werden. In diesem umfassenden Leitfaden untersuchen wir die Grundprinzipien, Schritt-für-Schritt-Verfahren und entscheidenden Überlegungen, die für die Integration der WhatsApp Business API in Ihre Node.js-Anwendung erforderlich sind. Indem wir die Leistungsfähigkeit der natürlichen Sprachverarbeitungsfunktionen von OpenAI nutzen, schaffen wir ein nahtloses Benutzererlebnis, das bei Ihrem Publikum Anklang findet.

Von der Einrichtung Ihres WhatsApp Business-Kontos bis zur Integration der OpenAI-API in Ihren Node.js-Code – begleiten Sie uns, während wir den Prozess entmystifizieren und Sie in die Lage versetzen, Ihre eigene KI-gesteuerte Lösung zu erstellen. Diese transformative Reise in die Welt der KI-gesteuerten Gesprächsagenten müssen Sie nicht alleine unternehmen. Ein KI-Chatbot-Entwicklungsunternehmen kann als Ihr vertrauenswürdiger Partner fungieren und dabei wertvolle Einblicke und Fachwissen liefern. Lassen Sie uns gemeinsam auf diese spannende Expedition gehen.

Schritt 1: Einrichten eines Meta-Geschäftskontos (Facebook) und einer App

  1. Erstellen Sie zunächst ein Meta-Geschäftskonto (hier klicken).

Füllen Sie die Details aus und klicken Sie auf „Senden“.

2. Erstellen Sie eine neue Meta-App (Facebook) (hier klicken).

  • (Melden Sie sich bei Ihrem Meta-Entwicklerkonto (Facebook) an.

Klicken Sie nach der Anmeldung auf „Meine Apps“.

Klicken Sie auf meine App

3. Klicken Sie nun auf „App erstellen“

4. Wählen Sie „Andere“ und klicken Sie auf „Weiter“.

5. Wählen Sie App-Typ: „Business“ und klicken Sie auf „Weiter“.

6. Geben Sie die App-Details ein und klicken Sie auf „App erstellen“.

Schritt 2: Einrichten der Meta-App (Facebook) für die WhatsApp-Integration

1. Fügen Sie WhatsApp zu Ihrer Meta-App (Facebook) hinzu.

  • Wählen Sie im „Entwickler-Dashboard“ Ihre App aus.
  • Suchen Sie im Dashboard-Tab Ihrer App nach „Produkte zu Ihrer App hinzufügen“.
  • Wählen Sie „WhatsApp“ für die Einrichtung.
  • Wählen Sie Ihr Meta-Geschäftskonto (Facebook) aus
  • Navigieren Sie in der Seitenleiste zu App-Einstellungen > Allgemein
  • Änderungen speichern.
  • Stellen Sie den App-Modus auf Live ein

Schritt 3: WhatsApp-Token generieren

Um ein dauerhaftes WhatsApp-Zugriffstoken zu erhalten, befolgen Sie 1 bis 3 Schritte:

1. Erstellen Sie einen „Systembenutzer“:

  • Besuchen Sie die Meta Business Suite.
  • Suchen Sie im Dropdown-Menü oben links nach Ihrem Geschäftskonto und klicken Sie auf das Symbol „Einstellungen“ (Zahnrad).
  • Klicken Sie auf Unternehmenseinstellungen.
  • Gehen Sie zu Benutzer > Systembenutzer.
  • Fügen Sie einen Admin-Systembenutzer hinzu.

2. Assets hinzufügen.

  • Klicken Sie nach dem Erstellen des Systembenutzers auf „Assets hinzufügen“.
  • Navigieren Sie zu Apps > „Ihr App-Name“.
  • Wählen Sie Ihre App aus und gewähren Sie die volle Kontrolle, um die App zu verwalten.

3. Generieren Sie Systembenutzerzugriffstoken.

  • Klicken Sie beim Systembenutzer auf die Schaltfläche „Neues Token generieren“.

Wählen Sie die App aus, die das Token verwenden soll, und legen Sie den Ablauf des Tokens auf „Niemals“ fest.

  • Wählen Sie die Berechtigungen „whatsapp_business_messaging“ und „whatsapp_business_management“ aus.
  • Generieren Sie das Token.
  • Kopieren Sie das Zugriffstoken und bewahren Sie es sicher auf.

4. Fügen Sie eine neue Geschäftsnummer für WhatsApp hinzu

  • Sie können Ihre eigene Geschäftsnummer verwenden oder die bereitgestellte Testnummer für Ihren WhatsApp-Chatbot nutzen.
  • Navigieren Sie im WhatsApp-Entwickler-Dashboard in der Seitenleiste zu WhatsApp > API-Setup.
  • Fahren Sie mit „Schritt 5: Telefonnummer hinzufügen“ fort und klicken Sie auf Telefonnummer hinzufügen.
  • Geben Sie die erforderlichen Angaben im folgenden Formular ein.
  • Verifizieren Sie Ihre Nummer anhand des erhaltenen Codes.
  • Wählen Sie nach dem erfolgreichen Hinzufügen Ihre Telefonnummer in Schritt 1 des API-Setups aus.

5. Fügen Sie eine Zahlungsmethode hinzu

  • Um Nachrichten über WhatsApp zu versenden, benötigen Sie eine gültige Zahlungsmethode. Weitere Informationen finden Sie hier.
  • Nachdem Sie Ihre geschäftliche Telefonnummer hinzugefügt haben, klicken Sie auf „Zahlungsmethode hinzufügen“, um die Warnung „Fehlende gültige Zahlungsmethode“ zu beheben.
  • Sie werden zu Ihren WhatsApp-Kontoeinstellungen weitergeleitet. Klicken Sie auf „Zahlungsmethoden“ > „Geschäftszahlungsmethode hinzufügen“ und folgen Sie den Anweisungen, um Ihre Karteninformationen hinzuzufügen.

6. Testen Sie Ihre neue Geschäftsnummer für WhatsApp

  • Kehren Sie zum WhatsApp-Entwickler-Dashboard zurück und navigieren Sie zu API-Setup
  • Geben Sie eine Testnummer „An“ ein.
  • Klicken Sie auf „Nachricht senden“, um die erfolgreiche Zustellung der Nachricht zu überprüfen.

Schritt 4: Konfigurieren Sie die WhatsApp API Webhook-Einstellungen

1. Überprüfen Sie den WhatsApp Webhook-Rückruf.

  • Navigieren Sie im WhatsApp Developer Dashboard zu „Konfiguration“.
  • Klicken Sie unter Webhook auf Bearbeiten
  • Jetzt müssen wir WhatsApp eine Live-Webhook-URL und ein Token bereitstellen. Die Live-URL ist die URL Ihrer Anwendung, und das Token wird ebenfalls von Ihrer Seite generiert. Im Bild unten habe ich meine Ngrok-URL hinzugefügt, da meine Node.js-Anwendung auf Ngrok ausgeführt wird, und ich eine UUID als Token verwendet habe.
  • Im Verifizierungsprozess sendet WhatsApp eine GET-Anfrage an die Rückruf-URL, um das Hub-Token zu validieren. Der folgende Code, geschrieben in Next.js (einem Node.js-Framework), übernimmt diesen Überprüfungsprozess. Die Verifizierung ist nur dann erfolgreich, wenn Ihr Code als Antwort einen Statuscode 200 sendet, wie unten gezeigt.
Asynchrone Funktion exportieren GET(req: NextRequest) {

let hubMode = req.nextUrl.searchParams.get("hub.mode");

let hubChallenge = req.nextUrl.searchParams.get("hub.challenge");

let hubToken = req.nextUrl.searchParams.get("hub.verify_token");

//den Token in der Datenbank finden

Wenn (

hubMode === "subscribe" &&

hubToken === „<Wert aus .env ODER aus der Datenbank>“

) {

console.log("erfolgreich überprüft");

return new Response(hubChallenge);

}

return new Response("Invalid Credentials", { status: 400 });

}

  • Suchen Sie das Feld „Nachrichten“ und abonnieren Sie es, indem Sie das Kontrollkästchen aktivieren.
  • Jetzt benötigen wir den WhatsApp-Zugriffstoken und das Facebook-App-Secret, die wir vom selben WhatsApp-Geschäftskonto erhalten
  • Im Bild unten sehen Sie das Facebook-App-Geheimnis

Außerdem müssen wir die folgenden hervorgehobenen Daten aufbewahren

In unserem Code benötigen wir verschiedene Identifikatoren wie das Zugriffstoken, das App-Geheimnis, die Testnummer, die Telefonnummern-ID und die Geschäftskonto-ID. Mithilfe dieser Kennungen können wir feststellen, von wem wir Nachrichten erhalten und an wen wir Nachrichten senden müssen.

Schritt 5: Senden und Empfangen von Nachrichten über die API

  • Im bereitgestellten TypeScript-Code haben wir die WhatsApp-API zum Senden und Empfangen von Nachrichten erfolgreich integriert. Zusätzlich habe ich für mein Ziel OpenAI und ein individuell trainiertes KI-Modell integriert, um auf eingehende Nachrichten zu reagieren.
  • Die an WhatsApp bereitgestellte Rückruf-URL wird sowohl für GET- als auch für POST-Anfragen verwendet. Wenn eine Nachricht an die Geschäftsnummer gesendet wird, löst WhatsApp diese Rückruf-URL aus und sendet die Nachricht zusammen mit den Benutzerdetails. Der folgende Code liest diese Nachricht und antwortet basierend auf der implementierten Logik.
  • Die POST-Funktion ist eine asynchrone Funktion, die eingehende POST-Anfragen verarbeitet. Es analysiert zunächst die eingehende Anfrage in JSON und extrahiert die vom Benutzer gesendete Nachricht aus WhatsApp. Wenn die Nachricht undefiniert oder leer ist, gibt sie eine Antwort mit dem Status 200 zurück und fährt nicht fort.
  • Anschließend ruft die Funktion die geschäftliche Telefonnummer und die Telefonnummer des Absenders aus der Anfrage ab.
  • Die Funktion bereitet dann eine POST-Anfrage vor, um eine Nachricht über WhatsApp an den Benutzer zurückzusenden. Es erstellt die URL für die Anfrage, definiert die zu sendende Nachricht und legt die Anfrageoptionen fest, einschließlich Methode, Header und Text.
  • Anschließend sendet die Funktion die Anfrage mithilfe der Fetch-Funktion. Wenn die Anfrage erfolgreich ist, wird eine Antwort mit dem Status 200 zurückgegeben. Wenn zu irgendeinem Zeitpunkt ein Fehler auftritt, wird dieser in der Konsole protokolliert.
  • Die Funktion getResponseNumber ist eine Hilfsfunktion, die die Telefonnummer des Absenders aus der eingehenden Anfrage extrahiert.
  • Dieser Code bietet ein grundlegendes Beispiel für die Integration einer Node.js-Anwendung in die WhatsApp Business API und ermöglicht so das automatisierte Senden und Empfangen von Nachrichten.

// WhatsApp löst diese Post-Anfrage aus, sobald der Benutzer eine Frage an den Bot gestellt und dem Benutzer auch eine Antwort gegeben hat

Asynchrone Funktion exportieren POST(req: NextRequest) {

let res: any = waiting req.json();

let questionFromWhatsapp =

res?.entry?.[0]?.changes?.[0]?.value?.messages?.[0]?.text?.body; // Frage von WhatsApp erhalten

Wenn (

questionFromWhatsapp == undefiniert ||

questionFromWhatsapp.trim().length <= 0

) {

//Wenn es bei der Anfrage nur um den Status geht, gehen Sie nicht weiter

// return NextResponse.json({ message: "received" });

return new Response("received", { status: 200 });

}

//Erhalte die Telefonnummer-ID aus der Antwort. Diese Telefonnummer ist eine Geschäftsnummer

const phoneNumberId =

res?.entry?.[0]?.changes?.[0]?.value?.metadata["phone_number_id"];

//Diese Methode gibt die Telefonnummer zurück, von der die Nachricht empfangen wurde

const ResponseNumber = getResponseNumber(res);

// Benutzer-ID aus der Datenbank abrufen

versuchen {

const version = "v18.0";

//Überprüfen Sie, ob das Limit erreicht ist oder nicht

const phoneNumber;

const ReceiverPhoneNumber = „+“ + ResponseNumber;

// const accessToken = process.env.WHATSAPPTOKEN

const accessToken = "Token, den Sie von Facebook erhalten";

versuchen {

//--------------- Dieser Code dient zum Senden einer Nachricht an ein Telegramm

const url = `https://graph.facebook.com/${version}/${phoneNumberId}/messages`;

// Definieren Sie die im Anforderungstext zu sendenden Daten

const data = {

Messaging_Produkt: „WhatsApp“,

Empfängertyp: „Einzelperson“,

an: „${recipientPhoneNumber}“,

Text eingeben",

Text: {

Vorschau_URL: falsch,

body: „Hallo, ich bin ein Chatbot, ich bin gerade beschäftigt, ich melde mich bald bei Ihnen.“,

},

};

// Definieren Sie die Optionen für die Abrufanforderung

const-Optionen = {

Methode: „POST“,

Überschriften: {

„Content-Type“: „application/json“,

Autorisierung: `Bearer ${accessToken}`,

},

Körper: JSON.stringify(data),

};

// Machen Sie die POST-Anfrage mit fetch

versuchen {

const Antwort = Warten auf fetch(url, Optionen);

if (!response.ok) {

throw new Error(`HTTP-Fehler! Status: ${response.status}`);

}

const data = Warten auf Antwort.json();

// Behandeln Sie die Daten nach Bedarf

} Catch (Fehler) {

// Den Fehler nach Bedarf behandeln

console.log(error);

}

return new Response("received", { status: 200 });

} Catch (Fehler) {

console.log("error", error);

}

} Catch (Fehler: beliebig) {

console.log(error);

//Verwalten des Fehlerprotokolls in der Datenbank, falls ein Unhandle-Fehler auftritt

}

}

const getResponseNumber = (res: any) => {

return res?.entry?.[0]?.changes?.[0]?.value?.contacts[0]?.wa_id;

};

Abschluss

In diesem umfassenden Leitfaden haben wir die Feinheiten der Integration der WhatsApp Business API in eine Node.js-Anwendung erläutert. Von der Einrichtung von Webhooks über die Verarbeitung eingehender Nachrichten bis hin zum Senden maßgeschneiderter Antworten haben wir wichtige Schritte wie den Umgang mit Zugriffstokens, App-Geheimnissen, Testnummern, Telefonnummern-IDs und Geschäftskonto-IDs behandelt.

Diese nahtlose Integration ermöglicht es Unternehmen nicht nur, die Kommunikation auf WhatsApp zu automatisieren, sondern eröffnet auch unzählige Möglichkeiten, sei es die Entwicklung von Kundensupport-Bots, die Automatisierung von Marketingaktivitäten oder die Verfolgung persönlicher Projekte. Denken Sie bei Beginn dieser Reise daran, dass dies lediglich eine Grundlage ist. Die WhatsApp Business API bietet eine Fülle zusätzlicher Funktionen, die darauf warten, erkundet und in Ihre Anwendung integriert zu werden.

Wenn Sie Ihre KI-Chatbot-Entwicklungsbemühungen weiter verfeinern, sollten Sie in Betracht ziehen, das Fachwissen eines zu nutzen KI-Chatbot-Entwicklungsunternehmen . Ihre Erkenntnisse und ihre Unterstützung können Ihren Fortschritt vorantreiben und sicherstellen, dass Ihre Chatbot-Bemühungen ihr volles Potenzial entfalten. Umfassende und genaue Informationen finden Sie im Verlauf Ihrer Entwicklungsreise immer in der offiziellen WhatsApp Business API-Dokumentation .