儀表板應用程式

儀表板應用程式允許組織將應用程式嵌入 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>
    }
  }
}