> ## Documentation Index
> Fetch the complete documentation index at: https://help.treble.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Webhook de respuesta de mensaje

> Los webhook de respuesta de mensaje se activan cuando un usuario responde a un mensaje. Aprende a configurarlos en este artículo.

## ¿Cómo funciona?

Cuando un usuario responde a un mensaje, podemos configurar un webhook para que se active y se envíe una solicitud HTTP a tu endpoint configurado en Treble. Este webhook es uno de los mas importantes para implementar casos de uso complejos, como la automatización de procesos o la integración con otras aplicaciones.

Por ejemplo, puedes configurar un webhook para capturar la respuesta de un cliente cuando se le pide su número de identificación. Treble enviará una solicitud HTTP a tu endpoint configurado en Treble con la respuesta del cliente la cual puedes procesar en tu aplicación. Posteriormente, puedes incluso devolver información a la conversación (flujo) de Treble para mostrar información dinámica obtenida por tu servidor, o encaminar la conversación por otro camino.

### Diagrama de flujo de webhook de respuesta de mensaje

En este ejemplo, el cliente responde a un mensaje de WhatsApp con su número de identificación. Treble envía una solicitud HTTP a tu endpoint configurado en Treble con la respuesta del cliente con el número de identificación. Tu servidor la procesa y devuelve información a Treble para continuar la conversación.

<img src="https://mintcdn.com/trebleai/woBrUvSBPp-ldiW5/images/response-1.png?fit=max&auto=format&n=woBrUvSBPp-ldiW5&q=85&s=6f0c110ef3b600bde9c6051f0d7165e2" alt="Diagrama de flujo de webhook de respuesta de mensaje" width="2338" height="1214" data-path="images/response-1.png" />

```mermaid theme={null}
sequenceDiagram
    participant C as Cliente
    participant W as Webhook
    participant S as Servidor
    participant T as Treble

    C->>T: Responde mensaje de WhatsApp
    T->>W: Webhook activado con identificacion: {respuesta_cliente}
    W->>S: Envía solicitud con identificacion
    S->>S: Procesa el webhook
    alt Usuario existe
        S->>W: Respuesta con resp_servidor: usuario autenticado
    else Usuario no existe
        S->>W: Respuesta con resp_servidor: usuario no autenticado
    end
    W->>T: Envía datos de regreso a Treble
    alt resp_servidor es usuario autenticado
        T->>T: Continúa por el camino de usuario autenticado
    else resp_servidor es usuario no autenticado
        T->>T: Continúa por otro camino
    end
```

## ¿Cómo configurar un webhook de respuesta de mensaje?

