التوثيق | ريتشات

client_api

توثيق ريتشات للمطورين

باستخدام واجهات API الخاصة بريتشات يمكنك دمج نظامك أو موقعك بشكل أكبر مع ريتشات. على سبيل المثال يمكنك عرض بيانات مستخدمي موقعك في لوحة محادثة ريتشات. فيما يلي تجد واجهات API المنشورة حتى الآن. ريتشات في تطوير مستمر فترقب واجهات API جديدة :).

إنشاء موقع

باستخدام هذه الواجهة يمكنك التسجيل في ريتشات. هذا القسم مخصص بشكل أكبر لأنظمة بناء المواقع والمتاجر التي تريد إنشاء حساب ريتشات تلقائياً لكل مستخدم يسجّل في نظامها ووضع الكود في الموقع.

* لاستخدام هذا القسم أنشئ أولاً تطبيقاً عبر هذا الرابط واحصل على مفتاح API الخاص بك.

ROUTE	METHOD
https://api.raychat.io/v1/api/site	POST

القيم المُرسَلة

FIELD	TYPE	DESCRIPTION
apiKey	string	المفتاح الذي حصلت عليه عند إنشاء التطبيق في اللوحة
site	string	عنوان الموقع الذي تريد تسجيله في ريتشات
siteTitle	string	عنوان الموقع الذي تريد تسجيله في ريتشات
email	string	البريد الإلكتروني لمدير الموقع
password	string	كلمة المرور
name	string	اسم مدير الموقع
phone	string	هاتف مدير الموقع

القيم المُعادة

FIELD	TYPE	DESCRIPTION
message	string	الرسالة المُعادة من الخادم
status	int	الحالة
code	string	كود ريتشات لوضعه في الموقع
user	object	بيانات المستخدم المُنشأ
token	string	رمز الموقع
url	string	عنوان لوحة إدارة ريتشات
webAppUrl	string	عنوان تطبيق ريتشات على الويب

* تُعاد الاستجابة بصيغة JSON.

* في حال حدوث خطأ سيُوضَّح السبب في الاستجابة.

* الحالة 1 تعني نجاح التسجيل.

نسخ!

// NodeJs Example
    request.post({
    url:'https://webapp.raychat.io/api/site',
    form: {
      apiKey:'Your Api Key',
      site:'https://example.com',
      siteTitle:' Example Title',
      email:'tech@raychat.io',
      password: 'Password',
      name:'Ehsan Younesi',
     phone:'09000000000'
    }
   }, function(err,httpResponse,body){
     /* ... */
   });

توثيق ريتشات للمطورين من جانب العميل

تتيح لك API من جانب العميل إدارة الأداة المعروضة للمستخدم. يمكنك استخدامها لإدارة صفحة الدردشة وكذلك إرسال بيانات المستخدم إلى تطبيق ريتشات. (على سبيل المثال يمكنك إرسال بيانات المستخدم الذي سجّل دخوله إلى موقعك إلى ريتشات لعرضها في التطبيق والوصول إليها لاحقاً في الأرشيف).

ملاحظة: يجب كتابة جميع الدوال والأحداث الموضحة أدناه وفق التعليمات داخل حدث raychat_ready.

نسخ!

    window.addEventListener('raychat_ready', function (ets) {
      // function or event 
    });

Raychat.setStyle()

باستخدام هذه الدالة يمكنك إجراء تغييرات على مظهر أيقونة أداة دردشة ريتشات.

FIELD	TYPE	DESCRIPTION
backgroundColor	string	لون خلفية أيقونة الأداة
borderRadius	string	شكل حواف أيقونة الأداة
width	string	عرض أيقونة الأداة
height	string	ارتفاع أيقونة الأداة
boxShadow	string	إضافة تأثير ظل لأيقونة الأداة

