返回開發人員最新消息

在 WhatsApp 中使用 QR 碼和短連結

2022年12月12日發佈者：Rashed Talukder
訂閱開發人員最新消息

QR 碼是將資訊密集型項目內嵌在小型圖像中的一種簡便方法。我們經常看到 QR 碼用於各種不同目的，包括為海報觀看者提供更多資訊，以及在餐廳為用餐者提供菜單等等。

基本上，QR 碼和短連結（複雜連結縮短、較方便讀取的版本）是直接與顧客建立聯繫的簡單存取方式。WhatsApp 使用 QR 碼和短連結來幫助您更有效率地與顧客建立聯繫。這些功能併用能夠讓顧客不需要輸入電話號碼，即可開始與您對話，或是快速存取產品資訊、促銷活動等等。

本文將示範如何從 WhatsApp Business 平台使用 Meta 託管的雲端 API 來產生及運用 QR 碼和短連結。我們會探討如何建立、更新、取得及刪除新的 QR 碼和短連結，並示範如何在 WhatsApp 訊息中傳送 QR 碼和短連結。您可以隨時到這裡查看完整程式碼。

必要條件

若要使用本教學導覽的方法，您必須具備下列條件：

  1. 您的 Meta 開發人員帳號中必須要有 WhatsApp 應用程式（依據開始使用指南），並且能夠傳送測試訊息（不需要設定 Webhooks）。

  2. 具有必要權限的系統用戶存取權杖（whatsapp_business_management、whatsapp_business_messaging 和 business_management）

  3. Node.js 和 Express.js 的基礎知識

此外，本教學導覽會使用多個 Node.js 資料庫（包括 dotenv）來儲存必要的配置，以便使用雲端 API 來發出 HTTP 要求。您也會使用 Postman 來測試此應用程式的端點。最後，您會需要此模板程式碼做為使用本文的基礎。

設定環境

在專案的根目錄中建立 .env 檔案並開啟，然後使用必要條件步驟 1 和 2 中的值填入所有遺漏的變數。

# 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

現在您已經加入環境變數，接下來請使用捷徑指令碼 npm init 來啟動應用程式，這會建立骨架應用程式。

建立新的 QR 碼和短連結

首先，您要使用 Business Management API（WhatsApp Business 平台的一部分）建立新的 QR 碼和短連結。

依據說明文件的指示，先使用下列三個查詢參數，發送 POST 要求至 /{phone-number-ID}/message_qrdls 端點： prefilled_message、generate_qr_image， 以及您的 access_token。

在這裡，您可以將所掃描的 QR 碼和短連結儲存至 prefilled_message。這樣可以讓用戶傳送預先編寫好的訊息給您，這對於顧客服務、電子商務、請顧客選擇接收行銷訊息等很有用。

然後， generate_qr_image 可讓您支援兩種用於所產生之 QR 碼圖像的格式：.svg 或 .png。您可以使用以下方法來選擇偏好的格式。此範例使用 .png。

使用模板導覽至 controllers/qrCode.js ，並使用以下程式碼來更新 createQRCode 方法：

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));
      }
    }
  );
};

接著，您需要從要求內文傳遞兩個變數：訊息（稍後將用作 prefilled_message）和您的圖像格式。然後，使用 Postman 進行測試。

要求內文如下所示： 

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

當您點擊右上角的「Send」（傳送）按鈕時，API 將傳回如下方螢幕截圖所示的回應。回應中包含 deep_link_url（做為短連結）和 qr_image_url（做為 QR 碼圖像）。另外也包含 id 和 prefilled_message。

傳送附有 QR 碼和短連結的 WhatsApp 訊息

接下來，您可以將新產生的 QR 碼和短連結傳送給顧客。您需要使用雲端 API 來執行此作業。您可以依循該說明文件中的範例做為參考點。雲端 API 可讓您以文字訊息的形式傳送短連結，以及以多媒體訊息的形式傳送圖像網址。

文字訊息

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"
  }
}'

多媒體訊息

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"
  }
}'

