返回開發人員最新消息

在 WhatsApp 中使用 QR 碼和短連結

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

QR 碼是將擁有密集資訊的項目嵌入小圖片的簡單方法。我們經常看到 QR 碼用於各種用途，例如作為海報來為觀眾提供更多資訊、為餐廳食客提供餐單等。

從根本上講，QR 碼和短連結是複雜連結的縮短版和更易讀的版本，是直接與顧客建立聯繫的輕鬆方式。WhatsApp 使用 QR 碼和短連結來協助您更好地與顧客聯繫。結合使用這些功能，可讓顧客無需輸入手機號碼即可發起對話，或者快速存取產品資訊、推廣活動等資訊。

本文會介紹如何使用由 Meta 託管的雲端 API，透過 WhatsApp Business 平台產生及運用 QR 碼和短連結。我們會查看如何建立、更新、獲取及刪除新 QR 碼和短連結，並展示如何在 WhatsApp 訊息中傳送這些代碼和連結。您可隨時在此查看完整程式碼。

必要條件

如要按照本教學導覽操作，您將需要：

  1. 遵循新手入門指南使用 Meta 開發人員帳戶中的 WhatsApp 應用程式，而且能夠傳送測試訊息（無需設定 Webhook）

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

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

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

設定環境

在專案的根目錄下建立並開啟 .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 碼和短連結

首先，您會使用 WhatsApp Business 管理 API（屬於 WhatsApp Business 平台一部分）建立新的 QR 碼和短連結。

按照文件指示，首先向 /{phone-number-ID}/message_qrdls 端點傳送 POST 要求和以下三個查詢參數： 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"
}

當您點擊右上方的「傳送」按鈕時，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 碼和短連結清單的方法簡單直接，只需向 /{phone-number-ID}/message_qrdls 端點傳送 GET 要求即可。這會傳回一組物件，其中個別物件包括 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 碼的代碼（編號），這個編號可作為查詢參數傳遞給 /{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 碼之代碼編號作為查詢參數傳遞。成功的回應會輸出一個 JSON 物件，其中 success 設定為 true。

請注意，一旦 QR 碼被刪除，您便無法再用它來發起對話，以及無法在沒有用戶輸入的情況下輸入訊息。

結論

在本教學導覽中，我們為您介紹了如何使用由 Meta 託管的雲端 API，透過 WhatsApp Business 平台建立、更新、擷取及刪除 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日
更多消息