<Steps>
  <Step title="Ingresa a Treble.ai">
    Ingresa a Treble.ai por medio de la siguiente URL: <a class="article-link" href="https://app.treble.ai"><p>[https://app.treble.ai](https://app.treble.ai)</p><Icon icon="arrow-up-right-from-square" iconType="solid" /></a>
  </Step>

  <Step title="Creación de un flujo">
    Ve a la sección de "Conversaciones" y haz click en el botón **"Crear Conversación".** También puedes configurar un webhook de lectura de mensaje en un flujo existente. Para esto, ve a la sección de "Flujos" y haz click en el botón **"Editar" <Icon icon="pencil" iconType="solid" />** de tu flujo.

    <img src="https://mintcdn.com/trebleai/aaCrgms9mLKayuxp/images/create-convo.gif?s=be4cd557da1bfa256303a5628ebc1768" alt="Crear Conversación" width="2686" height="1466" data-path="images/create-convo.gif" />
  </Step>

  <Step title="Agregar bloques de mensajes">
    Vamos a añadir el primer bloque de mensaje. Haz click en el botón **"Agregar bloque" <Icon icon="plus" iconType="solid" />**. En este caso, vamos a agregar una plantilla de mensaje (HSM) previamente creada y aprobada por Meta. Después vamos a conectar un bloque sencillo de mensaje con el bloque de HSM. Aqui vamos a preguntar por el número de identificación del cliente.

    <img src="https://mintcdn.com/trebleai/X3Ys1WzX_gZPA4ia/images/webhook-rd-2.gif?s=b5ff9b6f7fd1f2a56a7de42f5861dcd7" alt="Agregar un bloque de mensaje" width="1700" height="967" data-path="images/webhook-rd-2.gif" />
  </Step>

  <Step title="Activar webhook y agregar endpoint">
    Ahora, vamos a hacer doble click en la flecha <Icon icon="arrow-right" iconType="solid" /> que sale del bloque de mensaje y conecta con el bloque de respuesta. Se desplegará un campo de texto en la parte superior. En este campo, vamos a agregar el endpoint al que quieres que se envíe la solicitud HTTP cuando este mensaje sea leído.

    <img src="https://mintcdn.com/trebleai/woBrUvSBPp-ldiW5/images/message-response-1.gif?s=07494da324011276d6140682e9e66b8e" alt="Agregar un bloque de mensaje" width="2328" height="1338" data-path="images/message-response-1.gif" />
  </Step>

  <Step title="Especificar la variable para capturar la respuesta">
    Es necesario especificar la variable para capturar la respuesta del cliente. Vamos a hacer doble click en el bloque de pregunta donde estamos pidiendo el número de identificación. En el panel que se despliega a la izquierda, vamos a hacer click en la opción **"Guardar respuesta como variable"**. Se van a desplegar dos campos:

    * **"Tipo de respuesta"**: Aquí puedes escoger el tipo de respuesta que quieres capturar. En este caso, vamos a escoger **"Número"**.
    * **"Nombre de la variable"**: Aquí puedes agregar el nombre de la variable que quieres que se guarde. En este caso, vamos a agregar `id_cliente`.

    <img src="https://mintcdn.com/trebleai/woBrUvSBPp-ldiW5/images/message-response-2.gif?s=e8775e233e58f5aea7d1f2c1de3b9a04" alt="Agregar un bloque de mensaje" width="2330" height="1340" data-path="images/message-response-2.gif" />

    El uso de variables en Treble es un concepto clave para la automatización de procesos. Puedes leer más sobre ellas en:

    <Card title="Variables en Treble" icon="book-open" href="/es/docs/build-with-treble/features/variables">
      Aprende más sobre variables en Treble.
    </Card>
  </Step>

  <Step title="Guardar cambios">
    Para que el webhook se active, debes guardar los cambios. Si estás en un flujo nuevo, haz click en el botón **"Publicar Conversación"** para guardar el flujo. Si estás en un flujo existente, haz click en el botón **"Guardar"** para guardar los cambios.

    <Check>
      ¡Listo! Ahora, cuando un responda a tu mensaje, el webhook se activará y enviará una solicitud HTTP a tu endpoint configurado en Treble. El cuerpo de la solicitud va a contener información del evento de respuesta.
    </Check>
  </Step>
</Steps>

<Card title="Cuerpo de webhook de respuesta de mensaje" icon="book-open" href="/es/api-reference/webhooks/message-response">
  Aprende más sobre el cuerpo de webhook de respuesta de mensaje.
</Card>

## Tutorial Avanzado - Respuesta de tu servidor

En el paso a paso anterior, vimos cómo configurar un webhook de respuesta de mensaje en Treble. Ahora, vamos a ver cómo procesar la respuesta del cliente en tu servidor. Para esto, es necesario que tu servidor tenga un endpoint público al que se pueda enviar la solicitud HTTP.

### Paso a Paso

1. **Configura tu servidor:**
   Asegúrate de que tu servidor esté configurado para recibir solicitudes HTTP. Puedes usar un framework como Express en Node.js para facilitar este proceso.

2. **Crea un endpoint para el webhook:**
   Define un endpoint en tu servidor que pueda recibir las solicitudes del webhook.

3. **Procesa la solicitud:**
   Extrae la información relevante de la solicitud y realiza las acciones necesarias, como verificar si el usuario existe.

4. **Envía una respuesta a Treble:**
   Devuelve una respuesta a Treble con la información procesada, como el estado de autenticación del usuario. La respuesta debe ser un JSON con el siguiente formato:

   ```json theme={null}
    {
        "user_session_keys":[
            {
                "key":"servidor_usuario_valid",
                "value":"si"
            }
        ]
    }
   ```

Los `user_session_keys` es un arreglo de objetos que contiene la clave y el valor de la respuesta. Para este ejemplo, la clave debe ser `servidor_usuario_valid` y el valor debe ser `si` si el usuario existe o `no` si no existe. Sin embargo, puedes enviar de regreso a Treble cualquier información que necesites para continuar la conversación. Dicha respuesta puede contener mas variables que se puedan usar en el flujo.

Ejemplo:

```json theme={null}
{
    "user_session_keys":[
        {
            "key":"nombre_usuario",
            "value":"Juan Perez"
        },
        {
            "key":"fecha_ultima_compra",
            "value":"2025-01-01"
        }
    ]
}
```

### Ejemplo de Código

Aquí tienes un ejemplo básico de cómo podrías implementar esto en Node.js:

```javascript theme={null}
const express = require('express');
const app = express();
app.use(express.json());

app.post('/webhook', (req, res) => {
    // Extrae la identificación del usuario de los user_session_keys
    const identificacion = req.body.user_session_keys.find(key => key.key === 'id_cliente')?.value;

    // Simula la verificación del usuario
    const usuarioExiste = verificarUsuario(identificacion);

    // Prepara la respuesta para Treble
    const resp_servidor = usuarioExiste ? 'si' : 'no';

    // Envía la respuesta de vuelta a Treble con la estructura correcta
    res.json({
        user_session_keys: [
            {
                key: "servidor_usuario_valid",
                value: resp_servidor
            }
        ]
    });
});

function verificarUsuario(identificacion) {
    // Lógica para verificar si el usuario existe
    // Aquí puedes consultar una base de datos o un servicio externo
    return identificacion === '12345'; // Ejemplo de verificación
}

app.listen(3000, () => {
    console.log('Servidor escuchando en el puerto 3000');
});
```

5. De regreso en tu conversación (flujo) en Treble, conectamos un bloque de condiciones para evaluar la respuesta del servidor. Nota como la variable `servidor_usuario_valid` es una variable de sesión que se guarda en el flujo y es la respuesta que se envía al servidor. El bloque de condiciones es un bloque de tipo "Si" y evalua si la variable `servidor_usuario_valid` es igual a `si`. Si es así, se continúa por el camino de usuario autenticado. Si no, se continúa por otro camino.

<img src="https://mintcdn.com/trebleai/woBrUvSBPp-ldiW5/images/message-response-3.png?fit=max&auto=format&n=woBrUvSBPp-ldiW5&q=85&s=d2f1c7116a9d840822dcc5b4aefa3624" alt="Agregar un bloque de mensaje" width="2338" height="1350" data-path="images/message-response-3.png" />

<Check>
  ¡Listo! Hemos configurado un webhook de respuesta de mensaje en Treble. Ahora, cuando un responda a tu mensaje, el webhook se activará y enviará una solicitud HTTP a tu endpoint configurado en Treble con la respuesta del cliente. Tu servidor la procesa y devuelve información a Treble para continuar la conversación.
</Check>

## Ten en cuenta

* Debes configurar el webhook de respuesta para cada respuesta (flecha <Icon icon="arrow-right" iconType="solid" />) que sale de un bloque de mensaje. Si lo configuras en una única respuesta o la primera, únicamente se activará para la primera respuesta.

En la siguiente imagen, se ve cómo debes configurar el webhook de respuesta para cada una de las 3 respuestas que salen de un bloque de mensaje.

<img src="https://mintcdn.com/trebleai/woBrUvSBPp-ldiW5/images/message-response-4.png?fit=max&auto=format&n=woBrUvSBPp-ldiW5&q=85&s=9af213e498cb1a584a816027f07926e3" alt="Configurar webhook de respuesta" width="2310" height="1346" data-path="images/message-response-4.png" />

<Warning>
  La respuesta de tu servidor al webhook no puede durar mas de 10 segundos. Si tu servidor tarda mas de 10 segundos en responder, el webhook se marcará como timeout y se continuará la conversación del flujo en Treble. Puedes extender el tiempo de respuesta con la opción de `[REQUEST_TRIGGER]`. Para más información, puedes leer el artículo: <a class="article-link" href="/es/api-reference/webhooks/request-trigger">Detener conversación de Treble y esperar respuesta de tu servidor</a>.
</Warning>