Zurück zu den Neuigkeiten für Entwickler

QR-Codes und Kurzlinks in WhatsApp verwenden

12. Dezember 2022VonRashed Talukder

QR-Codes sind eine tolle Möglichkeit, Elemente mit hoher Informationsdichte in einem kleinen Bild einzubetten. Sie werden häufig für die verschiedensten Zwecke verwendet, z. B. um Betrachter*innen eines Posters mehr Informationen zu liefern oder um Gäste in einem Restaurant zur Speisekarte weiterzuleiten.

Grundlegend ist zu sagen, dass QR-Codes und Kurzlinks – eine kürzere und besser lesbare Version eines komplexen Links – eine direkte und zugängliche Möglichkeit bieten, mit deinen Kund*innen in Kontakt zu treten. WhatsApp verwendet QR-Codes und Kurzlinks, die dich dabei unterstützen, eine bessere Verbindung zu deinen Kund*innen herzustellen. Gemeinsam ermöglichen sie es deinen Kund*innen, eine Unterhaltung zu beginnen, ohne dass sie eine Telefonnummer eingeben müssen, oder schnell Zugriff auf Produktinformationen, Werbeaktionen und mehr zu erhalten.

In diesem Artikel wird erklärt, wie du QR-Codes und Kurzlinks über die WhatsApp Business Platform mithilfe der Cloud API, die von Meta gehostet wird, erstellst und verwendest. Du erfährst, wie du einen neuen QR-Code oder Kurzlink erstellst, aktualisierst, abrufst und löschst und wie du sie in einer WhatsApp-Nachricht versendest. Du kannst dir den vollständigen Code hier jederzeit ansehen.

Voraussetzungen

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

Eine WhatsApp-App in deinem Meta-Entwicklerkonto, wie im Guide Erste Schritte beschrieben, sowie die Fähigkeit zum Senden einer Testnachricht (Webhook-Einrichtung ist nicht erforderlich)
Einen Systemnutzer-Zugriffsschlüssel mit den erforderlichen Berechtigungen (whatsapp_business_management, whatsapp_business_messaging und business_management)
Grundlegende Kenntnisse von Node.js und Express.js

In diesem Tutorial wirst du außerdem verschiedene Node.js-Bibliotheken verwenden, um die zum Durchführen von HTTP-Anfragen in der Cloud API erforderliche Konfiguration zu speichern, darunter dotenv. Zudem verwendest du Postman, um die Endpunkte dieser Anwendung zu testen. Zu guter Letzt benötigst du diesen Boilerplate-Code als Grundlage für diesen Artikel.

Die Umgebung einrichten

Erstelle und öffne eine .env -Datei im Stamm des Projekts und fülle alle fehlenden Variablen mit den Werten aus den Schritten 1 und 2 unter „Voraussetzungen“ aus.

# Your WhatsApp Business app Id
APP_ID=

# Your WhatsApp Business app secret
APP_SECRET=

# Recipient phone number without "+" symbol
RECIPIENT_PHONE_NUMBER=

# Your WhatsApp phone number Id
PHONE_NUMBER_ID=

# Business Account Id
BUSINESS_ACCOUNT_ID=

# System User Access Token. Not temporary access token
ACCESS_TOKEN=

# Cloud API version number
VERSION=v15.0

# Override the default app listener port.
LISTENER_PORT=3000

Nachdem du die Umgebungsvariablen hinzugefügt hast, starte die Anwendung, indem du das Shortcut-Skript npm init verwendest, wodurch ein Anwendungsgerüst erstellt wird.

Einen neuen QR-Code und Kurzlink erstellen

Du beginnst damit, einen neuen QR-Code und Kurzlink zu erstellen, indem du die Business Management API verwendest, die Teil der WhatsApp Business Platform ist.

Beginne entsprechend der Dokumentation, indem du eine POST-Anfrage an den /{phone-number-ID}/message_qrdls -Endpunkt sendest, die drei Abfrageparameter enthält: prefilled_message, generate_qr_image, und dein access_token.