نسخ!

    window.Raychat.setStyle({
      backgroundColor : '#000',
      borderRadius : '50%',
      width : '70px',
      height : '70px',
      boxShadow : '0px 1px 5px 0px rgba(0,0,0,0.75)'
    });

Raychat.setPosition()

باستخدام هذه الدالة يمكنك تغيير موضع أيقونة أداة الدردشة. انتبه لإرسال المواضع الأربعة المذكورة لضمان تغيير الموضع بشكل صحيح، بحيث يكون لقيمتين منها كحد أقصى قيمة فعلية وتكون باقي الحقول بقيمة "auto".

FIELD	TYPE	DESCRIPTION
top	string	المسافة من الأعلى
right	string	المسافة من اليمين
bottom	string	المسافة من الأسفل
left	string	المسافة من اليسار

نسخ!

    window.Raychat.setPosition({
      top: 'auto',
      right : 'auto',
      bottom : '15px',
      left : '15px'
    });

Raychat.setUser()

باستخدام هذه الدالة يمكنك إرسال بيانات المستخدم الذي سجّل دخوله إلى موقعك إلى ريتشات.

FIELD	TYPE	DESCRIPTION
email	string	بريد المستخدم المسجّل
name	string	اسم المستخدم المسجّل
about	string	معلومات عن المستخدم المسجّل
phone	string	هاتف المستخدم المسجّل
avatar	string	صورة المستخدم المسجّل
updateOnce	boolean	هل يتم تحديث بيانات المستخدم في كل استدعاء لهذه الدالة

نسخ!

    window.Raychat.setUser({
      email: 'tech@raychat.io',
      name: 'Ehsan Younesi',
      about: 'about me :)',
      phone: '09123456789',
      avatar: 'https://webapp.raychat.io/ehsan.png',
      updateOnce: true
    });

Raychat.getUser()

باستخدام هذه الدالة يمكنك الحصول على بيانات الزائر المتواجد حالياً على الموقع.

القيم المُعادة

KEY	VALUE TYPE	DESCRIPTION
id	string	معرّف المستخدم
name	string	اسم المستخدم
email	string	البريد الإلكتروني
avatar	string	صورة المستخدم
online	string	حالة المستخدم
createdAt	date	تاريخ إنشاء المستخدم
metadata	object	بيانات إضافية
browser	object	معلومات متصفح المستخدم
phone	string	رقم هاتف المستخدم
about	string	بيانات المستخدم

نسخ!

    var user = window.Raychat.getUser();
    //example user object 
    { id: '5992bc6d9e737c900e3058d3',
      name: 'Ehsan Younesi',
      email: 'tech@raychat.io',
      avatar: 'https://webapp.raychat.io/ehsan.png',
      online: true,
      createdAt: 2017-08-15T09:18:37.904Z,
      metadata: {
       userId: "2", // String
       createdAt: "2018-09-29", // Date
       totalPaid: 200000, // Number
       isActive: true // Boolean
      },
     browser : {
       "name" : "Chrome",
       "ver" : "60.0.3112.90",
       "os" : "Windows",
       "mobile" : false
      },
     phone: '0912345678',
     about: 'hello :)'
    }

Raychat.loadUser()

بهذه الدالة يمكنك تحميل المستخدمين الذين يسجّلون دخولهم إلى لوحة المستخدم في نظامك والاحتفاظ بمحادثاتهم بشكل دائم ومستمر؛ وعند تحميل المستخدم بنجاح يُنفَّذ الحدث raychat_new_user_loaded .

ملاحظة: للحصول على معرّف المستخدم يمكنك استخدام الدالة getUser

ملاحظة: تنبّه دائماً إلى أنه عند تحميل مستخدم جديد ستصبح بيانات المستخدم الحالي (المحادثات وغيرها) غير قابلة للوصول إلى الأبد إذا لم تكن قد خزّنت معرّف المستخدم في قاعدة بيانات.

FIELD	TYPE	DESCRIPTION
userId	string	معرّف المستخدم

