Hantar Notifikasi Whatsapp Dari Order Pabbly Subscription Guna Wa Web Plus

Photo of author

Fikri Mastor

No Comments

Automize

Di dalam tutorial kali ini kita akan setup sistem notifikasi whatsapp yang dihantar selepas mendapat status tempahan yang berjaya di Pabbly Subscription.

Saya baru-baru ni ada melanggan Deskera di appsumo. Deskera ni perisian akaun yang lengkap dengan sistem pengurusan pelanggan, pendapatan dan lain-lain.

Dengan ada Pabbly Connect ni, segala order dari kedai online seperti woocommerce juga boleh sync ke banyak platform, khususnya Deskera ni nanti.

Berbalik kepada tutorial. Anda perlukan peralatan atau perisian berikut untuk memulakan setup ini:

  1. Pabbly Subscription
  2. Pabbly Connect
  3. Raspberry Pi 4 (Sebagai Remote Desktop Protocol – RDP)
  4. Firebase Google.
  5. Wa Web Plus

Kenapa Pabbly & Bukan Zapier?

Pertama sekali sudah tentu sebab kos.

Kedua sebab semua kerja dalaman atau internal task mereka tawarkan percuma, tidak termasuk dalam quota task bulanan.

Bermakna jika dalam 1 rantaian kerja yang kita rangka tersebut mempunyai 10 kerja dan dari 10 kerja tersebut 5 adalah daripada pabbly, maka hanya 5 kerja sahaja akan ditolak.

Internal Task Pabbly
Senarai internal task Pabbly Connect. Sumber Gambar

Apapun masih banyak apps yang masih perlu diisi, dan saya lihat mereka optimis dalam menambah integrasi yang baharu.

Tutorial bertulis di bawah ada sedikit persamaan dengan tutorial yang pernah saya kongsikan sebelum ini; Cara Setup Wa Web Plus, Firebase, Dan Raspberry Pi 4.

Cuma dalam tutorial tersebut saya sentuh cara nak hantar notifikasi jika ada order dari Woocommerce.

Berdasarkan dokumentasi webhook yang diberikan oleh Wa Web Plus Official, ada beberapa aspek yang kita kena faham iaitu:

  1. Outgoing webhook
  2. Incoming webhook

Kedua-dua ini kita gunakan, soalnya di mana kedudukannya. Flow adalah seperti berikut:

Dari Pabbly Subscription -> Firebase -> Wa Web Plus.

Pabbly Subscription akan hantar (POST) dengan menggunakan khidmat pabbly connect.

Wa Web Plus (GET – Incoming).

Maklumat Firebase

Jika belum pernah menggunakan Firebase, boleh klik link berikut https://console.firebase.google.com.

Project ID: waweb-veenet
Endpoint: https://waweb-veenet.firebaseio.com
Firebase API Key: AIzaSyC6BI1gZ_Ht-PIUYRAI6UBUqZHky6fTJCE

Peringatan: Maklumat di atas adalah senstif ya, saya sudah replace dengan maklumat lain di Wa Web Plus, Pabbly Connect dan Pabbly Subscription saya.

Jika kita sengaja dedahkan, ada pihak lain akan ambil kesempatan terhadap fungsi ini.

Isi Maklumat Di Wa Web Plus

Lengkapkan maklumat yang diminta seperti Firebase API Key dan Project ID.

Firebase Credentials

Kita perlu tetapkan firebase setting dan incoming webhook. Jangan tersilap ya.

Di bahagian incoming webhook kita perlu setkan nama json file yang kita nak rujuk.

Endpoint URL: https://{your-project-id}.firebaseio.com/{data child node}.json

Ubahkan maklumat atas ni dengan endpoint yang kita dapat dari Firebase tadi dengan tambahan nama file json file.

Di dalam ruangan webhook pilih incoming.

Di ruangan Data Child Node, pilih nama file sebagai contoh saya tulis store. Jadi Endpoint URL tu akan berubah seperti berikut:

https://waweb-veenet.firebaseio.com/store.json
Webhook Setting
Jika nama file tersebut kita letak store.json di dalam link, di ruangan setting Wa Web Plus hanya perlu letak store sahaja.

Dapatkan Maklumat API Key Di Pabbly Subscription

Boleh ke tab Setting kemudian cari API Setting.

Api Key Pabbly Subscription
Ini contoh API dari dummy Account saya ya.