In diesem Fall sollen der gescannte QR-Code und Kurzlink unter prefilled_messagegespeichert werden. So können dir Benutzer*innen vorverfasste Nachrichten schicken, was in Bezug auf Kundendienst, E-Commerce, das Erhalten einer Zustimmung zu Marketing-Nachrichten und vieles mehr hilfreich sein kann.

Im Anschluss kannst du durch generate_qr_image zwei Formate des erstellten QR-Codes unterstützen: .svg oder .png. Wähle dein bevorzugtes Format anhand der folgenden Methode aus. In diesem Beispiel wird .png verwendet.

Navigiere mithilfe des Boilerplate zu controllers/qrCode.js und aktualisiere die createQRCode-Methode mit dem folgenden Code:

const qrdlObject =
  {
    "prefilled_message" : message,
    "generate_qr_image" : type
  }

  const config =
  {
    "method" : "post",
    "url" : `https://graph.facebook.com/${process.env.VERSION}/${process.env.BUSINESS_ACCOUNT_ID}/message_qrdls`,
    "headers" : {
      Authorization: `Bearer ${process.env.ACCESS_TOKEN}`,
      'Content-Type': 'application/json'
    },
    "data" : qrdlObject,
  };

  try
  {
    await axios( config );
  }
  catch( error )
  {
    console.log( "")
  }

    },
    function (err, resp, body) {
      if (err) {
        console.log("Error!");
      } else {
        res.json(JSON.parse(body));
      }
    }
  );
};

Danach übergibst du zwei Variablen aus dem Anfragetext: eine Nachricht (die später als prefilled_messageverwendet wird) und dein Bildformat. Führe anschließend einen Test über Postman durch.

So sieht der Anfragetext aus:

{
    "message":"Creating the example QR Code and Short Link",
    "type":"png"
}

Wenn du auf den Button „Senden“ oben rechts klickst, gibt die API die Antwort zurück, die im nachfolgenden Screenshot gezeigt ist. Die Antwort enthält die deep_link_url, die wie ein Kurzlink fungiert und die qr_image_url, die sich wie ein Bild eines QR-Codes verhält. Sie enthält außerdem die id und die prefilled_message.

Eine WhatsApp-Nachricht mit einem QR-Code und Kurzlink senden

Jetzt kannst du deinen neu erstellen QR-Code und Kurzlink an Kund*innen senden. Hierzu verwendest du die Cloud API. Du kannst die Beispiele in dieser Dokumentation als Referenz verwenden. Über die API kannst du einen Kurzlink als Textnachricht und eine Bild-URL als Mediennachricht senden.

Textnachrichten

curl -X  POST \
 'https://graph.facebook.com/v15.0/BUSINESS_ACCOUNT_ID/messages' \
 -H 'Authorization: Bearer ACCESS_TOKEN' \
 -d '{
  "messaging_product": "whatsapp",
  "recipient_type": "individual",
  "to": "RECIPIENT_PHONE_NUMBER",
  "type": "text",
  "text": { // the text object
    "preview_url": false,
  "body": "MESSAGE_CONTENT"
  }
}'

Mediennachrichten

curl -X  POST \
 'https://graph.facebook.com/v15.0/BUSINESS_ACCOUNT_ID/messages' \
 -H 'Authorization: Bearer ACCESS_TOKEN' \
 -d '{
  "messaging_product": "whatsapp",
  "recipient_type": "individual",
  "to": "RECIPIENT_PHONE_NUMBER",
  "type": "image",
  "image": {
  "id" : "MEDIA_OBJECT_ID"
  }
}'

Du erstellst eine Methode, die ein ähnliches Anfrageobjekt annimmt und die HTTP-Anfrage ausführt, die den /phone_number_id/messages -Endpunkt aufruft und eine Nachricht sendet. In controllers/qrCode.jserstellst du eine sendMessage-Methode mit dem folgenden Code. Die Shell-Methode ist bereits im Boilerplate enthalten.