نسخ!

    window.Raychat.loadUser(userId);

Raychat.unloadUser()

يؤدي إلى حذف جميع بيانات المستخدم من المتصفح، وإذا زار الموقع مجدداً سيُعامَل كمستخدم جديد.

ملاحظة: لتطبيق التغييرات يجب إعادة تحميل متصفح المستخدم بعد استدعاء هذه الدالة.

ملاحظة: إذا لم تخزّن معرّف المستخدم قبل استدعاء هذه الدالة فإن إعادة تحميل هذا المستخدم ستكون مستحيلة .

نسخ!

    window.Raychat.unloadUser();

Raychat.sendOfflineMessage()

إرسال رسالة عبر أداة ريتشات إلى المستخدم.

ملاحظة: تُعرض هذه الرسالة فقط من جانب المستخدم ولا يستطيع المشغّل رؤيتها، كما أنها لا تُحتسب محادثة وتُحذف عند تحديث الصفحة.

نسخ!

    window.Raychat.sendOfflineMessage('سلام وقت بخیر');

Raychat.openWidget()

باستخدام هذه الدالة يمكنك فتح أداة الدردشة.

نسخ!

    window.Raychat.openWidget();

Raychat.closeWidget()

باستخدام هذه الدالة يمكنك إغلاق أداة الدردشة.

نسخ!

    window.Raychat.closeWidget();

Raychat.toggle()

إذا كانت أداة الدردشة مفتوحة عند استدعاء هذه الدالة ستُغلق، والعكس صحيح.

نسخ!

    window.Raychat.toggle();

Raychat.hideWidget()

يُخفي أيقونة الأداة عن نظر المستخدم.

ملاحظة: عند استلام رسالة جديدة من المشغّلين أو تفعيل الرسائل الذكية تُعرض الأداة تلقائياً وبعد إغلاق المستخدم للرسالة تُخفى أيقونة الأداة أيضاً.

لإعادة عرض الأداة استخدم الدالة showWidget .

لمنع الظهور المؤقت للأداة عند التحميل الأولي للصفحة قبل الإخفاء أضف المعامل RAYCHAT_HIDE_WIDGET_ON_INIT إلى كود التثبيت.

نسخ!

    window.Raychat.hideWidget();

Raychat.showWidget()

يعرض أيقونة الأداة إذا كانت مخفية.

ملاحظة: تبقى الأداة ظاهرة حتى تُخفى يدوياً أو تُحدَّث الصفحة.

لإخفاء الأداة استخدم الدالة hideWidget .

نسخ!

    window.Raychat.showWidget();

Raychat.animate()

تخصيص حالة الحركة لأيقونة أداة الدردشة. يجعل ذلك انتباه المستخدم ينصبّ أكثر على الأداة مما يزيد احتمال بدء المستخدم للمحادثة.

ANIMATIONS
bounce
wobble
tada
shakeX
shakeY
headShake
rubberBand
swing
jello
rotateIn
pulse
heartBeat
flip

نسخ!

    window.Raychat.animate('tada');

Raychat.isWidgetOpen()

باستخدام هذه الدالة يمكن تحديد ما إذا كانت أداة الدردشة مفتوحة أم لا.

RESULT	ANIMATIONS
true	مفتوحة
false	مغلقة

نسخ!

    window.Raychat.isWidgetOpen();

الأحداث

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

raychat_user_profile_updated

يُنفَّذ هذا الحدث عند تحديث بيانات المستخدم، مثلاً عند تسجيل المستخدم لبريده الإلكتروني في قسم الاشتراك.

نسخ!

    window.Raychat.on('raychat_user_profile_updated', function (user) {
    });

open

يُنفَّذ هذا الحدث عند فتح المستخدم لأداة الدردشة.

نسخ!

    window.Raychat.on('open', function (s) {
    });

close

