Auto Reply WA dengan Quick Reply Buttons

Buttons = Lebih mudah untuk customer!

Daripada customer harus ketik, mereka bisa tap button untuk response instan. UX yang jauh lebih baik!

Jenis Interactive Messages

1. Reply Buttons (Max 3)

┌─────────────────────────────────────┐
│  Ada yang bisa dibantu?             │
│                                     │
│  [📦 Katalog] [💰 Harga] [🛒 Order] │
└─────────────────────────────────────┘

Max 3 buttons
Best for: Quick actions, simple choices

2. List Menu (Max 10 sections)

┌─────────────────────────────────────┐
│  Pilih Kategori                     │
│  ─────────────────────              │
│  ▼ Fashion                          │
│     • Kaos                          │
│     • Kemeja                        │
│     • Celana                        │
│  ▼ Aksesoris                        │
│     • Topi                          │
│     • Tas                           │
└─────────────────────────────────────┘

Max 10 sections, 10 items per section
Best for: Catalog, multiple options

3. Call-to-Action (CTA) Buttons

┌─────────────────────────────────────┐
│  Produk Ready!                      │
│  Kaos Basic - Rp 150.000            │
│                                     │
│  [🌐 Lihat Website]                 │
│  [📞 Call Now]                      │
└─────────────────────────────────────┘

Types: URL button, Phone button
Best for: External links, direct call

Kapan Pakai Buttons vs Text

✅ PAKAI BUTTONS:
- Pilihan terbatas (2-3 options)
- Action yang jelas
- Mobile-first experience
- Reduce typing effort

❌ TETAP TEXT:
- Butuh input bebas (nama, alamat)
- Lebih dari 10 options
- Platform tidak support
- Unofficial API (tidak support buttons)

Implementasi dengan Cloud API

Reply Buttons:

javascript

async function sendReplyButtons(to, bodyText, buttons) {
    await axios.post(`${GRAPH_API_URL}/messages`, {
        messaging_product: 'whatsapp',
        to: to,
        type: 'interactive',
        interactive: {
            type: 'button',
            body: {
                text: bodyText
            },
            action: {
                buttons: buttons.map((btn, i) => ({
                    type: 'reply',
                    reply: {
                        id: btn.id,
                        title: btn.title // Max 20 chars
                    }
                }))
            }
        }
    }, {
        headers: {
            'Authorization': `Bearer ${ACCESS_TOKEN}`,
            'Content-Type': 'application/json'
        }
    });
}

// Usage
await sendReplyButtons(
    '628123456789',
    'Hai! Ada yang bisa dibantu? 😊',
    [
        { id: 'catalog', title: '📦 Katalog' },
        { id: 'price', title: '💰 Harga' },
        { id: 'order', title: '🛒 Order' }
    ]
);

List Menu:

javascript

async function sendListMenu(to, bodyText, buttonText, sections) {
    await axios.post(`${GRAPH_API_URL}/messages`, {
        messaging_product: 'whatsapp',
        to: to,
        type: 'interactive',
        interactive: {
            type: 'list',
            header: {
                type: 'text',
                text: 'Menu Pilihan'
            },
            body: {
                text: bodyText
            },
            footer: {
                text: 'Pilih salah satu option'
            },
            action: {
                button: buttonText, // Max 20 chars
                sections: sections
            }
        }
    });
}

// Usage
await sendListMenu(
    '628123456789',
    'Mau lihat produk apa?',
    'Lihat Menu',
    [
        {
            title: 'Fashion Pria',
            rows: [
                { id: 'kaos_pria', title: 'Kaos', description: 'Kaos casual pria' },
                { id: 'kemeja_pria', title: 'Kemeja', description: 'Kemeja formal & casual' },
                { id: 'celana_pria', title: 'Celana', description: 'Jeans, chino, jogger' }
            ]
        },
        {
            title: 'Fashion Wanita',
            rows: [
                { id: 'dress', title: 'Dress', description: 'Dress casual & formal' },
                { id: 'blouse', title: 'Blouse', description: 'Atasan wanita' },
                { id: 'rok', title: 'Rok', description: 'Rok berbagai model' }
            ]
        }
    ]
);

CTA Buttons:

javascript

async function sendCTAButtons(to, bodyText, buttons) {
    await axios.post(`${GRAPH_API_URL}/messages`, {
        messaging_product: 'whatsapp',
        type: 'interactive',
        interactive: {
            type: 'cta_url',
            body: {
                text: bodyText
            },
            action: {
                name: 'cta_url',
                parameters: {
                    display_text: buttons.displayText,
                    url: buttons.url
                }
            }
        }
    });
}

// Usage
await sendCTAButtons(
    '628123456789',
    'Lihat katalog lengkap kami!',
    {
        displayText: '🌐 Buka Katalog',
        url: 'https://yourstore.com/catalog'
    }
);

Handle Button Responses

javascript

