แดชบอร์ดแอพ

แอปแดชบอร์ดช่วยให้องค์กรสามารถฝังแอปพลิเคชันภายในแดชบอร์ดของ MBOX เพื่อให้บริบทสำหรับตัวแทนฝ่ายสนับสนุนลูกค้า คุณลักษณะนี้ช่วยให้คุณสร้างแอปพลิเคชันได้อย่างอิสระและฝังไว้ภายในเพื่อให้ข้อมูลผู้ใช้ คำสั่งซื้อ หรือประวัติการชำระเงินก่อนหน้านี้

เมื่อคุณฝังแอปพลิเคชันของคุณโดยใช้แดชบอร์ดใน MBOX แอปพลิเคชันของคุณจะได้รับบริบทของการสนทนาและผู้ติดต่อเป็นเหตุการณ์ในหน้าต่าง ใช้ฟังสำหรับเหตุการณ์ข้อความบนเพจของคุณเพื่อรับบริบท

วิธีสร้างแอปแดชบอร์ด​

1. ไปที่ การตั้งค่า > การเชื่อมต่อกับระบบ > แอปแดชบอร์ด

2. คลิกที่ "เพิ่มแอปแดชบอร์ดใหม่"

3. เพิ่มชื่อแอปและ URL ของแอป

กำลังรับข้อมูลจาก Mboxเข้าสู่แอปของคุณ​

MBOX จะส่งบริบทของการสนทนาและผู้ติดต่อให้คุณเป็นเหตุการณ์หน้าต่าง คุณสามารถฟังได้ในแอพของคุณตามที่อธิบายไว้ด้านล่าง

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

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

แจ้งขอข้อมูลจาก Mbox

หากกรณีการใช้งานของคุณกำหนดให้คุณต้องขอข้อมูลการสนทนาตามต้องการจาก MBOX คุณสามารถทำได้โดยส่งข้อความอย่างง่ายไปยังหน้าต่างหลักโดยใช้จาวาสคริปต์

MBOX จะฟังคีย์นี้ chatwoot-dashboard-app:fetch-info

ตัวอย่าง

คุณสามารถสอบถามแอปแดชบอร์ดได้โดยใช้รหัสต่อไปนี้ MBOX จะฟังคีย์นี้และส่งผู้ร้องขอทันทีพร้อมเพย์โหลดการสนทนาที่อัปเดต

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

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

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": "[phone]",
  "identifier": "string || null",
  "thumbnail": "[phone]",
  "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>
    }
  }
}