javascriptnode.jswhatsapp-cloud-api

How to send WhatsApp CTA Button Template using qontak api correctly?


I'm trying to send a cta button with API from qontak.com I already follow the docs written here https://github.com/mekari-engineering/qontak-api-js/blob/main/WhatsAppBroadcastAPI.md#send-cta-button but keep return error failed - (#132012) Parameter format does not match format in the created template.

Here the approved WhatsApp template

{
    "status": "success",
    "data": {
        "id": "{{Template-ID}}",
        "organization_id": "{{Organization-ID}}",
        "name": "worksheet_campaign_march_25",
        "language": "id",
        "header": {
            "format": "IMAGE",
            "example": "#\u003cHashie::Mash header_handle=#\u003cHashie::Array [\"https://scontent.whatsapp.net/v/t61.29466-34/485054434_1212933766832220_3284803780770593465_n.jpg?ccb=1-7\u0026_nc_sid=8b1bef\u0026_nc_ohc=k187ygJZX7oQ7kNvgF-2-8N\u0026_nc_oc=AdlPzUlOQi-02KCo7P2G07BpbKwVWtOgMIZ6i-hn-_7NXn8hnEKlooiI3nvEYYiPvkU\u0026_nc_zt=3\u0026_nc_ht=scontent.whatsapp.net\u0026edm=AH51TzQEAAAA\u0026_nc_gid=6z8rjTAczOrjVh3lKCDGHA\u0026oh=01_Q5AaIbvmRBghVd6DfHqscuw7n4URirPvCCK4K_rnd1Fxu7G0\u0026oe=680D3676\"]\u003e\u003e"
        },
        "body": "šŸ“¢ *Liburan Seru Tanpa Gadget untuk Buah Hati Anda!* šŸŽ‰\n\nHalo, Ayah Bunda! šŸ‘‹\n\nApakah Anda khawatir si kecil terlalu banyak menghabiskan waktu dengan gadget selama liburan? Kami punya solusi tepat untuk mengisi waktu mereka dengan aktivitas positif dan edukatif!​ Dengan worksheet dari *@kotaroisme*, anak-anak bisa tetap sibuk dengan cara yang menyenangkan dan edukatif. šŸ˜†\n\nPerkenalkan:  *Printable Math \u0026 Logic Belajar Programming pakai worksheet  untuk 5-10 tahun*šŸ–ļøšŸ“š\n\n*Dapatkan 3 eBook sekaligus:*\nšŸŽØ Worksheet – Cetak untuk anak\nšŸ“˜ Parents Guidance – Baca sebelum memulai\nšŸ”‘ Answer Key – Kunci jawaban pra\n\n*Kenapa harus punya?*\nāœ… Orang tua bisa kasih aktivitas positif di liburan tanpa gadget\nāœ… Meningkatkan keterampilan dasar matematika \u0026 logika\nāœ… Worth every penny – Investasi kecil, hasil maksimal!\n",
        "footer": null,
        "buttons": [
            {
                "url": "{{URL-Link}}",
                "text": "Dapatkan Sekarang",
                "type": "URL"
            }
        ],
        "status": "APPROVED",
        "category": "MARKETING",
        "quality_rating": null,
        "quality_rating_text": "Neutral",
        "type": "campaign",
        "analysis": "",
        "probability": 0.0
    }
}

Sending API return 201 (success) but the webhook status message is failed. and customer didnt receive the message.

async function sendCtaUrlMessage() {
  try {
    const withCtaURL =         {
      "to_name": "{{Customer-Name}}",
      "to_number": "{{Phone-Number}}",
      "message_template_id": "{{Template-ID}}",
      "channel_integration_id": "{{Channel-Integration-ID}}",
      "language": {
          "code": "id"
      },
      "parameters": {
          "buttons": [
            {
              "index": "0",
              "type": "URL",
              "value": "{{CTA-URL}}"
            }
          ],
          "body": []
      }
    }
    const response = await api.broadcast.createBroadcastDirect(withCtaURL)
    console.log("Response:", response);
  } catch (error) {
    console.error("Error:", error.response.data);
  }
}

sendCtaUrlMessage()

The webhook error message return error

{
    "code": 132012,
    "type": "OAuthException",
    "message": "(#132012) Parameter format does not match format in the created template",
    "error_data": {
        "details": "header: Format mismatch, expected IMAGE, received UNKNOWN",
        "messaging_product": "whatsapp"
    },
    "fbtrace_id": "AUVK8lXfNADsW_DpQunbIs3"
}

What can I try next?


Solution

  • I noticed something, although your message template is CTA button, but actually it is static link. and the parameters input is not match.

    Focus on this error message

    "details": "header: Format mismatch, expected IMAGE, received UNKNOWN",
    

    you just need to add header params instead of button. change the request to

    const withImageTemplate =         {
          "to_name": "{{Customer-Name}}",
          "to_number": "{{Phone-Number}}",
          "message_template_id": "{{Template-ID}}",
          "channel_integration_id": "{{Channel-ID}}",
          "language": {
              "code": "id"
          },
          "parameters": {
              "header": {
                "format": "IMAGE",
                "params": [
                  {
                    "key": "url",
                    "value": "https://cdn.qontak.com/uploads/direct/images/dda2caa6-52a0-43a4-9b0f-6e3fec97ff51/17C3A7F3-A68E-4A3A-A58C-FCE29757C3A5_1_105_c.jpeg"
                  },
                  {
                    "key": "filename",
                    "value": "mathlogicworksheet.jpeg"
                  }
                ]
              },
              "buttons": [],
              "body": []
          }
        }
    const response = await api.broadcast.createBroadcastDirect(withImageTemplate)
    

    Don't forget to upload file first then put the link in the header params.