Posts under category Facebook WhatsApp Business API

I am integrating the WhatsApp Business API into my website, and everything works fine during the creation of a template. However, I am encountering an issue when updating a carousel template that contains media (image) in the header.

**Here’s the data I provide during template creation, and it works perfectly: **

{     "category": "MARKETING",     "components": [         {             "type": "BODY",             "text": "Enter the text for your message in the language that you've selected."         },         {             "type": "HEADER",             "format": "IMAGE",             "example": {                 "header_handle": [                     "https://scontent.whatsapp.net/v/t61.29466-34/455307745_840177258275973_4917068164528515056_n.jpg?ccb=1-7&_nc_sid=8b1bef&_nc_ohc=JhgXpTB6hb8Q7kNvgGo4C8z&_nc_ht=scontent.whatsapp.net&edm=AH51TzQEAAAA&_nc_gid=AYrC8T5SS1pa7iuvimhJfWi&oh=01_Q5AaIDQYeMKQIW57cK89ejtgUrwADCGDyq30TZQusIPOCDmo&oe=672C6BF5"                 ]             }         }     ] } 

However, when I try to update a carousel template with similar image data, I receive the following error:

This carousel template contains a card (index=0) with an invalid media sample.

Here’s the data I send during the update, which throws the error:

{     "category": "MARKETING",     "components": [         {             "type": "BODY",             "text": "12324"         },         {             "type": "CAROUSEL",             "cards": [                 {                     "components": [                         {                             "type": "HEADER",                             "format": "IMAGE",                             "example": {                                 "header_handle": [                                     "https://scontent.whatsapp.net/v/t61.29466-34/421261359_838328285127784_2325180770850864310_n.jpg?ccb=1-7&_nc_sid=a80384&_nc_ohc=CvDs5MWLqggQ7kNvgEuowZS&_nc_ht=scontent.whatsapp.net&edm=AH51TzQEAAAA&_nc_gid=AThnla93YjSTDzg4e3-2eDa&oh=01_Q5AaID-Ozb7JEZ-dNOAYQlxmks79b0nfTElne8ZqRD14ZtFV&oe=672C57BB"                                 ]                             }                         },                         {                             "type": "BODY",                             "text": "234525"                         },                         {                             "type": "BUTTONS",                             "buttons": [                                 {                                     "type": "QUICK_REPLY",                                     "text": "2452"                                 }                             ]                         }                     ]                 }             ]         }     ] } 

What I've Tried:

  • The image URL is valid and works fine for non-carousel templates.
  • The URL is provided by Meta after uploading the media.
  • I suspect the issue might be related to how the API validates media for carousel components.

Question:

Why does the same image URL work for a regular template but result in an "invalid media sample" error for a carousel template? Does the WhatsApp API require a media ID for carousel updates, even if the URL is valid? How should I handle image media in carousel templates to avoid this error?

Any insights or suggestions are appreciated. Thanks in advance!

I have been verified as Tech Provider for Whatsapp. I have implemented the embedded signup flow for Whats app and doing the following thing:

  1. Exchange the token with system user access token
  2. Get WABA ID (via Graph API)
  3. Get Phone Number ID (via Graph API)
  4. Register Phone Number (via Graph API)
  5. Subscribing For Webhook Notifications (via Graph API)

All other requests work fine except the last one, subscribing for Webhook Notifications. It gives the following exception:

Unsupported post request. Object with ID '475530585635833' does not exist, cannot be loaded due to missing permissions, or does not support this operation. Please read the Graph API documentation at https://developers.facebook.com/docs/graph-api 

Has any body experienced the same? Any workaround/solution?

Here is the code:

This is the sequence in which the requests are made:

// 1. Obtain exchanged token const exchangedToken = await this.exchangeFacebookCode(code);console.log("exchangedToken:", exchangedToken); // 2. Obtain WABA ID const wabaId = await this.fetchWABA(exchangedToken); console.log("wabaId:", wabaId); // 3. Obtain Phone Number ID const number = await this.fetchPhoneNumber(exchangedToken, wabaId); console.log("number:", number); // 4. Register Phone Number await this.registerPhoneNumber(exchangedToken, number.id); // 5. Subscribe to Webhook await this.subscribeToWebhook(exchangedToken, wabaId); return { id: number.id, number: number.display_phone_number}; 

These are the method implementation

private async exchangeFacebookCode(code: string): Promise<string> { const appId = "**********"; const appSecret = "**********"; try { const response = await firstValueFrom(this.httpService.get(`https://graph.facebook.com/v12.0/oauth/access_token?client_id=${appId}&client_secret=${appSecret}&code=${code}`));             console.log(JSON.stringify(response.data));             const { access_token: token } = response.data;             return token;         } catch (e) {             console.log("error:", e);             return undefined;         }     }     private async fetchWABA(token: string): Promise<string> {         try {             const observable = this.httpService.get(`https://graph.facebook.com/v21.0/debug_token?input_token=${token}`, {                 headers: {                     "Authorization": `Bearer ${token}`                 }             });             const response = await lastValueFrom(observable);             const { data } = response.data;             console.log("WABA response:", JSON.stringify(response.data));             const { granular_scopes: scopes } = data;             const scope = (scopes as any[]).find(scope => scope.scope === "whatsapp_business_management");             return scope.target_ids[0];         } catch (e) {             console.log("error:", e);             return undefined;         }     }     private async fetchPhoneNumber(token: string, wabaId: string): Promise<any> {         try {             const observable = this.httpService.get(`https://graph.facebook.com/v21.0/${wabaId}/phone_numbers?access_token=${token}`);             const response = await lastValueFrom(observable);             console.log("PhoneNumber ID response:", response.data);             const { data } = response.data;             const phoneNumber = data as any[];             return phoneNumber && phoneNumber.length > 0 && phoneNumber[0];         } catch (e) {             console.log("Error during fetch phone number:", e.response.data);         }     }     private async registerPhoneNumber(token: string, phoneNumberId: string): Promise<void> {         try {             const observable = this.httpService.post(`https://graph.facebook.com/v21.0/${phoneNumberId}/register`, {                 messaging_product: "whatsapp",                 pin: "123456"             }, {                 headers: {                     "Authorization": `Bearer ${token}`,                 }             });             const response = await lastValueFrom(observable);             console.log("Register response:", response.data);         } catch (e) {             console.log("Error during phone registration:", e);         }     }     private async subscribeToWebhook(token: string, wabaId: string): Promise<void> {         try {             const observable = this.httpService.post(`https://graph.facebook.com/v21.0/${wabaId}/subscribed_apps`, {                 headers: {                     "Authorization": `Bearer ${token}`                 }             });             const response = await lastValueFrom(observable);             console.log("Subscription response:", response.data);         } catch (e) {             console.log("Error during webhook subscription:", e.response.data);         }     } 

I'm trying to generate an access token for a system user(Employee) and getting "Error performing query" message. I was able to create tokens until yesterday but it started failing today. Also worth mentioning that my messages using the API were getting delivered until yesterday and then the delivery stopped all of a sudden. The API gives 200 but the messages are not getting delivered. Appears that something is wrong with the setup but unable to pinpoint, please help.