Composants du modèle

Les modèles utilisent principalement quatre composants que vous pouvez définir au moment de la création : en-tête, corps, pied de page et boutons. Les composants que vous choisissez pour chacun de vos modèles dépendent des besoins de votre entreprise Le seul composant obligatoire est le corps.

Certains composants prennent en charge des variables dont vous pouvez fournir les valeurs lorsque vous utilisez l’API Cloud ou l’API On-Premises, l’objectif étant d’envoyer le modèle dans un message avec modèle. Si vos modèles utilisent des variables, vous devez inclure des exemples de valeurs lors de leur création.

En-têtes

Les en-têtes sont des composants facultatifs qui s’affichent en haut des messages avec modèle. Les en-têtes acceptent du texte, des contenus multimédias (images, vidéos, documents) et des lieux. Les modèles sont limités à un seul en-tête.

En-têtes contenant du texte

Syntaxe

{
  "type": "HEADER",
  "format": "TEXT",
  "text": "<TEXT>",

  # Required if <TEXT> string contains variables
  "example": {
    "header_text": [
      "<HEADER_TEXT>"
    ]
  }
}

Propriétés

Exemple

{
  "type": "HEADER",
  "format": "TEXT",
  "text": "Our {{1}} is on!",
  "example": {
    "header_text": [
      "Summer Sale"
    ]
  }
}

En-têtes avec contenus multimédias

Les en-têtes avec des contenus multimédias peuvent contenir une image, une vidéo ou un document tel qu’un PDF. Tous les contenus multimédias doivent être importés en utilisant l’API Upload avec reprise. La syntaxe pour définir un en-tête avec contenu multimédia est la même pour tous les types de contenus multimédias.

Syntaxe

{
  "type": "HEADER",
  "format": "<FORMAT>",
  "example": {
    "header_handle": [
      "<HEADER_HANDLE>"
    ]
  }
}

Propriétés

Exemple

{
  "type": "HEADER",
  "format": "IMAGE",
  "example": {
    "header_handle": [
      "4::aW..."
    ]
  }
}

En-têtes contenant un lieu

Les en-têtes contenant un lieu ressemblent à des cartes génériques et se situent en haut du modèle. Ils sont particulièrement utiles pour suivre des commandes ou des livraisons, réserver un taxi, localiser une boutique, etc. Lorsque vous appuyez dessus, l’application de localisation par défaut des utilisateur·ices s’ouvre et charge le lieu spécifié. Les lieux sont définis lorsque vous envoyez le modèle avec l’API Cloud ou l’API On-Premises.

Les en-têtes contenant un lieu peuvent être utilisés uniquement dans les modèles appartenant à la catégorie UTILITY ou MARKETING. La localisation en temps réel n’est pas prise en charge.

Syntaxe

{
  "type": "HEADER",
  "format": "LOCATION"
}

Propriétés

Les valeurs des propriétés ne peuvent pas être personnalisées.

Exemple

{
  "type": "HEADER",
  "format": "LOCATION"
}

Corps

Les composants du corps sont des composants de type texte uniquement. Ils sont requis par tous les modèles. Les modèles sont limités à un seul composant corps.

Syntaxe

{
  "type": "BODY",
  "text": "<TEXT>",
  
  # Required if <TEXT> string contains variables
  "example": {
    "body_text": [
      [
        <BODY_TEXT>
      ]
    ]
  }
}

Propriétés

Exemple

{
  "type": "BODY",
  "text": "Shop now through {{1}} and use code {{2}} to get {{3}} off of all merchandise.",
    "example": {
      "body_text": [
        [
          "the end of August","25OFF","25%"
        ]
      ]
    }
}

Pied de page

Les pieds de page sont des composants facultatifs qui contiennent uniquement du texte et qui apparaissent immédiatement après le composant corps. Les modèles sont limités à un seul composant pied de page.

Syntaxe

{
  "type": "FOOTER",
  "text": "<TEXT>"
}

Propriétés

Exemple

{
  "type": "FOOTER",
  "text": "Use the buttons below to manage your marketing subscriptions"
}

