Send interactive buttons

Kirimdev exposes WhatsApp’s interactive button surface as type: "interactive" with one of four nested subtypes: cta_url (this page), reply_buttons (Send reply buttons), list (Send lists), and carousel (a horizontally scrollable strip of cards — see the API reference for the full schema).

A CTA URL button replaces a raw URL in the message body with a labelled tap target — better click-through and no exposed link. For in-conversation choices (Confirm / Cancel / etc.) that route back to your webhook instead of opening a browser, use reply buttons instead.

cURL

curl -X POST \
  https://api.kirimdev.com/v1/$PHONE_ID/messages \
  -H "Authorization: Bearer $KIRIM_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "messaging_product": "whatsapp",
    "to": "+628123456789",
    "type": "interactive",
    "interactive": {
      "type": "cta_url",
      "body": { "text": "Pesananmu siap diambil." },
      "action": {
        "name": "cta_url",
        "parameters": {
          "display_text": "Lihat detail",
          "url": "https://example.com/orders/42"
        }
      }
    }
  }'

TypeScript SDK

import { Kirim } from '@kirimdev/sdk'

const kirim = new Kirim({ apiKey: process.env.KIRIM_KEY! })
const phone = kirim.phoneNumbers(process.env.PHONE_ID!)

await phone.messages.send({
  messaging_product: 'whatsapp',
  to: '+628123456789',
  type: 'interactive',
  interactive: {
    type: 'cta_url',
    body: { text: 'Pesananmu siap diambil.' },
    action: {
      name: 'cta_url',
      parameters: {
        display_text: 'Lihat detail',
        url: 'https://example.com/orders/42',
      },
    },
  },
})

Optional header and footer

Add a header (text / image / video / document) and/or a short footer line to give the button context. Mirrors Meta’s interactive CTA URL message shape 1:1.

cURL

curl -X POST \
  https://api.kirimdev.com/v1/$PHONE_ID/messages \
  -H "Authorization: Bearer $KIRIM_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "messaging_product": "whatsapp",
    "to": "+628123456789",
    "type": "interactive",
    "interactive": {
      "type": "cta_url",
      "header": {
        "type": "image",
        "image": { "link": "https://cdn.example.com/order-banner.png" }
      },
      "body": { "text": "Pesananmu siap diambil." },
      "footer": { "text": "Pickup sebelum 20:00 WIB" },
      "action": {
        "name": "cta_url",
        "parameters": {
          "display_text": "Lihat detail",
          "url": "https://example.com/orders/42"
        }
      }
    }
  }'

TypeScript SDK

await phone.messages.send({
  messaging_product: 'whatsapp',
  to: '+628123456789',
  type: 'interactive',
  interactive: {
    type: 'cta_url',
    header: {
      type: 'image',
      image: { link: 'https://cdn.example.com/order-banner.png' },
    },
    body: { text: 'Pesananmu siap diambil.' },
    footer: { text: 'Pickup sebelum 20:00 WIB' },
    action: {
      name: 'cta_url',
      parameters: {
        display_text: 'Lihat detail',
        url: 'https://example.com/orders/42',
      },
    },
  },
})

Header variants:

header.type	Extra field	Notes
text	text (≤60 chars)	Bold headline above the body
image	image.link (public HTTPS URL)	Rendered inline above the body
video	video.link (public HTTPS URL)	Inline playable preview
document	document.link (public HTTPS URL)	Inline attachment tile

Limits

Field	Limit
header.text	1–60 chars (text header only)
body.text	1–1024 chars
footer.text	1–60 chars
parameters.display_text	1–20 chars
parameters.url	Valid HTTPS URL

Caution

Interactive messages — like all free-form sends — only work inside the 24-hour customer service window. Outside that window WhatsApp returns 131047 (Re-engagement required); use a template instead.

See also

• Send reply buttons — quick-reply (up to 3) that webhook back
• Send interactive lists
• API Reference — Send a WhatsApp message (see the Interactive request-body tab)