您將建立一個接受類似要求物件並執行 HTTP 要求的方法，此方法會呼叫 /phone_number_id/messages 端點並傳送訊息。在 controllers/qrCode.js 中，使用以下程式碼來建立 sendMessage 方法。Shell 方法已經在模板中了。

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));
      }
    }
  );
};

接著，您要使用新產生的 QR 碼來傳送訊息。請複製 qr_image_url 並將其以圖像連結的形式加入要求內文。

以下是 Postman 要求物件的樣子。在這裡，PHONE_NUMBER_TO_SEND 可以是任何可撥打的格式。 

{
    "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"
    }
}

如果您收到類似下圖的回應，則表示訊息傳送成功。

下圖顯示收件者所看到的訊息：

現在，當用戶使用智慧型手機或任何其他裝置掃描此 QR 碼時，用戶不需要輸入，訊息就會預先填入內容，並發起新的對話。

擷取現有的 QR 碼和短連結清單

取得現有的 QR 碼和短連結清單很簡單，只需要發出 GET 要求至 /{phone-number-ID}/message_qrdls 端點即可。它會傳回一個物件陣列，其中個別物件會包含 code(id)、prefilled_message 和 deep_link_url。

在 controllers/qrCode.js 檔案中，使用以下程式碼來更新方法：

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));
      }
    }
  );
};

加入程式碼後，使用 Postman 來測試 API。下圖顯示要求在 Postman 中的樣子：

成功的回應會提供 QR 碼和短連結的陣列。

更新 QR 碼訊息

更新 QR 碼訊息非常有幫助，因為這樣可以更新訊息，而不會變更 QR 碼圖像。因此，您不需要重新列印或轉貼新的 QR 碼。在 QR 碼中儲存聯絡資料和促銷細節等資訊時，此功能特別有用。

若要更新 QR 碼訊息，您需要知道所建立之 QR 碼的 code(id)，您可以將其以查詢參數的形式傳遞至 /{BUSINESS_ACCOUNT_ID}/message_qrdls/{qr-code-id} 端點即可。

在 controllers/qrCode.js 檔案中，使用以下程式碼來更新 updateQRCode 方法：

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));
      }
    }
  );
};

在 Postman 中進行此測試時，您會看到以下要求物件： 

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

成功的要求會傳回已更新的程式碼。

刪除 QR 碼

由於 QR 碼不會過期，因此當 QR 碼中的資訊過時或失效時，您可能會想要將其刪除。

首先，您需要傳送 DELETE 要求至 /{BUSINESS_ACCOUNT_ID}/message_qrdls/{qr-code-id} 端點即可。

導覽至 controllers/qrCode.js ，並使用以下程式碼從 shell 方法更新 deleteQRCode 方法： 

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));
      }
    }
  );
};

在這裡，您要以查詢參數的形式來傳遞所要淘汰之 QR 碼的程式碼編號。成功的回應會輸出 success 設為 true 的 JSON 物件。

值得注意的是，一旦 QR 碼刪除後，您就不能在用戶未輸入的情況下，使用該 QR 碼來發起對話和輸入訊息。

結論

在本教學導覽中，您已瞭解如何透過 WhatsApp Business 平台，使用 Meta 託管的雲端 API 來建立、更新、擷取及刪除 QR 碼和短連結，並簡短查看了幾個使用案例。

WhatsApp QR 碼很容易管理，並可透過多種有意義的方式，協助您大幅增加與顧客的互動。有了 WhatsApp 的 QR 碼和短連結功能，您可以比以往更輕鬆地與用戶群保持聯繫。


標籤：
商業工具開發人員工具平台2022 年WhatsApp
相關最新消息

How to Visualize WhatsApp Account Metrics in Your App

商業工具開發人員工具平台2022 年WhatsApp
2022年12月19日

Send Interactive Messages on the WhatsApp Business Platform

商業工具開發人員工具平台2022 年WhatsApp
2022年11月21日

Integrating WhatsApp Into Your E-commerce Flow

商業工具開發人員工具平台2022 年WhatsApp
2022年11月14日
更多消息