Local-store feature: a WhatsApp order button with a pre-filled message

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?

For most Indonesian small businesses, an “Order via WhatsApp” button converts better than any checkout form — local buyers are used to, and trust, transacting in chat. But a good button is more than a link: the message arrives pre-filled with product details, so the incoming chat can be processed immediately. Click View preview to try the button.

1. Anatomy of a wa.me link

https://wa.me/6281234567890?text=<encoded-message>

The two most-broken rules:

• The number is international format with no symbols: 6281234567890 — not 08..., not +62, no dashes/spaces.
• The message must be encoded — spaces, newlines, and & break the URL when raw.

2. A reusable message builder

interface OrderInfo {
  product: string;
  price: number;
  qty?: number;
  url?: string;      // product page link — support instantly has context
}

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

export function waOrderLink(number: string, o: OrderInfo): string {
  const message = [
    `Hi, I'd like to order:`,
    ``,
    `• ${o.product}${o.qty ? ` (${o.qty} pcs)` : ""}`,
    `• Price: ${rupiah(o.price)}`,
    o.url ? `• Link: ${o.url}` : "",
    ``,
    `Is it still in stock?`,
  ].filter(Boolean).join("\n");

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

Used in server-side rendering (this site’s pattern) or in the browser:

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

The chat that lands in support looks like this — zero “hi, what would you like to order?” round-trips:

Hi, I'd like to order:

• Premium Gayo Coffee 250g (1 pcs)
• Price: Rp 85.000
• Link: https://shop.example/gayo-coffee

Is it still in stock?

3. Raising its conversion

• One primary button per card/page. WhatsApp OR checkout — if both, make WA the prominent one for local markets.
• Include the product link in the message. When orders get forwarded between admins, the context travels with them.
• Track the clicks — send a click event to analytics (wa_order_click + product name); without it you’ll never know which products generate chats.
• For high-volume stores, the next step is the WhatsApp Business API + an AI chatbot — the same structured message, answered automatically 24/7 (see this site’s chatbot service page).

Lessons

• A pre-filled message cuts chat back-and-forth in half — support goes straight to confirming stock & shipping.
• filter(Boolean) in the builder makes optional lines (qty, url) disappear cleanly without stacked ifs.
• A WA button isn’t “less modern” than checkout — in many client stores, it is the checkout.