Boutons

Les boutons sont des composants interactifs facultatifs qui effectuent des actions spécifiques lorsque l’utilisateur·ice appuie dessus. Un modèle peut contenir un maximum de 10 boutons divers, bien qu’il y ait des limites associées aux types et aux combinaisons de boutons. Vous trouverez une description de ces limites ci-dessous.

Les boutons sont tous définis sous forme de tableau dans un objet buttons unique. Par exemple, le modèle suivant utilise un bouton associé à un numéro de téléphone et un bouton associé à une URL :

{
  "type": "BUTTONS",
  "buttons": [
    {
      "type": "PHONE_NUMBER",
      "text": "Call",
      "phone_number": "15550051310"
    },
    {
      "type": "URL",
      "text": "Shop Now",
      "url": "https://www.luckyshrub.com/shop/"
    }
  ]
}

Lorsqu’un modèle comprend plus de trois boutons, deux boutons apparaissent dans le message distribué et les autres sont remplacés par un bouton Voir toutes les options. Un appui sur le bouton Voir toutes les options fait apparaître les boutons restants.

Boutons de copie de code

Les boutons de copie de code copient une chaîne de texte (définie lors de l’envoi d’un message basé sur le modèle concerné) dans le presse-papiers de l’appareil lorsque l’utilisateur·ice de l’application appuie dessus. Les modèles sont limités à un bouton de copie de code.

Syntaxe

{
  "type": "COPY_CODE",
  "example": "<EXAMPLE>"
}

Propriétés

Exemple

{
  "type": "COPY_CODE",
  "example": "250FF"
}

Boutons de parcours Flows

Les boutons de parcours Flows permettent d’envoyer des messages Flows à l’aide de modèles. Les modèles sont limités à un bouton de parcours Flows.

Il est possible de générer rapidement des parcours Flows dans le terrain de jeux et de les joindre en tant qu’éléments JSON, ou de spécifier un ID de parcours Flows existant.

Syntaxe

{
  "type": "FLOW",
  "text": "<TEXT>",
  "flow_id": "<FLOW_ID>",
  "flow_json": "<FLOW_JSON>", 
  "flow_action": "<FLOW_ACTION>",
  "navigate_screen": "<NAVIGATE_SCREEN>"
}

Propriétés

Exemple

{
  "type": "FLOW",
  "text": "Sign up",
  "flow_action": "navigate",
  "navigate_screen": "WELCOME_SCREEN"
  "flow_json" : {
    "version": "3.1",
    "screens": [
        {
            "id": "WELCOME_SCREEN",
            "layout": {
                "type": "SingleColumnLayout",
                "children": [
                    {
                        "type": "TextHeading",
                        "text": "Hello World"
                    },
                    {
                        "type": "TextBody",
                        "text": "Let's start building things!"
                    },
                    {
                        "type": "Footer",
                        "label": "Complete",
                        "on-click-action": {
                            "name": "complete",
                            "payload": {}
                        }
                    }
                ]
            },
            "title": "Welcome",
            "terminal": true,
            "success": true,
            "data": {}
        }
    ]
  }
}

Boutons de messages multiproduits

Les boutons de message multi-produit sont des boutons spéciaux, non personnalisables, qui affichent dans un même message jusqu’à 30 produits de votre catalogue e-commerce, répartis dans 10 sections maximum. Consultez la page Modèles de messages multiproduits.

Boutons de mot de passe à usage unique

Les boutons de mot de passe à usage unique sont un type spécifique de bouton d’URL utilisé dans les modèles d’authentification. Consultez la page Modèles d’authentification.

Boutons de numéro de téléphone

Les boutons associés à un numéro de téléphone appellent le numéro de téléphone professionnel spécifié lorsque l’utilisateur·ice de l’application appuie dessus. Les modèles sont limités à un bouton de numéro de téléphone.

Syntaxe

{
  "type": "PHONE_NUMBER",
  "text": "<TEXT>",
  "phone_number": "<PHONE_NUMBER>"
}

Propriétés

Exemple