Peringatan sekali lagi, sebarang maklumat berkaitan API ini adalah sulit, Kita boleh jana semula kod ini pada bila-bila masa sahaja.

Namun, tetapkan dalam kepala, jika kita ada banyak flow yang menggunakan API kod pabbly subscription, memang renyah untuk tukar satu per satu nanti.

API Key: 6c9aa6ff00ed87575fe3dc
Secret Key: 1cc5e1190O09c1bd59e12467e7694ce624

Setting Pabbly Connect

#1 Pilih pabbly subscription sebagai trigger

1 Trigger Guna Pabbly Subscription
Guna Pabbly Subcription sebagai trigger. Pilih Successful Payment

Salin URL, kemudian pergi semula ke halaman Pabbly Subscription untuk simpan URL webhook.

#2 Tambah webhook URL di Pabbly Subscription Setting

1 2 Salin Url Webhook
Klik pada butang tambah webhook.
Tanda Successful Payment
Tanda Successful Payment

#3 Panggil data penuh maklumat langganan guna API

Okay langkah ini agak rumit sedikit, kita perlu rujuk dalam halaman Public API yang dikeluarkan oleh pihak Pabbly di halaman berikut https://www.pabbly.com/subscriptions/api/.

Kenapa perlu panggil data ini, sebab ada beberapa maklumat penting seperti nama plan yang dilanggan tersebut tidak dijana di peringkat trigger yang pertama.

Terpulang kepada penggunaan masing-masing, namun saya akan biasakan simpan maklumat kita dapat ini terus dalam Google Sheet untuk rujukan akan datang.

Tidak perlu kita berulang kali jana report untuk maklumat pesanan pelanggan setiap hujung bulan kan. Semuanya sudah automatik.

Bermula saat ini maklumat API key yang kita dapat dari halaman setting pabbly subscription akan digunakan.

API Key: 6c9aa6ff00ed87575fe3dc
Secret Key: 1cc5e1190O09c1bd59e12467e7694ce624

Maklumat API ini kita akan pilih Basic Auth, kemudian akan keluar dua kotak dibawahnya, salin dan simpan di ruangan disediakan (rujuk gambar di bawah).

Jadi kita akan gunakan maklumat di atas untuk panggil data tempahan dengan menggunakan GET untuk URL berikut:

https://payments.pabbly.com/api/v1/subscription/{subscription_id}

Gantikan maklumat {subscription_id} dengan data yang kita dapat dari respons webhook di trigger pertama tadi.

2 Cari Data Api Subscription
Panggil data maklumat pesanan

#4 Panggil data peribadi pelanggan

3 Api Customer
Panggil maklumat peribadi pelanggan

#5 Tukar format nombor telefon

Ini juga langkah yang penting, kerana ada sesetengah pelanggan jarang meletakkan kod negara pada nombor telefon mereka.

Jadi kita akan tukar format dahulu, kemudian kita akan salurkan kepada webhook wa web plus.

4 Number Formatter
Tukar format nombor telefon

#6 Akhir sekali, isi maklumat Firebase

Jadi, langkah ini yang akan menghantar maklumat yang kita kumpulkan terus ke webhook wa web plus dengan menggunakan Firebase sebagai perantara.

Jangan lupa tukar Action Event kepada POST. Sebab sekarang ni mod menghantar maklumat.

5 Post Ke Wa Web Webhook

Di ruangan content, boleh gunakan contoh skrip yang saya tulis dibawah:

Terima kasih {{first-name}}!

Bayaran anda telah selamat diterima dan akan diproses seberapa segera.

*Maklumat Tempahan:*
*Nama:* {{nama-penuh}}
*Plan:* {{nama-plan}}
*Jumlah:* {{nilai-keseluruhan}}
*No. Telefon:* {{no-telefon}}

Terima kasih!

Ok itu sahaja untuk cara setup sistem notifikasi whatsapp yang dihantar selepas mendapat status tempahan yang berjaya di Pabbly Subscription.

Jika ada sebarang persoalan boleh ajukan di ruangan komen dibawah.

Jika tutorial ini bermanfaat, sebarkan kepada rakan-rakan anda dan belanja saya kopi 😀

Atau nak saya bantu setup sistem yang sama boleh klik link berikut:


Check out Sendy, a self hosted newsletter app that lets you send emails 100x cheaper via Amazon SES.

Mahu Dapatkan Info Pantas?

Langgan email secara percuma. Mana tahu ada tawaran istimewa!


Leave a Comment