يُنفَّذ هذا الحدث عند إغلاق المستخدم لأداة الدردشة.

نسخ!

    window.Raychat.on('close', function (s) {
    });

حدث SendForm

باستخدام هذه الطريقة، يمكنك عرض النموذج المطلوب باستخدام API. يمكنك أيضًا تتبع القيم التي أدخلها مستخدمو موقع الويب الخاص بك باستخدام حدث raychat_form_submission.

FIELD	TYPE	DESCRIPTION
inputs	array	يمكنك تحديد حقول النموذج المطلوبة من خلال هذه القيمة. يتم تحديد تفاصيل هذا الحقل في الجدول الثاني.
message	string	الرسالة المعروضة مع النموذج.
title	string	عنوان النموذج.
notSendToServer	boolean	اضبطه على true إذا كنت لا تريد حفظ القيم المستلمة من المستخدم في قاعدة بيانات Raychat.
disableChatbox	boolean	اضبطه على true لتعطيل صندوق الدردشة أثناء قيام المستخدم بإدخال القيم.
formName	string	الاسم المحدد للنموذج.

تفاصيل حقل inputs

FIELD	TYPE	DESCRIPTION
label	string	تسمية أو وصف الحقل.
type	string	نوع حقل الإدخال.

نسخ!

    window.Raychat.sendForm({
          // type can be number, phone, email, name and string (custom fields)
          inputs: [
            {
                "label": "سن",
                "type": "number"
            },
            {
                "label": "تلفن",
                "type": "phone"
            },
            {
              "label": "ایمیل",
              "type": "email"
            },
            {
              "label": "فیلد دلخواه",
              "type": "string"
            }
        ],
            message: "اطلاعات را وارد کنید",
            title: "عنوان فرم",
            notSendToServer: false,
            disableChatbox: false,
            formName: "customForm"
        })

حدث تقديم نموذج Raychat

يتم تنفيذ هذا الحدث بعد تقديم النموذج من قبل زائر موقعك، ويتم تمرير كائن يحتوي على معلومات مثل نوع النموذج ومصفوفة من المعلومات التي أدخلها الزائر إلى رد الاتصال.

يمكن رؤية تنسيق المعلومات المدخلة في الجدول أدناه.

FIELD	TYPE	DESCRIPTION
id	number	موضع الحقل
label	string	تسمية الحقل
value	string	القيمة المدخلة
type	string	نوع الحقل

أيضًا، يتم سرد أنواع النماذج في الجدول أدناه. لاحظ أنه إذا تم تعيين اسم محدد في واجهة برمجة التطبيقات للنموذج، فسيتم إرجاع هذا الاسم.

TYPE	DESCRIPTION
officeHours	نموذج ساعات العمل
notOfficeHours	نموذج خارج ساعات العمل
api	نموذج تم إنشاؤه بواسطة واجهة برمجة التطبيقات

نسخ!


        window.Raychat.on('raychat_form_submission', function ({detail}) {
          // officeHours, notOfficeHours, api
          const formName = detail.formName;
          const inputValues = detail.values;
        });

raychat_new_user_loaded

يُنفَّذ هذا الحدث عند تحميل مستخدم باستخدام الدالة loadUser .

نسخ!

    window.Raychat.on('raychat_new_user_loaded', function (s) {
    });

raychat_sendMessage

يُنفَّذ هذا الحدث عند إرسال المستخدم رسالة من الأداة

FIELD	TYPE	DESCRIPTION
type	string	نوع الرسالة: text, image, audio, video, compress, file
content	string	محتوى الرسالة

نسخ!

    window.Raychat.on('raychat_sendMessage', function (d) {
            // your code here:
            // const detail = d.detail
            // ..
    });

raychat_getMessage

يُنفَّذ هذا الحدث عند استلام رسالة من المشغّل في الأداة

FIELD	TYPE	DESCRIPTION
type	string	نوع الرسالة: text, image, audio, video, compress, file
content	string	محتوى الرسالة