{
  "type": "PHONE_NUMBER",
  "text": "Call",
  "phone_number": "15550051310"
}

Boutons de réponse rapide

Les boutons de message rapide sont des boutons personnalisés contenant du texte uniquement. Ils envoient immédiatement un message avec la chaîne de texte spécifiée lorsque l’utilisateur·ice de l’application appuie dessus. Parmi les exemples d’utilisation, citons un bouton qui permet à un·e utilisateur·ice de facilement se désinscrire de toute communication marketing.

Les modèles sont limités à 10 boutons de réponse rapide. Si vous utilisez des boutons de réponse rapide et d’autres types de boutons, vous devez répartir les boutons dans deux groupes afin de séparer les boutons de réponse rapide des autres boutons. Si les boutons ne sont pas regroupés correctement, l’API renvoie une erreur indiquant une combinaison non valide.

Exemples de regroupements valides :

• Réponse rapide, réponse rapide
• Réponse rapide, réponse rapide, URL, téléphone
• URL, téléphone, réponse rapide, réponse rapide

Exemples de regroupements non valides :

• Réponse rapide, URL, réponse rapide
• URL, réponse rapide, URL

Lorsque vous utilisez l’API Cloud ou l’API On-Premises pour envoyer des messages basés sur un modèle qui possède plusieurs boutons de réponse rapide, vous pouvez utiliser la propriété index pour indiquer l’ordre dans lequel ces boutons doivent apparaître.

Syntaxe

{
  "type": "QUICK_REPLY",
  "text": "<TEXT>"
}

Propriétés

Exemple

{
  "type": "QUICK_REPLY",
  "text": "Unsubscribe from Promos"
}

Boutons de message sur un produit unique

Les boutons de message sur un produit unique sont des boutons spéciaux, non personnalisables, qui peuvent être associés à un produit de votre catalogue. Lorsqu’ils sont activés, ils affichent les détails du produit, récupérés depuis votre catalogue. Les utilisateur·ices peuvent ensuite ajouter le produit à leur panier et passer commande. Consultez les pages concernant les Modèles de messages sur un produit unique et Modèles de carrousel de fiches produits .

Boutons associés à une URL

Les boutons associés à une URL chargent l’URL spécifiée dans le navigateur Web par défaut de l’appareil lorsque l’utilisateur·ice de l’application appuie dessus. Les modèles sont limités à deux boutons d’URL.

Syntaxe

{
  "type": "URL",
  "text": "<TEXT>",
  "url": "<URL>",

  # Required if <URL> contains a variable
  "example": [
    "<EXAMPLE>"
  ]
}

Propriétés

Exemple

{
  "type": "URL",
  "text": "Shop Now",
  "url": "https://www.luckyshrub.com/shop?promo={{1}}",
  "example": [
    "summer2023"
  ]
}

Offre à durée limitée

Les offres à durée limitée sont des composants spéciaux permettant de créer des modèles d’offres à durée limitée.

Exemples de requêtes

Promotion saisonnière

Exemple de requête visant à créer un modèle marketing avec les composants suivants :

• un en-tête sous forme de texte contenant une variable et un exemple de valeur
• un corps de texte contenant des variables et des exemples de valeurs
• un pied de page textuel
• deux boutons de réponse rapide

curl -L 'https://graph.facebook.com/v21.0/102290129340398/message_templates' \
-H 'Authorization: Bearer EAAJB...' \
-H 'Content-Type: application/json' \
-d '
{
  "name": "seasonal_promotion",
  "language": "en_US",
  "category": "MARKETING",
  "components": [
    {
      "type": "HEADER",
      "format": "TEXT",
      "text": "Our {{1}} is on!",
      "example": {
        "header_text": [
          "Summer Sale"
        ]
      }
    },
    {
      "type": "BODY",
      "text": "Shop now through {{1}} and use code {{2}} to get {{3}} off of all merchandise.",
      "example": {
        "body_text": [
          [
            "the end of August","25OFF","25%"
          ]
        ]
      }
    },
    {
      "type": "FOOTER",
      "text": "Use the buttons below to manage your marketing subscriptions"
    },
    {
      "type":"BUTTONS",
      "buttons": [
        {
          "type": "QUICK_REPLY",
          "text": "Unsubscribe from Promos"
        },
        {
          "type":"QUICK_REPLY",
          "text": "Unsubscribe from All"
        }
      ]
    }
  ]
}'

