Menggunakan Kode QR dan Tautan Pendek di WhatsApp

12 Desember 2022OlehRashed Talukder

Kode QR adalah cara mudah untuk menyematkan item padat informasi ke dalam gambar kecil. Kita sering melihat kode QR digunakan untuk berbagai tujuan, dari memberikan lebih banyak informasi kepada pemirsa poster hingga menyediakan menu di restoran kepada pengunjung.

Pada tingkat dasar, kode QR dan tautan pendek—versi tautan kompleks yang lebih pendek dan lebih mudah dibaca—adalah cara yang langsung dan mudah untuk terhubung dengan pelanggan Anda. WhatsApp menggunakan kode QR dan tautan pendek untuk membantu Anda terhubung dengan pelanggan dengan lebih baik. Bersama-sama ini memungkinkan pelanggan Anda untuk memulai percakapan dengan Anda tanpa harus memasukkan nomor telepon atau mengakses informasi produk, promosi, dan lainnya dengan cepat.

Artikel ini akan menunjukkan cara membuat dan menggunakan kode QR dan tautan pendek dari Platform WhatsApp Business menggunakan Cloud API, yang di-hosting oleh Meta. Kami akan meninjau membuat, memperbarui, mendapatkan, dan menghapus kode QR dan tautan pendek baru serta menunjukkan cara mengirimkannya dalam pesan WhatsApp. Anda dapat melihat kode lengkap di sini, kapan saja.

Prasyarat

Untuk mengikuti tutorial ini, Anda akan memerlukan hal berikut:

Aplikasi WhatsApp di akun Developer Meta Anda seperti panduan Memulai dan dapat mengirimkan pesan uji (pengaturan Webhooks tidak diwajibkan).
Token akses pengguna sistem dengan izin wajib (whatsapp_business_management, whatsapp_business_messaging, dan business_management)
Pengetahuan dasar tentang Node.js dan Express.js

Selain itu, tutorial ini akan menggunakan beberapa pustaka Node.js—termasuk dotenv untuk menyimpan konfigurasi yang diperlukan guna membuat permintaan HTTP dengan Cloud API. Anda juga bisa menggunakan Postman untuk menguji endpoint aplikasi ini. Akhirnya, Anda akan memerlukan kode boilerplate ini sebagai fondasi untuk artikel ini.

Menyiapkan Lingkungan

Buat dan buka file .env di root proyek ini dan isilah semua variabel yang tidak ada dengan nilai dari prasyarat di Langkah 1 dan 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

Sekarang setelah Anda menambahkan variabel lingkungan, jalankan aplikasi menggunakan skrip pintasan npm init, yang akan membuat aplikasi kerangka.

Membuat Kode QR dan Tautan Pendek Baru

Anda akan mulai dengan membuat kode QR dan tautan pendek baru menggunakan API Pengelolaan Bisnis—bagian dari Platform WhatsApp Business.

Per dokumentasi ini, mulai dengan mengirim permintaan POST ke endpoint /{phone-number-ID}/message_qrdls dengan tiga parameter kueri: prefilled_message, generate_qr_image, dan access_tokenAnda.

Di sini, Anda ingin pindaian kode QR dan tautan pendek agar disimpan di prefilled_message. Ini akan memungkinkan pengguna untuk mengirimi Anda pesan yang telah ditulis sebelumnya, yang dapat berguna untuk layanan pelanggan, ecommerce, mendapatkan persetujuan ikut serta pesan marketing, dan banyak lagi.

Kemudian, generate_qr_image memungkinkan Anda mendukung dua format untuk gambar kode QR yang dibuat: .svg atau .png. Anda dapat memilih format pilihan Anda menggunakan metode berikut. Contoh ini menggunakan .png.

Dengan boilerplate, buka controllers/qrCode.js dan perbarui metode createQRCode dengan kode berikut:

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

Kemudian, Anda perlu meneruskan dua variabel dari badan permintaan: pesan (yang nantinya akan digunakan sebagai prefilled_message) dan format gambar Anda. Lalu, uji menggunakan Postman.

Badan permintaan akan terlihat seperti ini:

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

Saat Anda menekan tombol Kirim di pojok kanan atas, API akan memberikan tanggapan seperti cuplikan layar di bawah ini. Tanggapan mencakup deep_link_url, yang bertindak sebagai tautan pendek, dan qr_image_url, yang bertindak sebagai gambar kode QR. Tanggapan juga berisi id dan prefilled_message.

Mengirim Pesan WhatsApp dengan Kode QR dan Tautan Pendek

