仪表板应用程序

仪表板应用程序允许组织将应用程序嵌入 Voxsig 仪表板，以提供客服代理的上下文。此功能使您能够独立创建应用程序并将其嵌入其中，以提供用户信息、其订单或其以前的付款记录。

当您使用 Voxsig 仪表板嵌入您的应用程序时，您的应用程序将获得对话和联系人的上下文作为窗口事件。在您的页面上实施一个消息事件的聆听器以接收上下文。

如何创建仪表板应用程序

1. 转到「设置」 >「集成」 >「仪表板应用程序」
2. 点击「添加仪表板应用程序」
3. 添加您的应用程序名称和应用程序的 URL。

从 Voxsig 接收数据到您的应用程序

Voxsig 将向您发送对话和联系人的上下文作为窗口事件。您可以在您的应用程序中按照下面的描述来聆听它。

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

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

明确要求从 Voxsig 获取数据

如果您的使用情境需要您按需从 Voxsig 要求对话数据，您可以轻松地通过使用 JavaScript 的 postMessage API 向父窗口发送一条简单的消息来运行此操作。

Voxsig 将会监听此关键词 chatwoot-dashboard-app:fetch-info。

示例

您可以使用以下代码查找仪表板应用程序。Voxsig 将会监听此关键词并立即向请求者发送更新后的对话有效载荷。

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

// 在消息监听器中，您将收到带有 appContext 载荷的消息。

Event Payload

conversation object

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

contact object

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

currentAgent object

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

Final Payload

{
  "event": "appContext",
  "data": {
    "conversation": {
      // <...Conversation Attributes>
    },
    "contact": {
      // <...Contact Attributes>
    },
    "currentAgent": {
      // <...Current agent Attributes>
    }
  }
}