Piattaforma di WhatsApp Business > API Cloud > Guide

Esempio di URL di callback per il test dei webhook

Puoi clonare la nostra app di callback di esempio usando Glitch per creare un URL di callback pubblico sui server di Glitch da usare per testare i webhook. Lo scopo della creazione del progetto Glitch è che scrive payload webhook su un file di registro che puoi visualizzare in tempo reale quando i webhook vengono attivati.

Prima di impostare un endpoint per il test webhook per l'API Cloud

Questa guida fa parte di un processo a più passaggi e devi averne completato alcuni prima di iniziare a configurare l'endpoint della tua app di esempio usando Glitch. Devi avere completato i passaggi di seguito:

Per le istruzioni complete per iniziare con l'API WhatsApp Business Cloud in modo da poter inviare il tuo primo messaggio consulta Primi passi con l'API WhatsApp Business Cloud.

Impostazione e configurazione di Glitch

Accedi a glitch.com e crea un account. In questo modo, potrai utilizzare tutte le funzionalità esaminate in questa guida e assicurarti che l'interfaccia utente indicata nella guida corrisponda a quella che vedi. Se non crei un account, la maggior parte delle funzioni dell'interfaccia utente mancheranno o avranno un aspetto diverso.
Dopo aver configurato il tuo account Glitch, apri il nostro modello iniziale di progetto Glitch usando il seguente link: Modello di progetto webhook per la piattaforma WhatsApp .
Clicca sul pulsante Remix to Edit in alto a destra nella pagina web di Glitch per clonare la nostra app di esempio.
Clicca su Remix to Edit per creare il tuo progetto Gitch
Viene creata una copia del progetto per il tuo account.
Nel file .env, aggiorna il valore di WEBHOOK_VERIFY_TOKEN con una stringa casuale a tua scelta. Se lo desideri, puoi copiare il valore del tuo token d'accesso temporaneo/permanente da WhatsApp > Configurazione API nella Dashboard gestione app e incollare quel valore per GRAPH_API_TOKEN.
Aggiornamento delle variabili di ambiente Glitch per il tuo progetto
Clicca su Condividi in alto a destra per ottenere l'URL del sito live. Aggiungi /webhook alla fine dell'URL per ottenere l'URL di callback completo. Sarà simile a https://<project-name>.glitch.me/webhook.

Ora che il tuo endpoint è pronto, devi tornare alla Dashboard gestione app.

Configurazione della Dashboard gestione app con token di verifica ed endpoint di Glitch

Nella Dashboard gestione app, trova il prodotto WhatsApp e clicca su Configurazione.
Poi, trova la sezione dei webhook e clicca su Modifica. Dopo aver cliccato, vedrai una finestra di dialogo che richiede l'URL di callback e il token di verifica. Devi utilizzare i valori che hai usato per configurare il progetto Glitch nella sezione Impostazione e configurazione di Glitch. Ad esempio, (https://<project-name>.glitch.me/webhook) per l'URL di callback URL e ("HAPPY") per il token di verifica.
Torna nella pagina di configurazione, clicca su Gestisci per aprire la finestra Campi dei webhook della Dashboard gestione app.
Gestione della finestra di dialogo Campi dei webhook
Nella tabella dei campi clicca su Attiva iscrizione per tutti gli eventi dei webhook per cui desideri attivare l'iscrizione (ti consigliamo di attivare l'iscrizione per tutti) nella colonna più a destra della tabella.

Poi, nella riga messaggi, clicca su Test per inviare una notifica al tuo endpoint.

Per confermare che è stata attivata una notifica webhook, torna su Glitch e seleziona LOGS, l'output dovrebbe essere simile alla seguente immagine.

Il payload completo delle notifiche webhook dovrebbe essere simile al seguente:

{
  "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 On-Premises della piattaforma WhatsApp Business

Accedi al progetto iniziale del webhook su Glitch: Crea un remix su Glitch
Clicca su server.js nel riquadro di navigazione a sinistra per l'implementazione dell'endpoint del webhook.
Clicca su Condividi in alto a destra per ottenere l'URL del sito live. Sarà l'URL di callback. Sarà simile al seguente https://<project-name.glitch.me/webhook.
Clicca sul pulsante Stato nel riquadro di navigazione a sinistra. Vedrai che la tua app è in ascolto su una porta specifica.

Invia o inviati un messaggio di prova per vedere la notifica. L'esempio seguente del registro mostra un messaggio di testo ricevuto con corpo "Hi" e un messaggio inviato con lo stato aggiornato su "sent", quindi "delivered" e infine "read".

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

Piattaforma WhatsApp Business | API Cloud | API On-Premises | API Business Management