exports.sendMessage = async (req, res) => {
  const { to, type } = req.body;
  if (!to || !type) {
    return res.status(400).json({
      error: "Required Fields: to and type",
    });
  }
  request.post(
    {
      url: `https://graph.facebook.com/${process.env.VERSION}/${process.env.BUSINESS_ACCOUNT_ID}/messages`,
      headers: {
        Authorization: `Bearer ${process.env.ACCESS_TOKEN}`,
        "content-type": "application/json",
      },
      body: JSON.stringify(req.body),
    },
    function (err, resp, body) {
      if (err) {
        console.log("Error!");
      } else {
        res.json(JSON.parse(body));
      }
    }
  );
};

Anschließend sendest du eine Nachricht mit dem neu erstellten QR-Code. Kopiere die qr_image_url und füge sie als Bild-Link zum Anfragetext hinzu.

Nachfolgend siehst du, wie das Postman-Anfrageobjekt aussieht. Hier kann PHONE_NUMBER_TO_SEND jedes wählbare Format aufweisen.

{
    "messaging_product": "whatsapp",
    "recipient_type": "individual",
    "to": "RECIPIENT_PHONE_NUMBER",
    "type": "image",
    "image": {
        "link": "https://scontent.fybz2-1.fna.fbcdn.net/m1/v/t6/An95lHumHOGcQ_Fl8cDwVrARmc9T9tmtMLyeTOeSFny-OoLLAqSFHEd8gQzAYVsVS6jNm9IBVU27fcb1H05ERwyb5i87Jtp4fjsNppvFnTu26k7ss_dN8S1ZtkSl6XRZtwB68GUabG8?ccb=10-5&oh=00_AT-LCjyu6J8kkeoW1Qj2rxMZikjrHw0fvwA2C6cn9DYkEA&oe=62C8EC07&_nc_sid=f36290"
    }
}

Wenn deine Antwort ähnlich wie in dem nachfolgenden Bild aussieht, wurde die Nachricht erfolgreich gesendet.

Das Bild unten zeigt die Nachricht aus Sicht des*der Empfänger*in:

Wenn dieser Code mit einem Smartphone oder einem anderen Gerät gescannt wird, wird die Nachricht automatisch ausgefüllt, ohne dass der*die Benutzer*in eine Eingabe machen muss, und eine neue Unterhaltung wird begonnen.

Eine Liste vorhandener QR-Codes und Kurzlinks abrufen

Das Abrufen einer Liste vorhandener QR-Codes und Kurzlinks ist einfach, denn du musst lediglich eine GET-Anfrage an den /{phone-number-ID}/message_qrdls -Endpunkt durchführen. Sie gibt einen Array von Objekten zurück, wobei die einzelnen Objekte code(id), prefilled_message und deep_link_url enthalten.

Aktualisiere in der Datei controllers/qrCode.js die Methode mit dem nachfolgenden Code:

exports.fetchQRCodes = async (req, res) => {
  request.get(
    {
      url: `https://graph.facebook.com/${process.env.VERSION}/${process.env.BUSINESS_ACCOUNT_ID}/message_qrdls`,
      headers: {
        Authorization: `Bearer ${process.env.ACCESS_TOKEN}`
      }
    },
    function (err, resp, body) {
      if (err) {
        console.log("Error!");
      } else {
        res.json(JSON.parse(body));
      }
    }
  );
};

Teste nach dem Hinzufügen des Codes die API mit Postman. Das nachfolgende Bild zeigt, wie die Anfrage in Postman aussieht:

Eine erfolgreiche Antwort liefert ein Array von QR-Codes und Kurzlinks.

QR-Code-Nachrichten aktualisieren

Das Aktualisieren eines QR-Codes ist sehr nützlich, da die Nachricht aktualisiert wird, ohne dass das QR-Code-Bild geändert wird. So musst du deine QR-Codes nicht neu drucken oder erneut teilen. Diese Funktion ist besonders nützlich, wenn du Informationen wie Kontakt- oder Werbeaktionsdetails in QR-Codes speicherst.

