كيف تستخدم تطبيقات لوحة التحكم؟

مع تطبيقات لوحة التحكم، يمكنك دمج تطبيق ضمن لوحة تحكم Super Chat لاستخدام الوكلاء. تتيح لك هذه الميزة إنشاء تطبيق بشكل مستقل، يمكن تضمينه بعد ذلك لتوفير معلومات العملاء، الطلبات، سجل الدفعات السابق، وغيرها.

عند تضمين تطبيقك في لوحة تحكم Super Chat، سيحصل تطبيقك على سياق المحادثة وجهة الاتصال كحدث نافذة. قم بتنفيذ مستمع لحدث الرسالة في صفحتك لاستلام السياق.

ملاحظة: اطلع على البث المباشر على YouTube حول بناء تطبيق لوحة تحكم.

كيف تنشئ تطبيق لوحة تحكم؟

الخطوة 1. انتقل إلى الإعدادات → التكاملات → تطبيقات لوحة التحكم. اضغط على زر "تكوين" المقابل لتطبيقات لوحة التحكم.

الخطوة 2. أضف اسم تطبيقك والرابط الذي يستضيف عليه تطبيقك.

عند الانتهاء، سيظهر تبويب جديد بالاسم الذي منحته للتطبيق في نافذة المحادثة. في هذا المثال، هو "طلبات العملاء".

عند النقر على التبويب الجديد، ستتمكن من رؤية تطبيقك يجلب البيانات في لوحة تحكم Super Chat.

استقبال البيانات من Super Chat إلى تطبيقك

سيقوم Super Chat بإرسال سياق المحادثة وجهة الاتصال كحدث نافذة. يمكن الوصول إليه داخل تطبيقك عبر تنفيذ مستمع للحدث كما يلي:

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

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

طلب البيانات من Super Chat عند الطلب

إذا كنت بحاجة إلى طلب بيانات المحادثة عند الطلب من Super Chat، يمكنك إرسال رسالة إلى نافذة الأب باستخدام واجهة Javascript postMessage API.

سيقوم Super Chat بالاستماع إلى هذا المفتاح: chatwoot-dashboard-app:fetch-info.

مثال

يمكن استخدام الكود التالي لاستعلام تطبيق لوحة التحكم. سيستجيب Super Chat مباشرة لهذا الطلب ويوفر بيانات المحادثة المحدثة.

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

// ستتلقى رسالة في مستمع الرسائل مع حمولة appContext.

حمولة الحدث

كائن المحادثة​

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

كائن جهة الاتصال​

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

كائن الوكيل الحالي​

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

الحمولة النهائية​

{
  "event": "appContext",
  "data": {
    "conversation": {
      // <...خصائص المحادثة>
    },
    "contact": {
      // <...خصائص جهة الاتصال>
    },
    "currentAgent": {
      // <...خصائص الوكيل الحالي>
    }
  }
}