// Webhook handler
app.post('/webhook', async (req, res) => {
    const body = req.body;
    
    if (body.object === 'whatsapp_business_account') {
        const entry = body.entry[0];
        const changes = entry.changes[0];
        const value = changes.value;
        
        if (value.messages) {
            const message = value.messages[0];
            
            // Handle interactive response (button/list)
            if (message.type === 'interactive') {
                const interactive = message.interactive;
                
                if (interactive.type === 'button_reply') {
                    // Reply button clicked
                    const buttonId = interactive.button_reply.id;
                    const buttonTitle = interactive.button_reply.title;
                    
                    await handleButtonClick(message.from, buttonId);
                }
                
                if (interactive.type === 'list_reply') {
                    // List item selected
                    const itemId = interactive.list_reply.id;
                    const itemTitle = interactive.list_reply.title;
                    
                    await handleListSelection(message.from, itemId);
                }
            }
        }
    }
    
    res.sendStatus(200);
});

async function handleButtonClick(phone, buttonId) {
    switch (buttonId) {
        case 'catalog':
            await sendCatalog(phone);
            break;
        case 'price':
            await sendPriceList(phone);
            break;
        case 'order':
            await startOrderFlow(phone);
            break;
        default:
            await sendDefaultMessage(phone);
    }
}

Flow Examples

Product Selection Flow:

Step 1: Category (List)
┌─────────────────────────────────────┐
│  Pilih Kategori Produk              │
│  [Lihat Kategori ▼]                 │
│                                     │
│  • Fashion                          │
│  • Elektronik                       │
│  • Aksesoris                        │
└─────────────────────────────────────┘

Step 2: Product (List)
┌─────────────────────────────────────┐
│  Produk Fashion                     │
│  [Pilih Produk ▼]                   │
│                                     │
│  • Kaos Basic - Rp 150k             │
│  • Kemeja - Rp 250k                 │
│  • Hoodie - Rp 350k                 │
└─────────────────────────────────────┘

Step 3: Size (Buttons)
┌─────────────────────────────────────┐
│  Pilih Size:                        │
│                                     │
│  [S] [M] [L]                        │
└─────────────────────────────────────┘

Step 4: Confirm (Buttons)
┌─────────────────────────────────────┐
│  Konfirmasi Order:                  │
│  Kaos Basic - Size M - Rp 150k      │
│                                     │
│  [✅ Confirm] [❌ Cancel]            │
└─────────────────────────────────────┘

Customer Service Flow:

Step 1: Issue Type (Buttons)
┌─────────────────────────────────────┐
│  Apa yang bisa dibantu?             │
│                                     │
│  [📦 Order] [🚚 Shipping] [💬 Other]│
└─────────────────────────────────────┘

Step 2: Specific Issue (List)
┌─────────────────────────────────────┐
│  Kendala Pengiriman                 │
│  [Pilih Masalah ▼]                  │
│                                     │
│  • Paket belum sampai               │
│  • Paket rusak                      │
│  • Alamat salah                     │
│  • Lainnya                          │
└─────────────────────────────────────┘

Step 3: Resolution (Buttons)
┌─────────────────────────────────────┐
│  Solusi yang tersedia:              │
│                                     │
│  [Refund] [Kirim Ulang] [Hubungi CS]│
└─────────────────────────────────────┘

Fallback untuk Non-Cloud API

javascript

// Untuk unofficial API (tidak support buttons)
// Fallback ke text-based menu

async function sendMenuWithFallback(phone, menu, useButtons = false) {
    if (useButtons && hasCloudAPI) {
        // Use interactive buttons
        await sendReplyButtons(phone, menu.body, menu.buttons);
    } else {
        // Fallback to text
        let textMessage = menu.body + '\n\n';
        
        menu.buttons.forEach((btn, i) => {
            textMessage += `${i + 1}️⃣ ${btn.title}\n`;
        });
        
        textMessage += '\nKetik angka untuk pilih!';
        
        await sendTextMessage(phone, textMessage);
    }
}

Best Practices

Button Design:

✅ GOOD BUTTONS:
- Short & clear (max 20 chars)
- Action-oriented ("Order Now" bukan "Click Here")
- Emoji for visual cue
- Logical order

❌ BAD BUTTONS:
- Terlalu panjang
- Vague ("OK", "Submit")
- No visual hierarchy
- Too many options (>3 for buttons)

Flow Design:

✅ GOOD FLOW:
- Max 3-4 steps
- Always provide back/cancel option
- Confirm before final action
- Clear progress indication

❌ BAD FLOW:
- Too many steps
- No way to go back
- Confusing navigation
- Dead ends

FAQ

Apakah unofficial API support buttons?

Tidak. Interactive messages (buttons, lists) hanya available di WhatsApp Cloud API (official).

Max berapa buttons?

Reply buttons: 3, List menu: 10 sections × 10 items, CTA: 2 (1 URL + 1 phone).

Buttons vs keyboard quick replies?

Buttons tampil di message, quick replies di keyboard. Buttons lebih visible dan universal.

Kesimpulan

Buttons = Better UX!

Upgrade to interactive messages!

Setup Interactive Bot →

Artikel Terkait

• WhatsApp Cloud API Guide
• Cara Balas WA dengan Menu
• Auto Reply WA Conditional Logic