Componentes de plantillas

Las plantillas constan de cuatro componentes principales que se definen cuando se crea una: encabezado, cuerpo, pie de página y botones. Los componentes que elijas para tus plantillas deben basarse en las necesidades de tu negocio. El único componente necesario es el cuerpo.

Algunos componentes admiten variables, cuyos valores puedes proporcionar cuando usas la API de la nube o la API de instalaciones locales para enviar la plantilla en un mensaje de plantilla. Si tus plantillas usan variables, cuando las creas, es necesario incluir ejemplos de valores de variables.

Encabezados

Los encabezados son componentes opcionales que aparecen en la parte superior de los mensajes de plantillas. Los encabezados admiten texto, contenido multimedia (imágenes, videos, documentos) y ubicaciones. Las plantillas se limitan a un componente de encabezado.

Encabezados de texto

Sintaxis

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

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

Propiedades

Ejemplo:

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

Encabezados de contenido multimedia

Los encabezados de contenido multimedia pueden ser una imagen, un video o un documento (por ejemplo, un PDF). Todos los contenidos multimedia se deben subir con la API de subida reanudable. La sintaxis para definir un encabezado de contenido multimedia es la misma para todos los tipos de medios.

Sintaxis

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

Propiedades

Ejemplo:

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

Encabezados de ubicación

Los encabezados de ubicación aparecen como mapas genéricos en la parte superior de la plantilla y son útiles para el seguimiento de pedidos, actualizaciones de entrega, recogida o entrega de servicios de transporte, localización de tiendas físicas, etc. Cuando se tocan, se abre la app de mapa predeterminada del usuario de la app y carga la ubicación especificada. Se especifican las ubicaciones cuando envías la plantilla mediante la API de la nube o la API de instalaciones locales.

Los encabezados de ubicación solo pueden usarse en las plantillas categorizadas como UTILITY o MARKETING. No se admiten las ubicaciones en tiempo real.

Sintaxis

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

Propiedades

Los valores de propiedades no se pueden personalizar.

Ejemplo:

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

Cuerpo

Los componentes de cuerpo son componentes de solo texto y son obligatorios para todas las plantillas. Las plantillas se limitan a un componente de cuerpo.

Sintaxis

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

Propiedades

Ejemplo:

{
  "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%"
        ]
      ]
    }
}

Pie de página

Los pies de página son componentes opcionales de solo texto que aparecen inmediatamente después del componente de cuerpo. Las plantillas se limitan a un componente de pie de página.

Sintaxis

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

Propiedades

Ejemplo:

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

Botones

Los botones son componentes interactivos opcionales que realizan acciones concretas cuando se los toca. Las plantillas pueden tener una mezcla de hasta 10 componentes de botones en total. No obstante, hay límites para los botones individuales del mismo tipo y, también, para las combinaciones. Estos límites se describen a continuación.

Los botones se definen dentro de un único objeto del componente de botones y se incluyen en una sola matriz buttons. Por ejemplo, esta plantilla usa un botón de número de teléfono y un botón de URL:

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

Si una plantilla tiene más de tres botones, dos botones aparecerán en el mensaje entregado y los botones restantes se reemplazarán con un botón Ver todas las opciones. Al tocar el botón Ver todas las opciones, se revelan los botones restantes.

Botones de copiar código

Cuando el usuario de la app presiona los botones de copiar código, puede copiar una cadena de texto (que se define cuando se envía la plantilla en un mensaje de plantilla) en el portapapeles del dispositivo. Las plantillas están limitadas a un botón de copiar código.

Sintaxis

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

Propiedades

Ejemplo:

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

Botones de procesos

Los botones de procesos se utilizan para enviar mensajes de procesos como plantillas. Las plantillas están limitadas a un botón de procesos.

Los procesos se pueden crear rápidamente en Playground y adjuntar con formato JSON, o bien se puede especificar un identificador de proceso anterior.

Sintaxis

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

Propiedades

Ejemplo:

{
  "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": {}
        }
    ]
  }
}

Botones de MPM