Berikutnya, Anda akan dapat mengirim kode QR dan tautan pendek yang baru dibuat ke pelanggan. Untuk melakukannya, Anda perlu menggunakan Cloud API. Anda dapat mengikuti contoh dalam dokumentasi tersebut sebagai titik referensi. Dengan API, Anda dapat mengirim tautan pendek sebagai pesan teks dan URL gambar sebagai pesan media.

Pesan Teks

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

Pesan Media

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

Anda akan membuat metode yang menerima objek permintaan serupa dan melakukan permintaan HTTP, yang akan memanggil endpoint /phone_number_id/messages dan mengirimkan pesan. Di controllers/qrCode.js, buat metode sendMessage dengan kode berikut. Metode shell akan sudah ada di boilerplate.

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

Berikutnya, Anda akan mengirim pesan dengan kode QR yang baru dibuat. Salin qr_image_url dan tambahkan sebagai tautan gambar ke badan permintaan.

Objek permintaan Postman akan terlihat seperti berikut ini. Di sini, PHONE_NUMBER_TO_SEND dapat berupa format apa pun yang dapat ditelepon.

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

Jika Anda mendapatkan tanggapan serupa dengan gambar di bawah ini, pesan berhasil terkirim.

Gambar di bawah ini menunjukkan tampilan penerima pesan:

Sekarang, ketika seseorang memindai kode QR ini menggunakan smartphone atau perangkat lain, pesan akan terisi tanpa input pengguna dan memulai percakapan baru.

Mengambil Daftar Kode QR dan Tautan Pendek yang Ada

Mendapatkan daftar kode QR dan tautan pendek yang ada sangatlah mudah, karena Anda hanya perlu mengajukan permintaan GET ke endpoint /{phone-number-ID}/message_qrdls . Ini akan memberikan array objek, dengan objek individu termasuk code(id), prefilled_message, dan deep_link_url.

Di file controllers/qrCode.js , perbarui metode dengan kode berikut:

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

Setelah menambahkan kode, uji API dengan Postman. Gambar di bawah menunjukkan tampilan permintaan di Postman:

Tanggapan jika berhasil akan memberikan array kode QR dan tautan pendek.

Memperbarui Pesan Kode QR

Memperbarui kode QR sangatlah membantu, karena akan memperbarui pesan tanpa mengubah gambar kode QR. Jadi, Anda tidak perlu mencetak ulang atau membagikan ulang kode QR baru. Fitur ini sangat berguna saat menyimpan informasi seperti kontak dan detail promosi dalam kode QR.

Untuk memperbarui pesan Kode QR, Anda perlu mengetahui kode (id) dari kode QR yang dibuat, yang dapat Anda berikan sebagai parameter kueri ke endpoint /{BUSINESS_ACCOUNT_ID}/message_qrdls/{qr-code-id} .

Di file controllers/qrCode.js , perbarui metode updateQRCode dengan kode berikut:

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

Saat menguji ini di Postman, Anda akan melihat objek permintaan ini:

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

Permintaan jika berhasil akan mengirim kembali kode yang diperbarui.

Menghapus Kode QR

Karena kode QR tidak kedaluwarsa, Anda mungkin ingin menghapusnya jika informasi dalam kode QR tersebut sudah lama atau tidak berlaku lagi.

Pertama-tama, Anda perlu mengirim permintaan DELETE ke endpoint /{BUSINESS_ACCOUNT_ID}/message_qrdls/{qr-code-id} .

Buka controllers/qrCode.js dan perbarui metode deleteQRCode dari metode shell menggunakan kode berikut:

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

Di sini, Anda meneruskan id kode dari kode QR yang ingin Anda hapus sebagai parameter kueri. Output tanggapan jika berhasil adalah objek JSON dengan success diatur ke true.

Perlu dicatat bahwa setelah kode QR dihapus, Anda tidak dapat lagi menggunakannya untuk memulai percakapan dan mengetik pesan tanpa input dari pengguna.

Kesimpulan

Dalam tutorial praktis ini, Anda mempelajari cara membuat, memperbarui, mengambil, dan menghapus kode QR dan tautan pendek dengan Platform WhatsApp Business menggunakan Cloud API, yang di-hosting oleh Meta – sembari melihat sekilas beberapa kasus penggunaan.

Kode QR WhatsApp mudah dikelola dan dapat secara signifikan membantu meningkatkan interaksi dengan pelanggan Anda dengan berbagai cara yang berarti. Dengan kode QR WhatsApp dan kemampuan tautan pendek, terhubung dengan basis pengguna menjadi lebih mudah dari sebelumnya.

Label:

Fitur Bisnis Fitur Developer Platform 2022 WhatsApp

BERITA TERKAIT