نسخ!

    window.Raychat.on('raychat_getMessage', function (d) {
          // your code here:
          // const detail = d.detail
          // ..
    });

الأحداث المستخدمة في الخدمة عبر Tag Manager

يوفر لك ريتشات بإتاحته أحداثاً متنوعة إمكانية استلام جميع سلوكيات الأداة وإرسالها عند الحاجة إلى خدمات جانبية أخرى وفق متطلبات أعمالك. في هذا القسم ستجد نماذج لاستلام البيانات وإرسالها إلى خدمة Google Tag Manager. مزيد من المعلومات

ملاحظة: يجب كتابة جميع الدوال والأحداث الموضحة أدناه وفق التعليمات داخل حدث raychat_ready.

نسخ!

    window.addEventListener('raychat_ready', function (ets) {
            window.Raychat.on("close", function () { 
              window.dataLayer = window.dataLayer || []; 
              window.dataLayer.push({ 
                  'event': 'raychat_close', 
                  // other options
              }); 
          }); 
    });

تتبع حدث فتح الأداة في Tag Manager

بالكود التالي يمكنك تتبع عدد مرات فتح الأداة على موقعك

نسخ!


        <!-- Event listener for Raychat widget's open event --> 
        <script> 
          window.Raychat.on("open", function () { 
              window.dataLayer = window.dataLayer || []; 
              window.dataLayer.push({ 
                  'event': 'raychat_open', 
                  // other options
              }); 
          }); 
        </script>

تتبع حدث إغلاق الأداة في Tag Manager

بالكود التالي يمكنك تتبع عدد مرات إغلاق الأداة على موقعك

نسخ!


        <!-- Event listener for Raychat widget's close event --> 
        <script> 
          window.Raychat.on("close", function () { 
              window.dataLayer = window.dataLayer || []; 
              window.dataLayer.push({ 
                  'event': 'raychat_close', 
                  // other options
              }); 
          }); 
        </script>

تتبع حدث إرسال رسالة من المستخدم

بالكود التالي يمكنك تتبع إرسال الرسائل على موقعك

نسخ!

 
        <!-- Event listener for Raychat widget's send message event --> 
        <script> 
          window.Raychat.on("raychat_sendMessage", function (d) { 
              window.dataLayer = window.dataLayer || []; 
              window.dataLayer.push({ 
                  'event': 'raychat_sendMessage', 
                  // other options
              }); 
          }); 
        </script>

تتبع حدث استلام رسالة في Tag Manager

بالكود التالي يمكنك تتبع استلام الرسائل

نسخ!


        <!-- Event listener for Raychat widget's get message event --> 
        <script> 
          window.Raychat.on("raychat_getMessage", function (d) { 
              window.dataLayer = window.dataLayer || []; 
              window.dataLayer.push({ 
                  'event': 'raychat_getMessage', 
                  // other options
              }); 
          }); 
        </script>

معاملات تثبيت الأداة

في هذا القسم يمكنك الحصول على كود التثبيت المناسب لإعدادات الأداة كاللغة ونوع التحميل.

ملاحظة: لاحظ أنه بالنسبة لجميع نماذج الأكواد أدناه، يجب استبدال YOUR_WIDGET_TOKEN بالرمز الذي تتلقاه من قسم التثبيت في لوحة التحكم.

نسخ!


        <!--BEGIN OF RAYCHAT CODE-->
        <script type="text/javascript">
            window.RAYCHAT_TOKEN = "YOUR_WIDGET_TOKEN";
            (function () {
                d = document;
                s = d.createElement("script");
                s.src = "https://widget-react.raychat.io/install/widget.js";
                s.async = 1;
                d.getElementsByTagName("head")[0].appendChild(s);
            })();
        </script>
        <!--END OF RAYCHAT CODE-->

لغة الأداة

