Cómo Utilizar las Aplicaciones de Dashboard en WhatChat

Con las aplicaciones de tablero de WhatChat, puedes integrar una aplicación dentro del panel de WhatChat para el uso de los agentes. Esta característica te permite crear una aplicación de forma independiente, que luego se puede incrustar para proporcionar información sobre los clientes, pedidos, historial de pagos, etc.

Cuando está incrustada en el panel de WhatChat, tu aplicación recibirá el contexto de la conversación y del contacto como un evento de ventana. Implementa un listener para el evento de mensaje en tu página para recibir el contexto.

P.D. No te pierdas nuestro live en YouTube sobre cómo construir una aplicación de tablero.

¿Cómo crear una aplicación de tablero? #

Paso 1. Ve a Configuración → Integraciones → Aplicaciones de tablero. Haz clic en el botón “Configurar” correspondiente a las Aplicaciones de Tablero.

Paso 2. Añade el nombre de tu aplicación y la URL en la que está alojada tu aplicación.

Una vez que hayas terminado, aparecerá una nueva pestaña con el nombre que le diste a la aplicación en la ventana de conversación. En este caso, es “Órdenes de Clientes”.

Al hacer clic en la nueva pestaña, podrás ver cómo tu aplicación recupera datos en el panel de WhatChat.

Recibiendo datos de WhatChat en tu aplicación #

WhatChat entregará el contexto de la conversación y el contacto como un evento de ventana. Esto se puede acceder dentro de tu aplicación implementando un listener para el evento, como se muestra aquí:

window.addEventListener("message", function (event) {
  if (!isJSONValid(event.data)) {
    return;
  }

  const eventData = JSON.parse(event.data);
});

Solicitud de datos bajo demanda desde WhatChat #

Si necesitas solicitar los datos de conversación bajo demanda desde WhatChat, puedes enviar un mensaje a la ventana padre utilizando la API postMessage de JavaScript.

WhatChat escuchará esta clave: whatchat-dashboard-app:fetch-info.

Ejemplo #

El siguiente código se puede utilizar para realizar una consulta desde la aplicación de tablero. WhatChat responderá a esta solicitud proporcionando la carga útil de conversación actualizada de inmediato.

window.parent.postMessage('whatchat-dashboard-app:fetch-info', '*')

// Recibirás un mensaje en el listener de mensajes con la carga útil del contexto de la app.

Carga útil del evento #

objeto de conversación​ #

{
  "meta": {
    "sender": {
      "additional_attributes": {
        "description": "string",
        "company_name": "string",
        "social_profiles": {
          "github": "string",
          "twitter": "string",
          "facebook": "string",
          "linkedin": "string"
        }
      },
      "availability_status": "string",
      "email": "string",
      "id": "integer",
      "name": "string",
      "phone_number": "string",
      "identifier": "string",
      "thumbnail": "string",
      "custom_attributes": "object",
      "last_activity_at": "integer"
    },
    "channel": "string",
    "assignee": {
      "id": "integer",
      "account_id": "integer",
      "availability_status": "string",
      "auto_offline": "boolean",
      "confirmed": "boolean",
      "email": "string",
      "available_name": "string",
      "name": "string",
      "role": "string",
      "thumbnail": "string"
    },
    "hmac_verified": "boolean"
  },
  "id": "integer",
  "messages": [
    {
      "id": "integer",
      "content": "Hola",
      "inbox_id": "integer",
      "conversation_id": "integer",
      "message_type": "integer",
      "content_type": "string",
      "content_attributes": {},
      "created_at": "integer",
      "private": "boolean",
      "source_id": "string",
      "sender": {
        "additional_attributes": {
          "description": "string",
          "company_name": "string",
          "social_profiles": {
            "github": "string",
            "twitter": "string",
            "facebook": "string",
            "linkedin": "string"
          }
        },
        "custom_attributes": "object",
        "email": "string",
        "id": "integer",
        "identifier": "string",
        "name": "string",
        "phone_number": "string",
        "thumbnail": "string",
        "type": "string"
      }
    }
  ],
  "account_id": "integer",
  "additional_attributes": {
    "browser": {
      "device_name": "string",
      "browser_name": "string",
      "platform_name": "string",
      "browser_version": "string",
      "platform_version": "string"
    },
    "referer": "string",
    "initiated_at": {
      "timestamp": "string"
    }
  },
  "agent_last_seen_at": "integer",
  "assignee_last_seen_at": "integer",
  "can_reply": "boolean",
  "contact_last_seen_at": "integer",
  "custom_attributes": "object",
  "inbox_id": "integer",
  "labels": "array",
  "muted": "boolean",
  "snoozed_until": null,
  "status": "string",
  "timestamp": "integer",
  "unread_count": "integer",
  "allMessagesLoaded": "boolean",
  "dataFetched": "boolean"
}

objeto de contacto​ #

{
  "additional_attributes": {
    "description": "string",
    "company_name": "string",
    "social_profiles": {
      "github": "string",
      "twitter": "string",
      "facebook": "string",
      "linkedin": "string"
    }
  },
  "availability_status": "string",
  "email": "string",
  "id": "integer",
  "name": "string",
  "phone_number": "+91 9000000001",
  "identifier": "string || null",
  "thumbnail": "+91 9000000001",
  "custom_attributes": {},
  "last_activity_at": "integer"
}

objeto currentAgent​ #

{
  "email": "string",
  "id": "integer",
  "name": "string"
}

Carga Útil Final​ #

{
  "event": "appContext",
  "data": {
    "conversation": {
      // <...Atributos de la conversación>
    },
    "contact": {
      // <...Atributos del contacto>
    },
    "currentAgent": {
      // <...Atributos del agente actual>
    }
  }
}