# Cách sử dụng Dashboard Apps?

> Thanh Phong · Cập nhật lần cuối ngày 10 thg 4, 2024

Với Dashboard Apps, bạn có thể tích hợp một ứng dụng vào bảng điều khiển SquareHub để nhân viên hỗ trợ sử dụng. Tính năng này cho phép bạn xây dựng ứng dụng độc lập, sau đó nhúng vào để hiển thị thông tin khách hàng, đơn hàng, lịch sử thanh toán, v.v.

Khi được nhúng vào bảng điều khiển của SquareHub, ứng dụng của bạn sẽ nhận được ngữ cảnh của cuộc hội thoại và liên hệ dưới dạng sự kiện window. Hãy triển khai một listener cho sự kiện message trên trang của bạn để nhận ngữ cảnh đó.

P.S. Xem [buổi phát trực tiếp trên YouTube về cách xây dựng Dashboard App](https://youtu.be/posSYmbT9H0?list=PL-_vTyAGSIq8t32NtHoR97PAFb-klHUSH&t=123) của chúng tôi.

## Cách tạo dashboard app?

**Bước 1.** Vào Cài đặt → Tích hợp → Dashboard Apps. Nhấn nút "Cấu hình" tương ứng với Dashboard Apps.

![](/assets/images/b4b9e902_dashboard_apps_feature_in_chatwoot.png)

**Bước 2.** Nhập tên ứng dụng và URL nơi ứng dụng của bạn được lưu trữ.

![](/assets/images/5a5602bb_edit_dashboard_app.png)

Sau khi hoàn tất, một tab mới mang tên bạn đã đặt cho ứng dụng sẽ xuất hiện trong cửa sổ hội thoại. Trong trường hợp này là "Customer Orders".

![](/assets/images/c58da30c_dashboard_app_in_action.png)

Khi nhấn vào tab mới, bạn sẽ thấy ứng dụng của mình đang tải dữ liệu trên bảng điều khiển SquareHub.

![](/assets/images/a4c9f3c0_dashboard_app_in_action.png)

### Nhận dữ liệu từ SquareHub vào ứng dụng của bạn

SquareHub sẽ chuyển ngữ cảnh cuộc hội thoại và liên hệ dưới dạng sự kiện window. Bạn có thể truy cập dữ liệu này trong ứng dụng bằng cách triển khai một listener cho sự kiện, như minh họa dưới đây:

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

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

## Yêu cầu dữ liệu từ SquareHub theo nhu cầu

Nếu bạn cần lấy dữ liệu cuộc hội thoại theo yêu cầu từ SquareHub, bạn có thể gửi tin nhắn đến cửa sổ cha bằng [postMessage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) của javascript.

SquareHub sẽ lắng nghe key này: `squarehub-dashboard-app:fetch-info`.

### Ví dụ

Đoạn mã sau có thể dùng để truy vấn dashboard app. SquareHub sẽ phản hồi yêu cầu này bằng cách cung cấp payload cuộc hội thoại đã cập nhật ngay lập tức.

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

// You would get a message in the on message listener with the appContext payload.
```

## Event Payload

### conversation object[​](https://docs.squareomni.com/docs/product/others/dashboard-apps/#conversation-object "Direct link to heading")

```
{
  "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[​](https://docs.squareomni.com/docs/product/others/dashboard-apps/#contact-object "Direct link to heading")

```
{
  "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[​](https://docs.squareomni.com/docs/product/others/dashboard-apps/#currentagent-object "Direct link to heading")

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

### Final Payload[​](https://docs.squareomni.com/docs/product/others/dashboard-apps/#final-payload "Direct link to heading")

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