WhatsApp Business API for product catalog — interactive list

Use case overview

This scenario sends an interactive list with sendList during the 24-hour session window. Two sections group product rows; the client opens the catalog and selects an item.

Template example

Browse our catalog for {{1}}:

Section titles, row ids, and the catalog button label are defined in the integration contract.

Variables and purpose

• {{1}} — campaign or product context shown in the list header text

Filled-in example

Browse our catalog for spring promotion:

When to use it

• whatsapp sales campaigns

Business value

• Campaign trigger opens or continues the WhatsApp session window
• Interactive list message shows two sections with two products each
• Client taps View catalog and selects a product row
• Webhook delivers the product id to the sales or ecommerce backend
• CRM or OMS continues the purchase flow with the chosen SKU

Workflow

1. A campaign event or client reply keeps the session open.
2. Your backend builds a two-section interactive list with product rows.
3. The client taps View catalog and selects a product.
4. The webhook returns the row id for order or CRM processing.
5. Delivery progress is reported asynchronously — typically sent, then delivered (or failed/undelivered).
6. Your system receives status via webhook (hooks[]) or polls delivery status and handles failures if needed.

Technical implementation

Prerequisites

• An open WhatsApp session window and inbound webhook for list replies.
• 1MSG channel with sendList access and product ids mapped in your backend.

Code examples

#!/usr/bin/env node

// === Configuration (replace "___" placeholders) ===
const API_BASE_URL = "https://api.1msg.io"; // production 1MSG API base URL
const CHANNEL_ID = "___";                   // channel ID from 1MSG dashboard
const API_TOKEN = "___";                    // channel JWT token (Bearer)



// === Test data ===
const TEST_PHONE = "___";            // client phone in international format · requires open 24-hour session window
const TEST_PRODUCTCONTEXT = "___";    // {{1}} product context

function normalizePhone(phone) {
  return String(phone).replace(/\D/g, "");
}

async function sendInteractiveListMessage({ phone, productContext }) {
  const url = `${API_BASE_URL}/${CHANNEL_ID}/sendList`;
  const requestBody = {
    phone: normalizePhone(phone),
    body: `Browse our catalog for ${productContext}:`,
    buttonText: "View catalog",
    action: "catalog",
    sections: [
      {
        title: "Featured products",
        rows: [
          { id: "prod_alpha", title: "Alpha Widget", description: "Compact model" },
          { id: "prod_beta", title: "Beta Widget", description: "Standard model" }
        ],
      },
      {
        title: "Bundles",
        rows: [
          { id: "bundle_starter", title: "Starter pack", description: "Two items included" },
          { id: "bundle_pro", title: "Pro pack", description: "Four items included" }
        ],
      }
    ],
  };

  const res = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${API_TOKEN}`,
    },
    body: JSON.stringify(requestBody),
  });

  const raw = await res.text();
  let data;
  try {
    data = JSON.parse(raw);
  } catch {
    data = null;
  }

  if (!res.ok || !data || data.sent !== true) {
    console.error("Send failed.");
    console.error(raw);
    process.exit(1);
  }

  console.log("Message sent to client.");
  return data;
}

if (require.main === module) {
  sendInteractiveListMessage({
    phone: TEST_PHONE,
    productContext: TEST_PRODUCTCONTEXT,
  }).catch((err) => {
    console.error("Execution failed:", err.message);
    process.exit(1);
  });
}

module.exports = { sendInteractiveListMessage };

Immediate API response (synchronous)

• HTTP 2xx and JSON "sent": true mean 1MSG accepted the message for sending — not that it already reached the customer's phone.
• Save the `id` field from the response (value looks like wamid.…). Use it to correlate delivery callbacks or polling.
• The response may also include message and description — informational only.

Delivery status (asynchronous)

• Register a webhook (POST …/webhook) so 1MSG POSTs delivery updates to your HTTPS endpoint in a separate `hooks[]` payload (sent, delivered, read, or failed/undelivered when applicable).
• Optionally poll: GET {base}/{channel}/hookInfo?messageId=<id from sendTemplate>.
• In practice, delivery often completes within a few seconds — but that is not guaranteed by the API contract.

Common errors

• Session window closed (no client message within 24 hours)
• Invalid or non-normalized phone number
• Missing or invalid message body / media URL
• Delivery failure — check status webhook and retry policy

FAQ

• Do I need a template? No — this scenario uses a session message inside the 24-hour customer service window.
• When does the session window close? If the client has not written or replied within 24 hours, sendMessage will fail until a template reopens the chat.
• How do I check delivery? sent: true only confirms acceptance. Track delivery via webhook hooks[] or polling.
• What if the message is not delivered? Log the failed/undelivered hook, verify the session window, then retry or use a template.
• Can I connect this to my CRM or backend? Yes — trigger the API call from your inbound webhook or workflow engine.

Related

• Knowledge base
• Creating a template
• Sending a template
• SDK