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

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

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

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

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

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

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

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

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

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

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

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

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

طلب البيانات من Chatwoot عند الطلب

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

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

مثال

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

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": {
      // <...خصائص الوكيل الحالي>
    }
  }
}