開発者向けニュースに戻る

WhatsAppでのQRコードと招待リンクの使用

2022年12月12日作成者:Rashed Talukder
開発者ニュースをフォローする

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ライブラリを使用します。例えば、クラウドAPIでHTTPリクエストを行うために必要な設定を保管するdotenvなどです。このアプリのエンドポイントをテストするために、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コードと招待リンクを作成する

まず、WhatsApp Businessプラットフォームの一部であるビジネス管理APIを使って、新規QRコードと招待リンクを作成します。

ドキュメントに従って、POSTリクエストを/{phone-number-ID}/message_qrdls エンドポイントに送信します。その際、 prefilled_message、generate_qr_image 、 access_tokenという3つのパラメーターを指定します。

ここで、スキャンされたQRコードと招待リンクが prefilled_messageに保管されるようにします。こうすると、ユーザーは事前に作成されたメッセージをビジネスに送信でき、カスタマーケア、eコマース、マーケティングメッセージのオプトインの取得などに役立ちます。

さらに、 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));
      }
    }
  );
};

そして、リクエスト本文から2つの変数を渡します。1つはメッセージ(後で prefilled_messageとして使用します)で、もう1つは画像フォーマットです。それを、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を使って、招待リンクをSMSとして、画像URLをメディアメッセージとして送信できます。

SMS

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メソッドが作成されます。骨組みとなるメソッドはすでにボイラープレートコードに含まれています。

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

コードを追加したら、APIをPostmanでテストします。リクエストはPostmanで次のように表示されます。

成功した場合の応答は、QRコードと招待リンクの配列を返します。

QRコードメッセージを更新する

QRコードの更新は、QRコード画像を変更することなくメッセージを更新できるため、とても便利です。新しいQRコードを印刷し直したり再シェアしたりする必要がありません。この機能は、連絡先やプロモーションの詳細をQRコードに埋め込む場合に特に便利です。

QRコードメッセージを更新するには、作成したQRコードのコード(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コード内の情報が古くなった場合や有効でなくなった場合に、QRコードを削除できます。

まず、DELETEリクエストを /{BUSINESS_ACCOUNT_ID}/message_qrdls/{qr-code-id} エンドポイントに送信します。

controllers/qrCode.js に移動し、骨組みメソッドの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コードのコードIDをクエリパラメーターとして渡します。成功した場合の応答は、successがtrueになったJSONオブジェクトを出力します。

QRコードを削除すると、そのコードを使用してスレッドを開始したり、ユーザーが入力を行わずにメッセージを入力したりすることはできなくなります。

まとめ

このハンズオンチュートリアルでは、MetaがホストするクラウドAPIを使用して、WhatsApp BusinessプラットフォームでQRコードと招待リンクを作成、更新、取得、削除する方法について説明し、いくつかのユースケースも簡単に紹介しました。

WhatsApp QRコードは管理しやすく、さまざまな方法でカスタマーとのエンゲージメントを高める上で役立ちます。WhatsAppのQRコードと招待リンクの機能を使うと、これまで以上に簡単にユーザーベースとのつながりを保つことができます。


タグ:
ビジネスツール開発者ツールプラットフォーム2022WhatsApp
関連ニュース

How to Visualize WhatsApp Account Metrics in Your App

ビジネスツール開発者ツールプラットフォーム2022WhatsApp
2022年12月19日

Send Interactive Messages on the WhatsApp Business Platform

ビジネスツール開発者ツールプラットフォーム2022WhatsApp
2022年11月21日

Integrating WhatsApp Into Your E-commerce Flow

ビジネスツール開発者ツールプラットフォーム2022WhatsApp
2022年11月14日
その他のニュース