Plataforma de WhatsApp Business

Plataforma de WhatsApp Business > API de la nube > Guías

Ejemplo de URL de devolución de llamada para probar webhooks

Puedes usar Glitch para clonar nuestra app de devolución de llamada de ejemplo y crear una URL de devolución de llamada pública en los servidores de Glitch, que puedes usar para probar webhooks. El objetivo de crear el proyecto de Glitch es escribir cargas de webhooks en un archivo de registro que puedes ver en tiempo real a medida que se activan los webhooks.

Antes de configurar un punto de conexión para pruebas de webhooks de la API de la nube

Esta guía es parte de un proceso de varios pasos. Es necesario que hayas completado algunos de estos pasos antes de comenzar a configurar el punto de conexión de la app de ejemplo con Glitch. Debes haber completado lo siguiente:

  1. Configurar activos de desarrollador y el acceso a la plataforma
  2. Enviar un mensaje de prueba
  3. Configurar un webhook

Puedes encontrar las instrucciones completas sobre cómo comenzar a usar la API de la nube de WhatsApp Business para enviar tu primer mensaje de prueba en Primeros pasos con la API de la nube de WhatsApp Business.

Configurar Glitch

  1. Visita glitch.com y crea una cuenta. De esta manera, puedes usar todas las funciones que se describen en esta guía y te aseguras de que la UI que se menciona y la que ves son iguales. Si no creas una cuenta, no verás la mayoría de las funciones de UI y tendrán aspectos diferentes.
  2. Después de configurar tu cuenta de Glitch, abre nuestra plantilla de proyecto inicial de Glitch mediante el siguiente enlace: Plantilla del proyecto de webhook de la plataforma de WhatsApp.
  3. Haz clic en el botón Remix to edit ubicado en la esquina superior derecha de la página de Glitch si deseas clonar nuestra app de ejemplo.
    Haz clic en "Remix to Edit" para crear tu propio proyecto de Glitch.
    Se creará una copia nueva del proyecto en tu cuenta.
  4. En el archivo .env, elige una cadena al azar para actualizar el valor de WEBHOOK_VERIFY_TOKEN. Luego, tienes la opción de copiar el valor del token de acceso temporal o permanente desde WhatsApp > Configuración de la API en el panel de apps y pegar dicho valor en GRAPH_API_TOKEN.
    Actualiza las variables del entorno de Glitch de tu proyecto
  5. Haz clic en Share en la parte superior derecha para obtener la URL del sitio. Agrega /webhook al final de la URL para obtener la URL de devolución de llamada completa. Será similar a esta: https://<project-name>.glitch.me/webhook.

Ahora que el punto de conexión está listo, debes regresar al panel de apps.

Configura el panel de apps con el punto de conexión y el token de verificación de Glitch

  1. En tu panel de apps, busca el producto de WhatsApp y haz clic en Configuración.
  2. Luego, busca la sección de webhooks y haz clic en Editar. Después de hacer clic, aparece un cuadro de diálogo en la pantalla que te solicita la URL de devolución de llamada y el Token de verificación. Tienes que utilizar los valores que usaste para configurar el proyecto de Glitch en la sección Configurar Glitch. Por ejemplo, (https://<project-name>.glitch.me/webhook) en URL de devolución de llamada y ("HAPPY") en Token de verificación.
  3. De regreso en la página de configuración, haz clic en Administrar para iniciar el cuadro de diálogo de campos de webhook del panel de apps.
    Cuadro de diálogo para administrar campos de webhook
  4. En la tabla de campos, haz clic en Subscribir a todos los eventos de webhook a los que quieras suscribirte (te recomendamos suscribirte a todos los eventos) en la columna ubicada en el extremo derecho de la tabla.
  5. Luego, en la fila mensajes, haz clic en Probar para enviar una notificación al punto de conexión.

    Para confirmar que se activó una notificación de webhook, vuelve a Glitch y selecciona LOGS. La salida tendrá el siguiente aspecto.

    La carga de notificación de webhook completa tendrá el siguiente aspecto: 
    {
  "object": "whatsapp_business_account",
  "entry": [
    {
      "id": "0",
      "changes": [
        {
          "field": "messages",
          "value": {
            "messaging_product": "whatsapp",
            "metadata": {
              "display_phone_number": "16505551111",
              "phone_number_id": "123456123"
            },
            "contacts": [
              {
                "profile": {
                  "name": "test user name"
                },
                "wa_id": "16315551181"
              }
            ],
            "messages": [
              {
                "from": "16315551181",
                "id": "ABGGFlA5Fpa",
                "timestamp": "1504902988",
                "type": "text",
                "text": {
                  "body": "this is a text message"
                }
              }
            ]
          }
        }
      ]
    }
  ]
}

API de instalaciones locales de la Plataforma de WhatsApp Business

  1. Ve a nuestro proyecto inicial de webhook en Glitch: Remixar en Glitch
  2. Haz clic en server.js en el panel de navegación izquierdo para ver la implementación del punto de conexión del webhook.
  3. Haz clic en Compartir en la parte superior derecha para obtener la URL del sitio. Esta será la URL de devolución de llamada. Será similar a esta: https://<project-name.glitch.me/webhook.
  4. En el panel de navegación izquierdo, haz clic en el botón Estado. Verás que tu app está escuchando a un puerto específico.
  5. Envía un mensaje o envíate a ti mismo un mensaje de prueba para ver la notificación. En el siguiente ejemplo del registro, se muestra un mensaje de texto recibido que dice "Hola" en el cuerpo y un mensaje enviado con el estado actualizado de envío realizado, entrega realizada y lectura completada. 
    Incoming webhook: {"messages":[{"from":"1234567890","id":"ABGGhSkIc2B_Ago-sDy5BNm-1gI5","text":{"body":"Hi"},"timestamp":"1529381066","type":"text"}]}
Incoming webhook: {"statuses":[{"id":"gBGGhSkIc2B_AgkXDygfSDwgG5s","recipient_id":"1234567890","status":"sent","timestamp":"1529381072"}]}
Incoming webhook: {"statuses":[{"id":"gBGGhSkIc2B_AgkXDygfSDwgG5s","recipient_id":"1234567890","status":"delivered","timestamp":"1529381072"}]}
Incoming webhook: {"statuses":[{"id":"gBGGhSkIc2B_AgkXDygfSDwgG5s","recipient_id":"1234567890","status":"read","timestamp":"1529381076"}]}