چگونه از برنامه‌های پیشخان استفاده کنیم؟

با استفاده از برنامه‌های پیشخان، می‌توانید یک صفحه‌ی وب را در پیشخان گپیفای برای استفاده ایجنت ها یکپارچه کنید. این ویژگی به شما امکان می‌دهد تا به طور مستقل یک برنامه ایجاد کنید که سپس می‌تواند برای ارائه اطلاعات مشتریان، سفارشات، تاریخچه پرداخت‌های گذشته و ... جاسازی شود.

هنگامی که صفحه‌ی وب شما در پیشخان گپیفای اضافه می‌شود، برنامه شما زمینه مکالمه و تماس را به عنوان یک رویداد پنجره دریافت خواهد کرد. برای دریافت این زمینه، یک شنونده (listener) برای رویداد پیام در صفحه خود پیاده‌سازی کنید.

چگونه یک برنامه پیشخان بسازیم؟

مرحله ۱. به تنظیمات -> برنامه های تلفیق شده -> برنامه‌های پیشخان بروید. روی دکمه "تنظیمات" مربوط به برنامه‌های پیشخان کلیک کنید.

مرحله ۲. نام برنامه خود و URL که برنامه شما بر روی آن میزبانی می‌شود را اضافه کنید.برای مثال ما سی آر ام دیدار را اضافه می‌کنیم:

پس از اتمام کار، یک برگه جدید با نامی که به برنامه داده‌اید در پنجره مکالمه ظاهر خواهد شد. در این مورد، نام آن "سی آر ام دیدار" است.

دریافت داده‌ها از گپیفای به درون برنامه شما

گپیفای زمینه مکالمه و تماس را به عنوان یک رویداد ارائه خواهد داد. شما می‌توانید به این اطلاعات درون برنامه خود دسترسی پیدا کنید با پیاده‌سازی یک شنونده برای این رویداد، همان‌طور که در اینجا نشان داده شده است:

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

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

درخواست داده‌ها به صورت درخواست درخواستی از گپیفای

اگر نیاز دارید که داده‌های مکالمه را به صورت درخواستی از گپیفای دریافت کنید، می‌توانید با استفاده از جاوا اسکریپت postMessage API پیامی به پنجره والد ارسال کنید.

گپیفای به این کلید گوش خواهد داد: chatwoot-dashboard-app:fetch-info

مثال

کد زیر را می‌توان برای پرس و جو از برنامه پیشخان استفاده کرد. گپیفای به این درخواست پاسخ خواهد داد و پی لود مکالمه به‌روز شده را به سرعت ارائه می‌دهد.

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

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

payload رویداد

آبجکت مکالمه

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

payload نهایی

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