Penggunaan API WhatsApp Business dengan Berbagai Jenis Template

  • Updated

WhatsApp Business API dirancang dengan pengalaman pengiriman pesan yang canggih untuk memenuhi kebutuhan bisnis Anda. Selain pesan masuk dari beberapa saluran WhatsApp yang dapat Anda tangani dengan Qiscus Omnichannel, Anda tidak perlu khawatir kehilangan kesempatan untuk berinteraksi lebih banyak dengan pelanggan Anda dengan mengirimkan pesan keluar. Apakah anda memiliki alur kerja sendiri? Kirimkan saja melalui API! Pada artikel ini, kami memberi Anda beberapa contoh API dengan berbagai template.

mceclip4.png

Kami menganggap Anda telah memutuskan kasus penggunaan Anda (OTP, pembaruan akun, informasi tiket, dll.) dan telah mengirimkan template pesan keluar melalui dashboard Qiscus Omnichannel.

 

Sebelum kita mulai, berikut adalah hal-hal yang Anda butuhkan:

  • Membaca dokumentasi di sini
  • Qiscus App ID dan Qiscus Secret Key

    blobid1.png
  • Channel ID, Template Name, Language, & Namespace dari template yang telah di approve

    blobid2.png

  • Pastikan komponen yang telah Anda submit di template. Template dapat menangani komponen-komponen berikut ini:
    • Header (optional): Text/Media (Image/Video/Document) dengan variabel
    • Body: Text dengan variabel
    • Footer (optional): Text
    • Buttons (optional): Call To Action/Quick Reply
  • Phone number
    Harus menyertakan kode negara tanpa + (mis.62xxxxx) dan valid sebagai akun WhatsApp.

1. Hanya Body, tanpa Variable

Contoh berikut menggunakan template sederhana yang hanya memiliki konten di bagian body, tanpa header, button, atau variabel. Berikut adalah contoh dari request API.

Contoh template:

mceclip1.png

Request:

curl --location -g --request POST 'https://multichannel.qiscus.com/whatsapp/v1/{{app_id}}/{{channel_id}}/messages' \
--header 'Qiscus-App-Id: {{app_id}}' \
--header 'Qiscus-Secret-Key: {{secret_key}}' \
--header 'Content-Type: application/json' \
--data-raw '{
  "to": "{{phone_number}}",
   "type": "template",
   "template": {
       "namespace": "{{namespace}}",
       "name": "noparam",
       "language": {
           "policy": "deterministic",
           "code": "en"
       }
   }
}'

Catatan: Kode bahasa akan berbeda untuk setiap bahasa. Silakan lihat di sini untuk melihat kode.
Karena template ini hanya berisi body tanpa variabel, teksnya akan sama dengan yang Anda kirimkan di template. 

Hasil:

WhatsApp_Image_2022-02-15_at_11.24.14_AM.jpeg

 

2. Body dengan Beberapa Variabel Text

Bagian body memungkinkan untuk menangani hingga 15 variabel teks. Saat Anda mengirimkan API akan terlihat seperti ini. 

Contoh template:

mceclip2.png

Request:

curl --location -g --request POST 'https://multichannel.qiscus.com/whatsapp/v1/{{app_id}}/{{channel_id}}/messages' \
--header 'Qiscus-App-Id: {{app_id}}' \
--header 'Qiscus-Secret-Key: {{secret_key}}' \
--header 'Content-Type: application/json' \
--data-raw '{
   "to": "{{phone_number}}",
   "type": "template",
   "template": {
       "namespace": "{{namespace}}",
       "name": "90daysfreetrial3",
       "language": {
           "policy": "deterministic",
           "code": "id"
       },
       "components": [
           {
               "type" : "body",
               "parameters": [
                   {
                       "type": "text",
                       "text": "{{body_var1}}"
                   },
                   {
                       "type": "text",
                       "text": "{{body_var2}}"
                   }
               ]
           },
       ]
   }
}'

Hasil:

WhatsApp_Image_2022-02-15_at_11.24.13_AM__2_.jpeg

 

3. Header dengan variabel teks

Tidak seperti bagian body, header hanya mampu menampung 1 variabel teks. 

Contoh template:

mceclip3.png

Request:

curl --location -g --request POST 'https://multichannel.qiscus.com/whatsapp/v1/{{app_id}}/{{channel_id}}/messages' \
--header 'Qiscus-App-Id: {{app_id}}' \
--header 'Qiscus-Secret-Key: {{secret_key}}' \
--header 'Content-Type: application/json' \
--data-raw '{
   "to": "{{phone_number}}",
   "type": "template",
   "template": {
       "namespace": "{{namespace}}",
      "name": "header_text_with_var",
       "language": {
           "policy": "deterministic",
           "code": "id"
       },
       "components": [
           {
               "type" : "header",
               "parameters": [
                   {
                  "type": "text",
                  "text": "{{header_var1}}"
                   }
               ]
          },
           {
               "type" : "body",
               "parameters": [
                   {
                       "type": "text",
                      "text": "{{body_var1}}"
                  },
                   {
                       "type": "text",
                      "text": "{{body_var2}}"
                   }
               ]
           },
       ]
   }
}'

Note: Jika header anda tidak memiliki variabel, anda bisa membuang komponen header

Hasil:

WhatsApp_Image_2022-02-15_at_11.24.13_AM__1_.jpeg

 

4. Header dengan variabel gambar

Contoh template:

mceclip4.png

Request:

curl --location -g --request POST 'https://multichannel.qiscus.com/whatsapp/v1/{{app_id}}/{{channel_id}}/messages' \
--header 'Qiscus-App-Id: {{app_id}}' \
--header 'Qiscus-Secret-Key: {{secret_key}}' \
--header 'Content-Type: application/json' \
--data-raw '{
   "to": "{{phone_number}}",
   "type": "template",
   "template": {
       "namespace": "{{namespace}}",
     "name": "image_demo",
       "language": {
           "policy": "deterministic",
           "code": "id"
       },
       "components": [
           {
               "type" : "header",
               "parameters": [
                  {
                   "type": "image",
                   "image": {
                    "link": "{{image_url}}"
                    }
                   }
               ]
          },
           {
               "type" : "body",
               "parameters": [
                   {
                       "type": "text",
                     "text": "{{body_var1}}"
                 }
               ]
           },
       ]
   }
}'

Note: URL dari gambar harus meruakan URL langsung, bukan URL yang dipendekkan.
(e.g.https://d1edrlpyc25xu0.cloudfront.net/ramo-29lun8b1ulepsaio/image/upload/w_320,h_320,c_limit/zx64Ye2CA3/eae2beadacb892edac858b045b2c0d1c.png)

Hasil:

WhatsApp_Image_2022-02-15_at_11.24.12_AM__2_.jpeg

 

5. Header dengan Variabel Video

Contoh template:

mceclip5.png

Request:

curl --location -g --request POST 'https://multichannel.qiscus.com/whatsapp/v1/{{app_id}}/{{channel_id}}/messages' \
--header 'Qiscus-App-Id: {{app_id}}' \
--header 'Qiscus-Secret-Key: {{secret_key}}' \
--header 'Content-Type: application/json' \
--data-raw '{
   "to": "{{phone_number}}",
   "type": "template",
   "template": {
       "namespace": "{{namespace}}",
     "name": "penjelasanmultichannel",
       "language": {
           "policy": "deterministic",
           "code": "id"
       },
       "components": [
           {
               "type" : "header",
               "parameters": [
                  {
                  "type": "video",
                  "video": {
                   "link": "{{video_url}}"
                   }
                 }
               ]
          },
           {
               "type" : "body",
               "parameters": [
                   {
                    "type": "text",
                     "text": "{{body_var1}}"
                 }
               ]
           },
       ]
   }
}'

Note: URL video harus merupakan URL langsung, bukan URL yang dipendekkan.

(e.g. https://d1edrlpyc25xu0.cloudfront.net/hat-ppxmocchbbcbhopzk/video/upload/LdBf7CGc_1/final_620a46a7ae155601096e4f7f_749103.mp4

Hasil:

WhatsApp_Image_2022-02-15_at_11.24.13_AM.jpeg

 

6. Header dengan Variabel Dokumen

Contoh template:

mceclip8.png

Request:

curl --location -g --request POST 'https://multichannel.qiscus.com/whatsapp/v1/{{app_id}}/{{channel_id}}/messages' \
--header 'Qiscus-App-Id: {{app_id}}' \
--header 'Qiscus-Secret-Key: {{secret_key}}' \
--header 'Content-Type: application/json' \
--data-raw '{
   "to": "{{phone_number}}",
   "type": "template",
   "template": {
       "namespace": "{{namespace}}",
     "name": "information_update",
       "language": {
           "policy": "deterministic",
          "code": "ms"
       },
       "components": [
           {
               "type" : "header",
               "parameters": [
                  {
                  "type": "document",
                  "document": {
                  "link": "{{document_url}}",
"filename": "{{file_name}}"
                  }
                 }
               ]
         },
           {
               "type" : "body",
               "parameters": [
                   {
                    "type": "text",
                    "text": "{{body_var1}}"
                }
               ]
          }
       ]
   }
}'