بحسب اللغة المطلوبة لأداتك يمكنك استخدام القيم التالية ووضعها في كود التثبيت

LANG	VALUE	FIELD
الفارسية	fa	RAYCHAT_WIDGET_LANG
الإنجليزية	en	RAYCHAT_WIDGET_LANG
العربية	ar	RAYCHAT_WIDGET_LANG
التركية	tr	RAYCHAT_WIDGET_LANG
الكردية	ku	RAYCHAT_WIDGET_LANG

نسخ!


        <!--BEGIN OF RAYCHAT CODE-->
        <script type="text/javascript">
          window.RAYCHAT_TOKEN = "YOUR_WIDGET_TOKEN";
          window.RAYCHAT_WIDGET_LANG ="en";
            (function () {
                d = document;
                s = d.createElement("script");
                s.src = "https://widget-react.raychat.io/install/widget.js";
                s.async = 1;
                d.getElementsByTagName("head")[0].appendChild(s);
            })();
        </script>
        <!--END OF RAYCHAT CODE-->

نوع تحميل الأداة

باستخدام المعاملات التالية يمكنك تحميل الكود بشكل أسرع أو أكثر توافقاً مع SEO

لاحظ أنه إذا لم يتم تحديد أي معلمة في هذا القسم، فسيتم تحميل الأداة بشكل طبيعي. في التحميل العادي، سيتم تحميل الأداة بعد تحميل جميع أجزاء موقع الويب الخاص بك.

TYPE	VALUE	FIELD	DESCRIPTION
تحميل سريع	FAST_LOAD	LOAD_TYPE	يتم تحميل الأداة بالتزامن مع موقع الويب الخاص بك.
صديق للسيو	SEO_FRIENDLY	LOAD_TYPE	لمنع اكتشاف الأداة بواسطة روبوتات Google SEO والتأثير على مُحسّنات محرّكات البحث لموقعك على الويب، سيتم تحميل الأداة بعد تفاعل المستخدم.

نسخ!


        <!--BEGIN OF RAYCHAT CODE-->
        <script type="text/javascript">
          window.RAYCHAT_TOKEN = "YOUR_WIDGET_TOKEN";
          window.LOAD_TYPE = "SEO_FRIENDLY";
            (function () {
                d = document;
                s = d.createElement("script");
                s.src = "https://widget-react.raychat.io/install/widget.js";
                s.async = 1;
                d.getElementsByTagName("head")[0].appendChild(s);
            })();
        </script> 
        <!--END OF RAYCHAT CODE-->

عرض الأداة بوضع ملء الشاشة

باستخدام هذا المعامل يمكنك عرض الأداة دائماً بوضع ملء الشاشة على موقعك

FIELD	VALUE
RAYCHAT_ALWAYS_FULLSCREEN	true

نسخ!


        <!--BEGIN OF RAYCHAT CODE-->
        <script type="text/javascript">
          window.RAYCHAT_TOKEN = "YOUR_WIDGET_TOKEN";
          window.RAYCHAT_ALWAYS_FULLSCREEN = true;
            (function () {
                d = document;
                s = d.createElement("script");
                s.src = "https://widget-react.raychat.io/install/widget.js";
                s.async = 1;
                d.getElementsByTagName("head")[0].appendChild(s);
            })();
        </script>
        <!--END OF RAYCHAT CODE-->

إخفاء الأداة عند التحميل الأولي

يمنع الظهور المؤقت للأداة عند تحميل الصفحة قبل إخفائها.

عند التفعيل ستكون الأداة مخفية تماماً عند التحميل الأولي للصفحة.

ملاحظة: يمكنك التحكم في عرض الأداة برمجياً باستخدام hideWidget .

FIELD	VALUE	DESCRIPTION
RAYCHAT_HIDE_WIDGET_ON_INIT	true	عند التفعيل ستكون الأداة مخفية عند التحميل الأولي للصفحة

