Mengintegrasikan WhatsApp ke dalam Shopify
Sebagai developer Shopify untuk bisnis skala menengah atau besar, Anda tahu betapa pentingnya memiliki komunikasi yang lancar dengan pelanggan Anda. Untuk mencapai hal ini, Anda dapat memanfaatkan Platform WhatsApp Business untuk membantu Anda mengirimkan pesan otomatis ke ribuan pelanggan dan menskalakan proses secara efisien seiring pertumbuhan basis pelanggan Anda.
Tutorial ini memandu proses menghubungkan WhatsApp ke Shopify dan mengirimkan pesan notifikasi WhatsApp kepada pelanggan berdasarkan peristiwa yang mereka picu di toko, seperti menambahkan produk ke keranjang mereka atau melakukan pemesanan. Untuk melakukan ini, kami akan menggunakan Cloud API, yang dihosting oleh Meta.
Prasyarat
Untuk mengikuti tutorial ini, Anda akan perlu:
- Instal Node.js dan npm
- Toko di Shopify yang telah mengatur produk dan pemrosesan pembayaran
- Daftar ke akun developer di Meta untuk Developer, siapkan Aplikasi Bisnis, dan pilih Akun WhatsApp Business.
Menyelesaikan langkah terakhir akan memberikan token akses sementara. Anda akan membutuhkannya untuk sisa tutorial ini, jadi simpan baik-baik.
Setelah Anda memenuhi persyaratan ini, Anda dapat melanjutkan tutorial selanjutnya.
Membuat Template Pesan di WhatsApp
Template pesan WhatsApp membantu Anda membuat beberapa format pesan yang dapat Anda gunakan lebih dari satu kali untuk mengirim pesan kepada pelanggan setelah mereka memberikan izin kepada aplikasi Anda untuk melakukannya.
Ikuti langkah-langkah ini untuk membuat template pesan notifikasi pesanan:
- Masuk ke Pengelola Bisnis dan pilih akun bisnis Anda.
- Klik ikon tiga baris di pojok kiri atas halaman dan klik Pengelola WhatsApp.
- Menggunakan navigasi samping, arahkan kursor ke ikon Fitur Akun dan klik Template pesan.
- Klik Buat Template di pojok kanan atas halaman.
- Pada halaman berikutnya, pilih opsi Transaksional untuk kategori Anda, lalu beri nama template (dalam hal ini, "order_confirmation") dan pilih bahasanya.
- Klik Lanjut untuk melanjutkan ke editor template.
Sekarang template order_confirmation telah diatur, saatnya untuk menentukan garis besarnya. Berikut tampilan pesan kepada pelanggan:
Kami telah menerima pesanan Anda!
Halo [nama pelanggan],
Terima kasih telah berbelanja dengan kami.
Kami sedang memproses pesanan Anda (23190). Paket Anda akan dikirimkan kepada Anda dalam 2-3 hari kerja berikutnya (tidak termasuk hari libur dan akhir pekan).
Ketika proses pengiriman terjadi, Anda akan mendapatkan email lain dari kami.
Di editor template Anda, pilih Teks untuk bagian Header. Paragraf “Kami telah menerima…” akan menjadi Header, dengan sisa pesan disalin ke bagian Body.
Berikutnya, klik Tambah variabel dua kali di bawah kotak teks Body untuk menambahkan dua variabel. Salin dan tempel variabel pertama—{{1}}—sebagai ganti nama pelanggan. Berikutnya, salin dan tempel variabel kedua—{{2}}—sebagai pengganti nomor urut di dalam tanda kurung.
Setelah selesai, pesan Anda akan terlihat seperti ini. Anda dapat memeriksa area pratinjau di halaman yang sama.
Klik Kirim untuk menyimpan template pesan.
Setelah template siap, Anda dapat menggunakan Platform WhatsApp Business untuk membuat Webhooks di admin Shopify Anda dan memetakan aplikasi yang secara otomatis mengirimkan pesan kepada pelanggan saat mereka melakukan pemesanan.
Menggunakan Webhooks untuk Mengirim Notifikasi ke Server Ekspres
Katakanlah Anda ingin mengirim pesan otomatis kepada pelanggan setiap kali mereka memesan dari toko Shopify Anda. Anda dapat memeriksa pesanan baru di toko setiap lima menit atau lebih. Namun, mengirim permintaan API terus-menerus ke toko Anda tidak efisien—terutama jika tidak ada pesanan baru.
Jauh lebih efisien bagi Webhooks untuk mendengarkan peristiwa "pembuatan pesanan" di toko Anda dan memberi tahu Anda setiap kali pelanggan melakukan pemesanan.
Berikut adalah langkah-langkah dasar untuk membuat Webhooks "pembuatan pesanan" dan memetakannya ke server express.
Menyiapkan Proyek Node.js
Mulailah dengan membuat folder bernama "whatsapp-demo" untuk proyek Anda.
Berikutnya, luncurkan terminal perintah cd di "whatsapp-demo" dan jalankan perintah berikut untuk menginisialisasi proyek Node.js:
npm init -y
Instal express, pustaka yang digunakan untuk membuat web server di Node.js, dengan menjalankan perintah berikut:
npm i express
Setelah lingkungan pengembangan Anda diatur, Anda akan membuat server express.
Membuat Server Ekspres
Buat file bernama test.js di dalam folder whatsapp-demo. Buka dengan editor kode sumber pilihan Anda dan salin-tempel kode berikut ke dalamnya:
const express = require('express')
const app = express()
app.post('/webhooks/orders/create', (req, res) => {
console.log('Yes, We got an order!')
res.sendStatus(200)
})
app.listen(3000, () => console.log('Now running on port 3000!'))Dengan menggunakan kode di atas, Anda telah menyiapkan server express dasar yang menampilkan pesan di terminal server saat Webhooks mengirimkan notifikasi "pembuatan pesanan".
Sebelum memetakannya ke Webhooks Shopify, Anda harus menyiapkan tunnel terlebih dahulu.
Menyiapkan Tunnel Traffic HTTPS
Saat menyiapkan Webhooks, Shopify mengharuskan Anda untuk memberikan URL publik yang akan mengirimkan notifikasi.
Jika Anda mengikuti tutorial ini di server publik, gunakan URL-nya. Jika Anda mengikuti tutorial ini di mesin lokal Anda, Anda harus membuat tunnel dengan URL HTTPS yang dapat diakses publik.
Pertama, instal ngrok dengan mengeksekusi perintah berikut:
npm install -g ngrok
Berikutnya, luncurkan jendela terminal yang berbeda dan jalankan perintah berikut untuk mendapatkan URL tunnel untuk server lokal Anda:
ngrok http 3000 Forwarding https://xxxx-xxx-xxx-xxx-xxx.ngrok.io
Catat URL-nya karena Anda akan membutuhkannya di langkah berikutnya. Perhatikan bahwa jika Anda memulai ulang klien ini, Anda akan mendapatkan URL baru dan perlu memperbarui semua referensi ke sana.
Membuat Webhooks di Shopify
Masuk ke admin toko Shopify Anda dan arahkan ke Settings > Notifications. Setelah itu, gulir turun ke Webhooks dan klik Create webhook.
Tambahkan webhook untuk "pembuatan pesanan" dan tentukan URL tunnel atau URL publik yang Anda buat di bagian sebelumnya.
Jalankan server lokal Anda di terminal berbeda dengan node index.js, lalu klik Send test notification.
Jika semuanya berjalan lancar, Anda akan menerima pesan ini di terminal server Anda: “Yes we got an order.”
Sekarang Anda memiliki koneksi yang berfungsi antara toko Shopify Anda dan server Express. Berikutnya, Anda akan mengirimkan template pesan WhatsApp kepada pelanggan setelah mereka melakukan pemesanan.
Kirim Pesan Khusus dengan Template "order_notification"
Pertama, instal Axios dengan menjalankan perintah berikut di terminal Anda:
npm i axios
Anda akan menggunakan Axios untuk membuat permintaan POST bertanggung jawab untuk mengirim pesan WhatsApp kepada pelanggan.
Setelah Axios diinstal, buat file lain di folder proyek Anda bernama customMessage.js, lalu impor axios dan express ke dalam file dengan kode berikut:
const axios = require('axios').default
const express = require('express')
const app = express()Berikutnya, buat rute untuk menangani notifikasi pembuatan pesanan dari Shopify dengan menjalankan perintah berikut:
app.post('/webhooks/orders/create', async (req, res) => {
const body = await getRawBody(req);
const order = JSON.parse(body.toString());
console.log("Yes, We got an order!", order.customer.phone);
// Remaining code will go here
})Saat Shopify memanggil /webhooks/orders/create dengan pesanan, detail pesanan akan dikirim ke rute di dalam res, argumen kedua dari fungsi panggilan balik asinkron Anda dan objek JavaScript.
Berikutnya, ambil nomor telepon, nama depan, dan ID pesanan pelanggan dari detail pesanan, dan gunakan untuk membuat parameter permintaan API:
const data = {
"messaging_product": "whatsapp",
"to": `${order.customer.phone}`,
"type": "template",
"template": {
"name": "order_confirmation",
"language": { "code": "en_GB" },
"components": [
{
"type": "body",
"parameters": [
{
"type": "text",
"text": `${order.customer.first_name}`
},
{
"type": "text",
"text": `${order.id}`
}
]
}
]
}
} Objek di atas berisi semua parameter yang diperlukan untuk menyelesaikan permintaan. Pastikan nama template yang ditentukan di objek cocok dengan yang dibuat sebelumnya di Pengelola WhatsApp Business Anda.
Berikutnya, buat objek konfigurasi dengan objek header bertumpuk. Di dalam header, atur token akses WhatsApp sebagai nilai Otorisasi (ganti ACCESS_TOKEN dengan token), dan application/json sebagai Content-Type:
const config = {
headers: { Authorization: `Bearer <ACCESS_TOKEN>`, 'Content-Type': 'application/json'}
};Selanjutnya, buat permintaan POST dengan Axios dan teruskan objek konfigurasi dan objek data sebagai argumen. Metode tumpuk then() and catch untuk menampilkan hasilnya (atau pesan kesalahan jika promise gagal):
if (order.customer.phone) {
return res.sendStatus(403);
} else {
axios
.post(
"https://graph.facebook.com/<API_VERSION>/<YOUR_WABA_ID>/messages",
data,
config
)
.then((result) => console.log(result))
.catch((err) => console.log(err));
return res.sendStatus(200);
}Ganti YOUR_WABA_ID dengan ID WhatsApp Business dari dasbor Aplikasi WhatsApp dan API_VERSION dengan versi Cloud API yang kompatibel (default-nya adalah v15.0)
Aplikasinya siap!
Untuk mengujinya, tunnel ngrok seharusnya masih berjalan, dan Anda harus memulai server express di terminal terpisah:
node customMessages.js
Peristiwa Shopify Lainnya
Selain penempatan pesanan, Shopify menawarkan lebih dari 50 Webhooks untuk berbagai peristiwa. Anda dapat berlangganan pembuatan dan pembaruan keranjang, pembuatan dan pembaruan koleksi produk, upaya penagihan yang berhasil dan gagal, dan banyak lagi lainnya.
Untuk menggunakan salah satu webhook ini, ikuti pola yang sama seperti yang dijelaskan di atas dengan membuat Webhooks baru di admin Shopify Anda dan mendaftarkan topik sebagai rute di server express Anda.
Seperti yang telah Anda lihat, Platform WhatsApp Business membantu Anda berkomunikasi secara lancar dengan pelanggan baik secara manual maupun terprogram berdasarkan peristiwa di toko Shopify Anda.
Integrasi WhatsApp Shopify memungkinkan Anda mengirim pesan massal ke pelanggan Anda secara realtime. Pesan dapat dikirim secara otomatis (contoh: berdasarkan peristiwa) atau secara manual. Tidak hanya mudah disiapkan, tetapi juga cukup dapat diskalakan. Memasangkan WhatsApp dan Shopify membuat komunikasi pelanggan menjadi konsisten, efektif, dan berdampak.
Untuk informasi selengkapnya tentang bagaimana Anda dapat mengintegrasikan WhatsApp ke dalam aplikasi dan proyek Anda, lihat tutorial developer kami lainnya.
