يتيح لك OpenReplay Assist دعم مستخدميك من خلال رؤية شاشتهم المباشرة والانتقال فورًا إلى مكالمة (WebRTC) معهم دون الحاجة إلى أي برنامج خارجي لمشاركة الشاشة.

npm i @openreplay/tracker-assist

إذا كان متتبّع OpenReplay الخاص بك مُعدًّا باستخدام مقتطف JS، فما عليك سوى استبدال موضع .../openreplay.js بـ .../openreplay-assist.js. فيما يلي مثال على الشكل الذي يجب أن يبدو عليه السكربت بعد التغيير:

<!-- OpenReplay Tracking Code -->
<script>
var initOpts = { projectKey: "GxPpaDARdn2345fgt321" };
var startOpts = { userID: "" };
(function(A,s,a,y,e,r){
  r=window.OpenReplay=[e,r,y,[s-1, e]];
  s=document.createElement('script');s.src=A;s.async=!a;
  ...
})("//static.openreplay.com/latest/openreplay-assist.js", 1, 0, initOpts, startOpts);
</script>

قم بتهيئة المتتبّع ثم حمّل الإضافة @openreplay/tracker-assist.

import Tracker from '@openreplay/tracker';
import trackerAssist from '@openreplay/tracker-assist';

const tracker = new Tracker({
  projectKey: PROJECT_KEY,
});
tracker.use(trackerAssist(options)); // check the list of available options below

tracker.start();

اتبع المثال أدناه إذا كان تطبيقك من نوع SSR. تأكد من استدعاء tracker.start() بمجرد بدء تشغيل التطبيق (داخل useEffect أو componentDidMount).

import OpenReplay from '@openreplay/tracker/cjs';
import trackerFetch from '@openreplay/tracker-assist/cjs';

const tracker = new OpenReplay({
  projectKey: PROJECT_KEY
});
tracker.use(trackerAssist(options)); // check the list of available options below

//...
function MyApp() {
  useEffect(() => { // use componentDidMount in case of React Class Component
    tracker.start();
  }, [])
//...
}

تدعم إضافة assist الخيارات التالية:

trackerAssist({
  callConfirm?: string|ConfirmOptions;
  controlConfirm?: string|ConfirmOptions;
  config?: object;
  onAgentConnect?: () => (()=>void | void);
  onCallStart?: () => (()=>void | void);
  onRemoteControlStart?: () => (()=>void | void);
	onCallDeny?: () => any;
	onRemoteControlDeny?: (agentInfo: Record<string, any>) => any;
  onRecordingDeny?: (agentInfo: Record<string, any>) => any;
	callUITemplate?: string
})

يمكن تخصيص كل من أداة التحكم عن بُعد وأدوات المكالمة، تلك التي يراها المستخدم النهائي، تخصيصًا كاملاً.

type ConfirmOptions = {
  text?:string,
  style?: StyleObject, // style object (i.e {color: 'red', borderRadius: '10px'})
  confirmBtn?: ButtonOptions, 
  declineBtn?: ButtonOptions
}

type ButtonOptions = HTMLButtonElement | string | {
  innerHTML?: string, // to pass an svg string or text
  style?: StyleObject, // style object (i.e {color: 'red', borderRadius: '10px'})
}

من الممكن تخصيص كل جانب من جوانب هذه الأداة عبر المجموعة التالية من ids وclasses. تُستخدم Ids كمراسٍ للأزرار/العناصر الفردية، بينما يمكن استخدام classes للحاويات الجماعية.

فيما يلي قائمة بجميع دوال الاستدعاء:

• callConfirm: تخصيص نص و/أو تخطيط النافذة المنبثقة لطلب المكالمة.
• controlConfirm: تخصيص نص و/أو تخطيط النافذة المنبثقة لطلب التحكم عن بُعد.
• config: يحتوي على إعدادات مخصّصة لخادم ICE/TURN. القيمة الافتراضية هي { 'iceServers': [{ 'urls': 'stun:stun.l.google.com:19302' }], 'sdpSemantics': 'unified-plan' }.
• onAgentConnect: () => (()=>void | void): تُستدعى دالة الاستدعاء هذه بمجرد بدء جلسة مباشرة وتُعيد تفاصيل الوكيل (email وname وquery). كما يمكنها إعادة onAgentDisconnect التي سيتم استدعاؤها عند قطع الاتصال بالجلسة. في حالة الاتصال غير المستقر، قد يتم استدعاؤها عدة مرات. فيما يلي مثال:

onAgentConnect = ({ email, name, query }) => {
  console.log("Live session started")
  const onAgentDisconnect =  () => console.log("Live session stopped")
  return onAgentDisconnect
}

• onCallStart: ({ email, name, query }) => (()=>void | void): تُستدعى دالة الاستدعاء هذه بمجرد بدء مكالمة (webRTC) وتُعيد تفاصيل الوكيل (email وname وquery). كما يمكنها إعادة onCallEnd التي سيتم استدعاؤها عند انتهاء المكالمة. في حالة الاتصال غير المستقر، قد يتم استدعاؤها عدة مرات. فيما يلي مثال:

onCallStart: () => {
  console.log("Call started")
  const onCallEnd = () => console.log("Call ended")
  return onCallEnd
}

• onRemoteControlStart: ({ email, name, query }) => (()=>void | void): تُستدعى دالة الاستدعاء هذه بمجرد بدء جلسة تحكم عن بُعد وتُعيد تفاصيل الوكيل (email وname وquery). كما يمكنها إعادة onRemoteControlEnd التي سيتم استدعاؤها عند إلغاء أذونات التحكم عن بُعد. فيما يلي مثال:

onRemoteControlStart: () => {
  console.log("Remote control started")
  const onControlEnd = () => console.log("Remote control ended")
  return onControlEnd
}

• onCallDeny?: () => any;: تُستدعى دالة الاستدعاء هذه عندما يرفض المستخدم المكالمة أثناء مرحلة الطلب.

onCallDeny: () => {
  console.log("Call denied")
}

• onRemoteControlDeny?: (agentInfo: Record<string, any>) => any;: تُستدعى دالة الاستدعاء هذه عندما يرفض المستخدم جلسة التحكم عن بُعد أثناء مرحلة الطلب وتُعيد تفاصيل الوكيل (email وname وquery).

onRemoteControlDeny: ({ email, name, query }) => {
  console.log("Remote control request denied for", email)
}

• onRecordingDeny?: (agentInfo: Record<string, any>) => any;: تُستدعى دالة الاستدعاء هذه عندما يرفض المستخدم جلسة التسجيل أثناء مرحلة الطلب وتُعيد تفاصيل الوكيل (email وname وquery).

onRecordingDeny: ({ email, name, query }) => {
  console.log("Recording session denied")
 
}

هل تواجه صعوبة في إعداد هذه الإضافة؟ يُرجى الانضمام إلى Slack الخاص بنا أو الاطّلاع على المنتدى والحصول على المساعدة من مجتمعنا.