¿Cómo usar las aplicaciones de panel de control?

Con las aplicaciones de Panel, puedes integrar una aplicación dentro del panel de Chatwoot para que la utilicen los agentes. Esta función te permite crear una aplicación de manera independiente, que luego puede ser incrustada para mostrar información de clientes, pedidos, historial de pagos anteriores, etc.

Cuando tu aplicación se incrusta en el panel de Chatwoot, obtendrá el contexto de la conversación y el contacto como un evento de ventana. Implementa un listener para el evento de mensaje en tu página para recibir el contexto.

P.D. Echa un vistazo a nuestro YouTube en vivo sobre cómo crear una aplicación de Panel.

¿Cómo crear una aplicación de panel?

Paso 1. Ve a Configuración → Integraciones → Aplicaciones de panel. Haz clic en el botón "Configurar" correspondiente a las Aplicaciones de panel.

Paso 2. Agrega 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 diste a la aplicación en la ventana de conversación. En este caso, es “Pedidos de clientes”.

Cuando haces clic en la nueva pestaña, podrás ver que tu aplicación obtiene datos en el panel de Chatwoot.

Recibiendo datos de Chatwoot en tu aplicación

Chatwoot entregará el contexto de la conversación y el contacto como un evento de ventana. Esto puede ser accedido 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 bajo demanda de datos desde Chatwoot

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

Chatwoot estará escuchando esta clave: chatwoot-dashboard-app:fetch-info.

Ejemplo

El siguiente código se puede utilizar para consultar la aplicación de panel. Chatwoot responderá a esta solicitud proporcionando inmediatamente la carga útil actualizada de la conversación.

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

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

Carga útil del evento

objeto conversation​

{
  "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": "Hello",
      "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 contact​

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