Note: URL dokumen harus merupakan URL langsung, bukan URL yang dipendekkan. JIka anda ingin mengganti nama dokumen, harap isi di bagian "filename".

(e.g. https://d1edrlpyc25xu0.cloudfront.net/hat-ppxmocchbbcbhopzk/docs/upload/e7h9vQdk3_/qiscus.pdf)

Hasil:

WhatsApp_Image_2022-02-15_at_11.24.12_AM__1_.jpeg

 

7. Button - Call To Action dengan URL Dinamis

Jika Anda menggunakan tombol Call to Action, ada 3 opsi jenis action saat membuat template: 

  • Call phone number
  • Visit website (static URL)
  • Visit website (dynamic URL): hanya menambahkan suffix (akhiran) custom pada akhir URL

Anda hanya dapat memiliki 2 Tombol Call To Action (Call phone number & Visit website static/dynamic).
Pada API, call phone number dan visit website (static URL) tidak perlu untuk dimasukkan. Karena akan menggunakan nilai default dari template yang telah Anda submit. Berikut adalah cotoh penggunakan URL yang dinamis.

Example template:

mceclip7.png

Request:

curl --location -g --request POST 'https://multichannel.qiscus.com/whatsapp/v1/{{app_id}}/{{channel_id}}/messages' \
--header 'Qiscus-App-Id: {{app_id}}' \
--header 'Qiscus-Secret-Key: {{secret_key}}' \
--header 'Content-Type: application/json' \
--data-raw '{
   "to": "{{phone_number}}",
   "type": "template",
   "template": {
       "namespace": "{{namespace}}",
     "name": "ticket_resolved_123",
       "language": {
           "policy": "deterministic",
           "code": "id"
       },
      "components": [
           {
               "type" : "header",
              "parameters": [
                   {
                 "type": "text",
                "text": "{{header_var1}}"
                   }
               ]
          },
           {
               "type" : "body",
               "parameters": [
                   {
                    "type": "text",
                     "text": "{{body_var1}}"
                 }
               ]
          },
{
               "type":"button",
               "sub_type": "url",
               "index": 1,
              "parameters": [
                   {
                       "type": "text",
                      "text": "{{url_var1}}"
                   }
               ]
          },
       ]
   }
}'

Catatan: Nilai dari "index" tergantung dari urutan tombol Call To Action yang anda miliki pada template (0 - 1). Pada contoh ini nomor index adalah 1.
mceclip0.png

Hasil:

WhatsApp_Image_2022-02-15_at_11.24.41_AM.jpeg

 

8. Button - Quick Reply

Sebuah template dapat memiliki maksimum 3 Tombol Quick Reply.

Contoh template:

mceclip9.png

Request:

curl --location -g --request POST 'https://multichannel.qiscus.com/whatsapp/v1/{{app_id}}/{{channel_id}}/messages' \
--header 'Qiscus-App-Id: {{app_id}}' \
--header 'Qiscus-Secret-Key: {{secret_key}}' \
--header 'Content-Type: application/json' \
--data-raw '{
   "to": "{{phone_number}}",
   "type": "template",
   "template": {
       "namespace": "{{namespace}}",
    "name": "ticket_resolved_123",
       "language": {
           "policy": "deterministic",
          "code": "en"
       },
      "components": [
           {
               "type" : "header",
              "parameters": [
                   {
                 "type": "text",
                "text": "{{header_var1}}"
                   }
               ]
         },
           {
               "type" : "body",
               "parameters": [
                   {
                    "type": "text",
                     "text": "{{body_var1}}"
                 }
               ]
          },
{
               "type":"button",
              "sub_type": "quick_reply",
              "index": 0,
              "parameters":[
                   {
                     "type": "payload",
                     "payload": "{{payload_var1}}"
                   }
               ]
          },
{
             "type":"button",
              "sub_type": "quick_reply",
             "index": 1,
              "parameters":[
                   {
                     "type": "payload",
                    "payload": "{{payload_var2}}"
                   }
               ]
          },
       ]
   }
}'

Catatan: Parameter pada tombol quick reply bersifat optional. Payload akan dikirimkan ketika pengguna meng-click tombol quick reply pada WhatsApp mereka. Untuk melihatnya, Anda dapat menggunakan  webhook. Serta dapat menghilangkannya jika tidak dibutuhkan. 

          {
             "type":"button",
              "sub_type": "quick_reply",
             "index": 0,
             "parameters":[]
          },

Hasil:

WhatsApp_Image_2022-02-15_at_11.24.12_AM.jpeg

 

9. Footer

Tidak perlu utuk memasukkan footer pada payload API (akan secara otomatis menggunakan teks footer pada template yang disubmit).

 

Related to

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.