نسخ!

<!--BEGIN OF RAYCHAT CODE-->
<script type="text/javascript">
  window.RAYCHAT_TOKEN = "YOUR_WIDGET_TOKEN";
  window.RAYCHAT_HIDE_WIDGET_ON_INIT = true;
  (function () {
    var d = document;
    var s = d.createElement("script");
    s.src = "https://widget-react.raychat.io/install/widget.js";
    s.async = 1;
    d.getElementsByTagName("head")[0].appendChild(s);
  })();
</script>
<!--END OF RAYCHAT CODE-->

تثبيت الأداة على أنواع الأطر البرمجية

فيما يلي طريقة تثبيت ريتشات على الأطر البرمجية المختلفة.

نسخ!


        <!--BEGIN OF RAYCHAT CODE-->
        <script type="text/javascript">
          window.RAYCHAT_TOKEN = "YOUR_WIDGET_TOKEN";
            (function () {
                d = document;
                s = d.createElement("script");
                s.src = "https://widget-react.raychat.io/install/widget.js";
                s.async = 1;
                d.getElementsByTagName("head")[0].appendChild(s);
            })();
        </script> 
        <!--END OF RAYCHAT CODE-->

تثبيت الأداة على إطار React.js

لتثبيت ريتشات على إطار React.js يمكنك وضع كود التثبيت في ملف index.html داخل مجلد public قبل نهاية وسم head

نسخ!


        <!--BEGIN OF RAYCHAT CODE-->
        <script type="text/javascript">
          window.RAYCHAT_TOKEN = "YOUR_WIDGET_TOKEN";
            (function () {
                d = document;
                s = d.createElement("script");
                s.src = "https://widget-react.raychat.io/install/widget.js";
                s.async = 1;
                d.getElementsByTagName("head")[0].appendChild(s);
            })();
        </script> 
        <!--END OF RAYCHAT CODE-->

تثبيت الأداة على إطار Next.js

لتثبيت الأداة على إطار next.js يمكنك وضع كود التثبيت كما يلي في ملف _app.js في برنامجك:

نسخ!


        <Script
          id="raychat-widget"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: "
                window.RAYCHAT_TOKEN = "YOUR_WIDGET_TOKEN";
                (function () {
                    const d = document;
                    const s = d.createElement("script");
                    s.src = "https://widget-react.raychat.io/install/widget.js";
                    s.async = true;
                    d.getElementsByTagName("head")[0].appendChild(s);
              
                })();",
          }}
        />

تثبيت الأداة على إطار Vue.js

لتثبيت ريتشات على إطار Vue.js يمكنك وضع كود التثبيت في ملف index.html داخل مجلد public قبل نهاية وسم head

نسخ!


        <!--BEGIN OF RAYCHAT CODE-->
        <script type="text/javascript">
        window.RAYCHAT_TOKEN = "YOUR_WIDGET_TOKEN";
          (function () {
              d = document;
              s = d.createElement("script");
              s.src = "https://widget-react.raychat.io/install/widget.js";
              s.async = 1;
              d.getElementsByTagName("head")[0].appendChild(s);
          })();
        </script> 
        <!--END OF RAYCHAT CODE-->

تثبيت الأداة على إطار AngularJS

لتثبيت ريتشات على إطار AngularJS يمكنك وضع كود التثبيت في ملف index.html داخل مجلد src قبل نهاية وسم head

نسخ!


        <!--BEGIN OF RAYCHAT CODE-->
        <script type="text/javascript">
          window.RAYCHAT_TOKEN = "YOUR_WIDGET_TOKEN";
            (function () {
                d = document;
                s = d.createElement("script");
                s.src = "https://widget-react.raychat.io/install/widget.js";
                s.async = 1;
                d.getElementsByTagName("head")[0].appendChild(s);
            })();
        </script> 
        <!--END OF RAYCHAT CODE-->