Fitur toko lokal: tombol order WhatsApp dengan pesan terisi otomatis

Halo kak, saya mau order:

• Kopi Gayo Premium 250g (1 pcs)
• Harga: Rp 85.000
• Link: https://alifnugraha.my.id/docs/fitur-tombol-order-whatsapp

Apakah masih ready?

Untuk sebagian besar UMKM Indonesia, tombol “Order via WhatsApp” mengonversi lebih baik daripada form checkout mana pun — pembeli lokal terbiasa dan percaya bertransaksi lewat chat. Tapi tombol yang baik bukan sekadar link: pesannya terisi otomatis dengan detail produk, sehingga chat yang masuk langsung bisa diproses. Klik Lihat preview untuk mencoba tombolnya.

1. Anatomi link wa.me

https://wa.me/6281234567890?text=<pesan-ter-encode>

Dua aturan yang paling sering dilanggar:

• Nomor format internasional tanpa tanda apa pun: 6281234567890 — bukan 08..., bukan +62, tanpa strip/spasi.
• Pesan wajib di-encode — spasi, baris baru, dan & akan merusak URL kalau mentah.

2. Builder pesan yang bisa dipakai ulang

interface OrderInfo {
  produk: string;
  harga: number;
  qty?: number;
  url?: string;      // link halaman produk — CS langsung tahu konteksnya
}

const rupiah = (n: number) =>
  new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR",
    maximumFractionDigits: 0 }).format(n);

export function waOrderLink(nomor: string, o: OrderInfo): string {
  const pesan = [
    `Halo kak, saya mau order:`,
    ``,
    `• ${o.produk}${o.qty ? ` (${o.qty} pcs)` : ""}`,
    `• Harga: ${rupiah(o.harga)}`,
    o.url ? `• Link: ${o.url}` : "",
    ``,
    `Apakah masih ready?`,
  ].filter(Boolean).join("\n");

  return `https://wa.me/${nomor}?text=${encodeURIComponent(pesan)}`;
}

Dipakai di server-side render (pola situs ini) atau di browser:

<a href="${waOrderLink('6281234567890', {
     produk: 'Kopi Gayo Premium 250g', harga: 85000, qty: 1,
     url: 'https://toko.example/kopi-gayo',
   })}"
   target="_blank" rel="noopener" class="btn-primary w-full">
  Order via WhatsApp
</a>

Chat yang masuk ke CS jadi seperti ini — nol pertanyaan balik “kak mau order apa?”:

Halo kak, saya mau order:

• Kopi Gayo Premium 250g (1 pcs)
• Harga: Rp 85.000
• Link: https://toko.example/kopi-gayo

Apakah masih ready?

3. Naikkan konversinya

• Satu tombol utama per kartu/halaman. WhatsApp ATAU checkout — kalau keduanya, jadikan WA yang menonjol untuk pasar lokal.
• Sertakan link produk di pesan. Saat pesanan diteruskan antar admin, konteksnya ikut.
• Lacak kliknya — event click ke analytics (wa_order_click + nama produk); tanpa ini kamu tidak akan pernah tahu produk mana yang menghasilkan chat.
• Untuk toko dengan volume tinggi, langkah berikutnya adalah WhatsApp Business API + chatbot AI — pesan terstruktur yang sama, tapi dijawab otomatis 24/7 (lihat halaman layanan chatbot situs ini).

Pelajaran

• Pesan yang terisi otomatis memangkas separuh bolak-balik chat — CS langsung ke konfirmasi stok & ongkir.
• filter(Boolean) di builder membuat baris opsional (qty, url) hilang rapi tanpa if bertumpuk.
• Tombol WA bukan “kalah modern” dari checkout — di banyak toko klien, justru itulah checkout-nya.