Los botones de mensajes multiproducto (MPM) son botones especiales que no se pueden personalizar. Cuando se los toca, muestran hasta 30 productos de tu catálogo de comercio electrónico, organizados en un máximo de 10 secciones, en un solo mensaje. Consulta Plantillas de mensajes multiproducto.

Botones de OTP

Los botones de contraseña de un solo uso (OTP) son un tipo especial de componente botón de URL, y se utilizan con plantillas de autenticación. Consulta Plantillas de autenticación.

Botones de número de teléfono

Los números de botón de teléfono llaman al número de teléfono del negocio específico cuando el usuario de la app los toca. Las plantillas se limitan a un botón de número de teléfono.

Sintaxis

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

Propiedades

Ejemplo:

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

Botones de respuesta rápida

Los botones de respuesta rápida son botones personalizados de solo texto que te envían inmediatamente un mensaje con la cadena de texto especificada cuando el usuario de la app los toca. Una caso de uso común es un botón que permite a tu cliente dejar de recibir fácilmente cualquier mensaje de marketing.

Las plantillas se limitan a 10 botones de respuesta rápida. Si se utilizan botones de respuesta rápida con otros botones, los botones deben organizarse en dos grupos: botones de respuesta rápida y botones de respuesta no rápida. Si se agrupan incorrectamente, la API devolverá un error que indica que una combinación no es válida.

Ejemplos de grupos válidos:

• Respuesta rápida, respuesta rápida
• Respuesta rápida, respuesta rápida, URL, teléfono
• URL, teléfono, respuesta rápida, respuesta rápida

Ejemplos de grupos no válidos:

• Respuesta rápida, URL, respuesta rápida
• URL, respuesta rápida, URL

Cuando se usa la API de la nube o la API de instalaciones locales para enviar una plantilla que tiene múltiples botones de respuesta rápida, puedes usar la propiedad de índice para designar el orden en el que aparecerán los botones en el mensaje de la plantilla.

Sintaxis

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

Propiedades

Ejemplo:

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

Botones de SPM

Los botones de mensajes de un solo producto (SPM) son botones especiales que no se pueden personalizar y se pueden asignar a un producto de tu catálogo. Cuando se los toca, cargan detalles sobre el producto, que extraen de tu catálogo. Luego, los usuarios pueden agregar al producto su tarjeta y realizar un pedido. Consulta Plantillas de mensajes de un solo producto y Plantillas de secuencias de tarjetas de productos.

Botones de URL

Los botones de URL cargan la URL especificada en el navegador web predeterminado del dispositivo cuando el usuario de la app los toca. Las plantillas se limitan a dos botones URL.

Sintaxis

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

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

Propiedades

Ejemplo:

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

Oferta por tiempo limitado

Los componentes de oferta por tiempo limitado son componentes especiales que se usan para crear plantillas de ofertas por tiempo limitado.

Ejemplo de solicitudes

Promoción estacional

Un ejemplo de solicitud de creación de una plantilla de marketing con los siguientes componentes:

• un encabezado de texto con una variable y un valor de muestra
• un cuerpo de texto con variables y valores de muestra
• un pie de página de texto
• dos botones de respuesta rápida

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"
        }
      ]
    }
  ]
}'

Confirmación de pedido

Un ejemplo de solicitud de creación de una plantilla de servicio público con los siguientes componentes:

• un encabezado de documento con un valor de muestra
• un cuerpo de texto con variables y valores de muestra
• un botón de número de teléfono
• un botón de 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"
        }
      ]
    }
  ]
}'

Actualización de entrega del pedido

Un ejemplo de solicitud de creación de una plantilla de servicio público con los siguientes componentes:

• un encabezado de ubicación
• un cuerpo de texto con variables y valores de muestra
• un pie de página
• un botón de respuesta rápida

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 actualización de componentes

Suscríbete al campo de webhook message_template_components_update para recibir notificaciones de los cambios realizados en los componentes de una plantilla, como un cambio en el título o el cuerpo, o la adición de un botón.

Formato de respuesta de 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>
  }
]

Ejemplo de respuesta de 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”
  }
]

Campos de respuesta de webhook