Um die QR-Code Nachricht zu aktualisieren, musst du die code(id) des erstellten QR-Codes kennen, die du als Abfrageparameter an den /{BUSINESS_ACCOUNT_ID}/message_qrdls/{qr-code-id} -Endpunkt übergeben kannst.

Aktualisiere in der Datei controllers/qrCode.js die Methode updateQRCode mit dem folgenden Code:

exports.updateQRCode = async (req, res) => {
  const { message, qr-code-id } = req.body;
  if (!message || !qr-code-id) {
    return res.status(400).json({
      error: "Required Fields: message and id",
    });
  }
  request.post(
    {
      url: `https://graph.facebook.com/v14.0/${process.env.META_PHONE_ID}/message_qrdls/${qr-code-id}?prefilled_message=${message}`,
      headers: {
        Authorization: `Bearer ${process.env.ACCESS_TOKEN}`,
        "content-type": "application/json",
      }
    },
    function (err, resp, body) {
      if (err) {
        console.log("Error!");
      } else {
        res.json(JSON.parse(body));
      }
    }
  );
};

Wenn du sie in Postman testest, siehst du dieses Anfrageobjekt:

{
    "message":"This is my first Updated QR code",
    "id":"4WW67TGNCGPXB1"
}

Die erfolgreiche Antwort sendet den aktualisierten Code zurück.

QR-Codes löschen

Da QR-Codes nicht ablaufen, möchtest du sie möglicherweise löschen, wenn die darin enthaltenen Informationen veraltet oder nicht mehr gültig sind.

Zuerst musst du eine DELETE-Anfrage an den /{BUSINESS_ACCOUNT_ID}/message_qrdls/{qr-code-id} -Endpunkt senden.

Navigiere zu controllers/qrCode.js und aktualisiere die deleteQRCode-Methode in der Shell-Methode, indem du den folgenden Code verwendest:

exports.deleteQRCode = async (req, res) => {
  const { qr_code_id } = req.query;
  request.delete(
    {
      url: `https://graph.facebook.com/${process.env.VERSION}/${process.env.BUSINESS_ACCOUNT_ID}/message_qrdls/${qr_code_id}`,
      headers: {
        Authorization: `Bearer ${process.env.ACCESS_TOKEN}`
      }


    },
    function (err, resp, body) {
      if (err) {
        console.log("Error!");
      } else {
        res.json(JSON.parse(body));
      }
    }
  );
};

Hier übergibst du die Code-ID des QR-Codes, den du einstellen möchtest, als Abfrageparameter. Die erfolgreiche Antwort gibt ein JSON-Objekt aus, bei dem „success“ auf „true“ festgelegt ist.

Beachte dabei, dass der QR-Code, sobald er gelöscht wurde, nicht mehr verwendet werden kann, um eine Unterhaltung zu beginnen und eine Nachricht ohne die Eingabe eines*einer Benutzer*in zu senden.

Fazit

In diesem praktischen Tutorial hast du gelernt, wie du QR-Codes und Kurzlinks über die WhatsApp Business Platform mithilfe der Cloud API, die von Meta gehostet wird, erstellst, aktualisierst, abrufst und löschst. Zudem hast du einen kurzen Einblick in verschiedene Anwendungsfälle erhalten.

QR-Codes in WhatsApp lassen sich einfach verwalten und können signifikant dazu beitragen, die Interaktion mit deinen Kund*innen auf viele bedeutsame Möglichkeiten zu steigern. Mit den Funktionen für QR-Codes und Kurzlinks von WhatsApp bleibst du einfacher als je zuvor mit deinen Nutzer*innen in Verbindung.

Tags:

Business-Tools Entwicklungstools Plattformen 2022 WhatsApp

ÄHNLICHE MELDUNGEN