Confirmation de commande

Exemple de requête visant à créer un modèle utilitaire avec les composants suivants :

• un en-tête sous forme de document contenant un exemple de valeur
• un corps de texte contenant des variables et des exemples de valeurs
• un bouton associé à un numéro de téléphone
• un bouton associé à une URL

curl -L 'https://graph.facebook.com/v16.0/102290129340398/message_templates' \
-H 'Authorization: Bearer EAAJB...' \
-H 'Content-Type: application/json' \
-d '
{
  "name": "order_confirmation",
  "language": "en_US",
  "category": "UTILITY",
  "components": [
    {
      "type": "HEADER",
      "format": "DOCUMENT",
      "example": {
        "header_handle": [
          "4::YX..."
        ]
      }
    },
    {
      "type": "BODY",
      "text": "Thank you for your order, {{1}}! Your order number is {{2}}. Tap the PDF linked above to view your receipt. If you have any questions, please use the buttons below to contact support. Thank you for being a customer!",
      "example": {
        "body_text": [
          [
            "Pablo","860198-230332"
          ]
        ]
      }
    },
    {
      "type": "BUTTONS",
      "buttons": [
        {
          "type": "PHONE_NUMBER",
          "text": "Call",
          "phone_number": "15550051310"
        },
        {
          "type": "URL",
          "text": "Contact Support",
          "url": "https://www.luckyshrub.com/support"
        }
      ]
    }
  ]
}'

Informations sur la livraison d’une commande

Exemple de requête visant à créer un modèle utilitaire avec les composants suivants :

• un en-tête contenant un lieu
• un corps de texte contenant des variables et des exemples de valeurs
• un pied de page
• un bouton de réponse rapide

curl 'https://graph.facebook.com/v21.0/102290129340398/message_templates' \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer EAAJB...' \
-d '
{
  "name": "order_delivery_update",
  "language": "en_US",
  "category": "UTILITY",
  "components": [
    {
      "type": "HEADER",
      "format": "LOCATION"
    },
    {
      "type": "BODY",
      "text": "Good news {{1}}! Your order #{{2}} is on its way to the location above. Thank you for your order!",
      "example": {
        "body_text": [
          [
            "Mark",
            "566701"
          ]
        ]
      }
    },
    {
      "type": "FOOTER",
      "text": "To stop receiving delivery updates, tap the button below."
    },
    {
      "type":"BUTTONS",
      "buttons": [
        {
          "type": "QUICK_REPLY",
          "text": "Stop Delivery Updates"
        }
      ]
    }
  ]
}'

Webhook de mise à jour d’un composant

Abonnez-vous au webhook message_template_components_update pour recevoir une notification en cas de changement d’un composant d’un modèle, comme la modification du titre ou du corps, ou l’ajout d’un bouton.

Format de la réponse du webhook

"message_template_id": <id>,
"message_template_name": <string>,
"message_template_language": <string>,
"message_template_title": <string>,
"message_template_element": <string>,
"message_template_footer": <string>,
"message_template_buttons": [
  {
    "message_template_button_type": <string>,
    "message_template_button_text": <string>,
    "message_template_button_url": <string>,
    "message_template_button_phone_number": <string>
  }
]

Exemple de réponse du webhook

"message_template_id": 1234567890,
"message_template_name": “promo_summer_sale_11_en”,
"message_template_language": “en_US”,
"message_template_title": “header”,
"message_template_element": “body”,
"message_template_footer": “footer”,
"message_template_buttons": [
  {
    "message_template_button_type": URL,
    "message_template_button_text": “click me”,
    "message_template_button_url": “https://www.example.com”,
    "message_template_button_phone_number": “+1(123)4565678”
  }
]

Champs de réponse du webhook