# أنشئ تجربة الدردشة الخاصة بك

تجعل أدوات Zoom من السهل تخصيص وإطلاق تجربة دردشة الخاصة بك مع القليل من التعليمات البرمجية أو بدونها.

### نافذة تفاعل الدردشة

نافذة تفاعل الدردشة هي الطريقة التي يرسل بها مستخدموك الرسائل إلى وكيلك الافتراضي أو الوكيل البشري. باستخدام أدوات Zoom، يمكنك إنشاء نافذة دردشة يسهل رؤيتها والتفاعل معها وتتناسب مع علامة شركتك التجارية.

لإنشاء أو تحرير نافذة تفاعل الدردشة الخاصة بك، انتقل إلى مسؤول الويب الخاص بـ Zoom.

من هناك انقر **+إضافة Campaign** أو افتح مسودة Campaign موجودة. مرر إلى **نافذة تفاعل الدردشة** القسم لإنشاء أو تحرير نافذتك.

#### <mark style="color:أزرق;">حجم النافذة وتجربة الهاتف المحمول</mark>

نافذة تفاعل الدردشة الخاصة بـ Zoom متجاوبة، مما يعني أنها تتكيف تلقائيًا مع التخطيط إذا وصل مستخدمك إلى موقعك من سطح المكتب أو الهاتف الذكي.

على الأجهزة المحمولة، تفتح نافذة الدردشة بملء الشاشة لتعظيم مساحة الشاشة المحدودة وضمان تجربة نظيفة وسهلة القراءة.

<figure><img src="/files/1b819d18975c7c1ce26538593d837002071a3ef7" alt="Image of mobile Zoom Virtual Agent window, opened full-screen." width="375"><figcaption></figcaption></figure>

<figure><img src="/files/d03942195ce7abc9d61e6da21cdf00e8203bd17e" alt="" width="375"><figcaption></figcaption></figure>

للمستخدمين الذين يصلون إلى دردشتك على أجهزة سطح المكتب، يمكنك اختر من بين ثلاثة خيارات للحجم لارتفاع النافذة:

* **S:** 540 بكسل
* **M:** 650 بكسل، **افتراضي**
* **L:** 780 بكسل

{% hint style="info" %}
**ملاحظة**

العرض ثابت دائمًا عند 420 بكسل لضمان سهولة القراءة.
{% endhint %}

<figure><img src="/files/322e5d6c433f5ef0821e89107915cce4361955aa" alt="Image of desktop Zoom Virtual Agent window, opened in the lower right corner of the window."><figcaption></figcaption></figure>

#### <mark style="color:أزرق;">شريط العنوان</mark>

الـ **شريط عنوان الدردشة** هو عنصر أساسي في تصميم دردشة الخاص بك. عند تصميمه بعناية، يمنح المستخدمين سياقًا حول ما يمكن توقعه من تجربة الدعم الخاصة بهم وثقةً في المحادثة. يمكنك استخدام شريط العنوان لمشاركة معلومات حول فريق الدعم الخاص بك و/أو إضافة شعار علامتك التجارية أو ألوانها.

تقدم Zoom CX عدة خيارات لتصميم شريط العنوان يمكنك اختر من بينها.

**صورة العنوان الكاملة**

إضافة صورة بحجم 426 بكسل × 95 بكسل تملأ مساحة شريط العنوان بالكامل، وهي رائعة للتصاميم المخصصة.

<figure><img src="/files/082440594f648d549b8e14df36e36ee956d2d175" alt="This image shows a chat window with a blue gradient header that says Zoom Virtual Agent. The image fills the header space." width="375"><figcaption></figcaption></figure>

**حجم صورة الأفاتار**

إضافة صورة بحجم 40 × 40 بكسل لتظهر في شريط العنوان، سواء بمفردها أو بجانب نص العنوان.

{% columns %}
{% column %}

<figure><img src="/files/f2e9d88570dbf1fe3501b5eaffaff39790ef27c1" alt="Image of a chat screen with Zoom logo in the header bar."><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/d03942195ce7abc9d61e6da21cdf00e8203bd17e" alt="Image of a chat screen with Zoom logo and header text in the header bar."><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

**نص العنوان فقط**

شارك ملاحظة قصيرة عن أي شيء، مثل اسم فريقك أو التوفر أو ساعات الدعم. تحكّم في حجم نص العنوان باستخدام H1 أو H2 أو H3 أو حجم فقرة النص.

<figure><img src="/files/2e51030cf727c9031ea4dfab3d198cfd4873d647" alt="Image of a chat screen with header text only in the header bar." width="375"><figcaption></figcaption></figure>

للحصول على تصميم مبسط وبسيط، يمكنك أن تختار أن **تتركه فارغًا**، مع تركيز المستخدمين على دردشة.

<figure><img src="/files/1ce943fe1e577b9514729a2f37e6bb770a06f793" alt="Image of a chat screen with nothing in the header bar." width="375"><figcaption></figcaption></figure>

يمكنك استخدام **يحدد أي لون لخلفية الرأس والأيقونات**، وهو مفيد لربط تصميم دردشة بموقعك الإلكتروني.

{% hint style="warning" %}
**تنبيه**

إذا غيّرت لون الخلفية، فتأكد من أنك لا تزال قادرًا على رؤية أيقونات التصغير والقائمة. قد تحتاج أيضًا إلى تغيير لون الأيقونة.

<img src="/files/15efa2fb4a62b4b40dc5f9b62141712f0c7cb0f9" alt="Image of a chat screen with a blue header bar, with no logo or text." data-size="original">
{% endhint %}

#### <mark style="color:أزرق;">ألوان فقاعة دردشة، والنص، والأيقونات، والمزيد</mark>

يتيح لك منشئ نافذة التفاعل اختيار الألوان الدقيقة التي تريدها لـ دردشة. ستدخل رموز hex لكل جزء من النافذة وتراجع المعاينة لترى كيف تبدو.

توفّر Zoom قالبًا للبدء. وللحفاظ على مظهر رائع (وسهولة القراءة)، التزم بألوان علامتك التجارية وتأكد من وجود تباين كافٍ بين ألوان النص والخلفية.

<figure><img src="/files/2ad3f119fde818d39a7dfb16cd0623ceffb19b06" alt="Image of the template for formatting your engagement window."><figcaption></figcaption></figure>

#### <mark style="color:أزرق;">شاشة الترحيب</mark>

الـ **شاشة الترحيب** في Zoom مركز الاتصال وZoom Virtual Agent هي شاشة تمهيدية اختيارية تظهر قبل أن تبدأ الدردشة، مما يمنحك فرصة للترحيب بعملائك وجمع المعلومات منهم ومواءمة التجربة مع علامتك التجارية.

هذا متاح لتجربة دردشة الويب. لـ كوَّن، انقر على **تفاعل الدردشة** النافذة، ثم **شاشة الترحيب** علامة تبويب.

***

### تصميم الدعوة

الدعوة هي ما سيؤدي إلى تشغيل تجربة الدعم على موقع الويب الخاص بك. ومن الأكثر شيوعًا استخدام [**مثبّت** نوع الدعوة](/technical-library/technical-library-ar/khdmat-alaamal/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md#the-parts)، وهي أيقونة عائمة تظهر على موقع الويب الخاص بك. عندما ينقر مستخدموك عليها، ستُفتح نافذة دردشة وتبدأ تجربتهم.

لإنشاء الدعوة أو تعديلها، انتقل إلى مسؤول الويب في Zoom.

من هناك، انقر على **+إضافة Campaign** أو افتح مسودة Campaign موجودة. مرر إلى **الدعوة** قسم لإنشاء دعوة جديدة.

<figure><img src="/files/f01b649ad3f71e38743f75cc2acd3a4b7c57bb36" alt="Image of a Zoom Support window that says &#x22;Hello! How can we help?&#x22;" width="375"><figcaption></figcaption></figure>

يمكنك كوَّن الإعدادات التالية لـ **الدعوة الثابتة** أيقونة:

* **حجم الزر:** يجب أن يكون حجم أيقونة الدعوة للدردشة كبيرًا بما يكفي ليتم ملاحظته والنقر عليه أو لمسه بسهولة، ولكن ليس كبيرًا جدًا لدرجة أنه يعطل تجربة مستخدم أو يغطي محتوى مهمًا. يوفّر Zoom ثلاثة أحجام للدعوة:
  * **S:** 40 بكسل
  * **M:** 56 بكسل، **افتراضي**
  * **L:** 72 بكسل
* **لون الزر:** اختر لون زر يتمتع بتباين عالٍ مع خلفية موقع الويب الخاص بك. نوصي باتباع [إرشادات WCAG 2.1](https://www.w3.org/TR/WCAG21/#contrast-minimum)، وهي نسبة تباين دنيا تبلغ 3:1 لمكونات واجهة مستخدم (UI)، مثل الأيقونات والأزرار، مقارنةً بخلفيتها.
* **الأيقونة:** يمكن أن تساعد الأيقونة مستخدميك على تكوين فكرة عما يمكنهم توقعه عند لمس الزر. يوفّر Zoom بعض التصميمات افتراضي للاختيار من بينها والتي تشير إلى بدء دردشة. يمكنك أيضًا إضافة أيقونتك المخصصة باستخدام ملف SVG. يجب أن تكون ملفات SVG أقل من 10 ميغابايت.
* **نصف قطر الزاوية:** إلى أي مدى تريد أن تكون أيقونة الدعوة مستديرة أو مربعة؟ ألقِ نظرة على موقع الويب الخاص بك لمعرفة ما إذا كان موقع الويب الخاص بك يتبع نمطًا معينًا في شكل الأزرار، أو اسأل فريق العلامة التجارية لديك إن كانت لديهم تفضيلات. إن استخدام نصف قطر زاوية أقل، مثل 8 بكسل، سيجعل الدعوة أكثر تربيعًا. أما نصف قطر زاوية أكبر، مثل 28 بكسل، فسيجعل الدعوة أكثر استدارة.
* **إضافة نص إلى دعوتك:** إن إضافة تسمية نصية إلى زر الدعوة تجعلها أكثر وضوحًا وجاذبية. يعرف المستخدمون على الفور الغرض من الزر، لذلك لا يكون هناك تخمين بشأن معنى الأيقونة. ومع ذلك، فإنه يشغل مساحة أكبر وقد يسبب ازدحامًا على شاشة، خاصة على الهاتف المحمول. تأكد من مراعاة جمهورك والأجهزة التي يستخدمونها بشكل أكثر شيوعًا. إذا كنت تضيف خطًا، يمكنك اختر من خيارات الخطوط المعدّة مسبقًا Arial أو Georgia أو Tahoma أو Verdana؛ أو رفع خطك المخصص باستخدام ملف TTF.

#### <mark style="color:أزرق;">**موقع الدعوة على الصفحة**</mark>

أكثر موقع شيوعًا لأيقونة دعوة الدعم هو الزاوية السفلية اليمنى، مع إزاحة من الأسفل والجانب بمقدار 20 بكسل. يكون هذا عادةً سهل الملاحظة من دون حجب المحتوى الأساسي.

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

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

{% hint style="success" %}
**مثال**

إذا وجدت أن زر دعوة الدردشة يغطي رابطًا مهمًا في أسفل صفحتك على الأجهزة المحمولة، فقم بزيادة الإزاحة حتى لا تعود أيقونة الدعوة تغطي ذلك العنصر.
{% endhint %}

يمكنك أيضًا "تمكين المستهلكين من سحب الدعوة وتحريكها" لمنح مستخدميك مرونة أكبر في تحريك الأيقونة داخل الصفحة.

#### <mark style="color:أزرق;">سؤال شائع</mark>

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

**الإجابة:**

هناك عدة طرق يمكنك من خلالها تحقيق ذلك.

* **الخيار 1:** غيّر موضع أيقونة الدعوة على الصفحة. يمكنك نقل موضع الدعوة على الصفحة باستخدام خيارات الإزاحة والموضع. يتم تكوين ذلك من خلال تعديل الدعوة.
* **الخيار 2:** عرض أو إخفاء أيقونة الدردشة استنادًا إلى موقع الصفحة. إذا كنت تريد إزالة دعوة الدردشة بالكامل من جميع صفحات إتمام الشراء، فعدّل الموقع لاستبعاد صفحات إتمام الشراء. على سبيل المثال، يمكنك استبعاد جميع الصفحات التي تحتوي على "checkout" في عنوان URL.
* **الخيار 3:** قم بإعداد الاستهداف حسب جهاز. إذا كنت لا تريد أن تظهر أيقونة الدعوة على مواقع الهاتف المحمول، فأزل تحديد خيار "mobile phone" ضمن استهداف الحملة. للإعداد، انقر على **الحملة**, **الاستهداف**.

توفّر Zoom Campaigns خيار [**دعوة مضمنة**](/technical-library/technical-library-ar/khdmat-alaamal/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md#the-parts) إذا كنت لا تريد استخدام الأيقونة الثابتة افتراضي لبدء دردشة. يتيح لك ذلك تحويل أي عنصر على موقع الويب الخاص بك، مثل زر في القائمة أو رابط في صفحة، إلى مُشغّل لفتح نافذة الدردشة.

للقيام بذلك، تنشئ العنصر في HTML الخاص بموقعك وتستخدم Zoom Campaign SDK لربطه بالدردشة. عندما ينقر مستخدم على ذلك العنصر، فإنه يطلق نافذة الدردشة ويبدأ تجربة الحملة. يمكنك أيضًا استخدام HTML الموجود بالفعل على موقع الويب الخاص بك لتشغيل نافذة الدردشة إذا كنت تفضل ذلك.

<figure><img src="/files/01963b903f02cb7ae4bf5cf3432fd9c71c14162b" alt="Image of the Create Embedded Invitation screen." width="375"><figcaption></figcaption></figure>

{% hint style="warning" %}
**تنبيه**

هل تريد كلاً من أيقونة الدعوة الثابتة وتشغيل فتح الدردشة عبر النقر على زر في موقع الويب الخاص بك؟

أنشئ حملة باستخدام خيار الدعوة الثابتة، ثم استخدم [Zoom Campaign SDK](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) لتشغيل فتح الدردشة.
{% endhint %}

***

### إرسال الرسائل الاستباقي

ماذا لو أردت طريقة أكثر نشاطًا للحصول على انتباه المستخدم حتى يتحدث مع فريقك أو وكيلك الافتراضي؟ تتيح ميزة إرسال الرسائل الاستباقي من Zoom أن كوَّن الشركات لبدء المحادثات مع الزوار، بدلًا من انتظار العميل لبدء الدردشة بالنقر على الدعوة.

#### <mark style="color:أزرق;">كيف يساعد ذلك</mark>

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

عندما يصل مستخدم إلى صفحة مفعَّل فيها إرسال الرسائل الاستباقي، سيتلقى رسالة ويمكنه النقر على الأزرار لبدء مسار محدد.

#### <mark style="color:أزرق;">مكان الإعداد</mark>

تُعد هذه الميزة ضمن **الحملات**، وهي متاحة لحملات دردشة على صفحات الويب التي تستخدم **مثبّت** نوع الدعوة.

#### <mark style="color:أزرق;">استهدف مستخدميك</mark>

يمكنك ضبط الرسالة الاستباقية لتتضمن تأخيرًا، بحيث لا تظهر إلا للمستخدمين الذين قضوا وقتًا محددًا على تلك الصفحة. يمكنك أيضًا اختر ما إذا كنت تريد أن يرى مستخدم الرسالة مرة واحدة فقط خلال فترة 24 ساعة، أو إذا كنت تريد أن تظهر الرسالة الاستباقية مرة أخرى إذا قام مستخدم بتحديث الصفحة أو زار صفحة أخرى مطابقة.

<figure><img src="/files/de09d0cd28db6c7d8339f58888e2b9d93ad6e157" alt="Image of a Zoom Campaign window that asks &#x22;How can I help&#x22;." width="191"><figcaption></figcaption></figure>

#### <mark style="color:أزرق;">سؤال شائع</mark>

أريد أن يكون لدي رمز دعوة حتى يتمكن مستخدمي من بدء دردشة في أي وقت، ولكنني أريد أيضًا إرسال رسالة استباقية إلى عملائي على صفحة محددة (على سبيل المثال، صفحة التسعير الخاصة بشركتي). كيف أُعدّ هذا؟

**الإجابة**

ستحتاج إلى إنشاء حملتين: واحدة لدعوتك معياري عبر موقعك بالكامل ("الحملة A"), وأخرى ("الحملة B") للصفحة التي تريد فيها أن تكون لديك رسالة استباقية.

لكل حملة، ستحتاج إلى تحديد مواقع الحملة بحيث لا تتداخل.

{% hint style="success" %}
**مثال**

يجب أن يستثني موقع الحملة A "zoom.us/pricing" وأن يحتوي موقع الحملة B على "zoom.us/pricing." بهذه الطريقة، سيرى المستخدمون الذين يزورون أي عنوان URL يتضمن "zoom.us" الدعوة العادية، لكن المستخدمون الذين يصلون إلى الصفحة المحددة "zoom.us/pricing" ستظهر لهم الرسالة الاستباقية.
{% endhint %}

***

### الصور الرمزية

الصورة الرمزية هي الصورة التي تظهر بجانب الرسائل في دردشة الويب. وهي تساعد في إضفاء طابع شخصي وهوية العلامة التجارية على المحادثة.

<figure><img src="/files/33f8cd9ca6ec1e62b83cfa6627ca67904873c5ab" alt="Image of the Zoom Virtual Agent avatar, including a picture of a woman with dark hair and a headset." width="375"><figcaption></figcaption></figure>

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

إذا كنت تستخدم **Zoom مركز الاتصال**، فانقر على ما يلي:

1. التفضيلات
2. تجربة المستهلك
3. صورة رمزية واسم رسالة التدفق افتراضي.

إذا كنت تستخدم **Zoom Virtual Agent فقط**، فانقر على ما يلي:

1. استوديو الذكاء الاصطناعي
2. الوكلاء الافتراضيون
3. روبوتات الدردشة
4. الإعدادات

<figure><img src="/files/e2eaa5738b3d0ee37e9db782f0e6f695e3d35ff5" alt="Side-by-side image of the Customize Name and Avatar screen and a rendering of the settings."><figcaption></figcaption></figure>

عندما ينتقل عميلك من الروبوت إلى وكيل مباشر في Zoom مركز الاتصال، يمكنك أيضًا التحكم في كيفية ظهور الصورة الرمزية للوكيل. يمكنك اختر عرض صورة ملف التعريف الخاصة بالوكيل من مركز الاتصال، أو الأحرف الأولى من اسمه، أو صورة رمزية معيّنة.

للإعداد، انقر فوق ما يلي:

1. التفضيلات
2. تجربة المستهلك
3. عرض الصورة

***

### إعدادات تكوين دردشة إضافية

#### <mark style="color:أزرق;">التحكم في نافذة دردشة الويب باستخدام Zoom Campaign SDK</mark>

تمنح حزمة Zoom مركز الاتصال (ZCC) وZoom Virtual Agent ‏(ZVA) Campaign SDK المطورين مزيدًا من التحكم في كيفية تصرف دردشة الويب وتفاعلها مع موقعك الإلكتروني. فهي تتيح لك فتح الدردشة وإغلاقها والتحكم في سلوك دردشة برمجيًا استنادًا إلى إجراءات مستخدم أو سياق الصفحة أو منطق مخصص.

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

راجع [مرجع SDK في وثائق مطوري Zoom](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) لمزيد من التفاصيل.

#### <mark style="color:أزرق;">استمرارية الدردشة على مستوى الموقع</mark>

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

* **عندما تكون الاستمرارية&#x20;*****مفعلة*****&#x20;(افتراضي):** تبقى الدردشة نفسها مفتوحة عبر الصفحات، بحيث يمكن للمستخدم متابعة محادثته دون انقطاع.
* **عندما تكون الاستمرارية&#x20;*****معطلة*****:** لا تتابع الدردشة عندما ينتقل المستخدم إلى صفحة جديدة، إلا إذا كانت تلك الصفحة جزءًا صريحًا من الموقع المحدد للحملة الأولى.

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

اعثر على هذا الإعداد ضمن **Zoom مركز الاتصال** و **Zoom Virtual Agent Preferences**.

#### <mark style="color:أزرق;">إشعارات الصوت</mark>

افتراضيًا، عندما يرسل وكيلك أو الوكيل الافتراضي رسالة في دردشة الويب، يسمع المستهلكون صوت إشعار. إذا كانت الأصوات الافتراضية تبدو مزعجة لتجربة علامتك التجارية، فيمكنك إيقافها ضمن **Zoom مركز الاتصال** أو **Zoom Virtual Agent Preferences**.

سيظل بإمكان المستهلكين إعادة تمكينها من قائمة الدردشة، إذا فضلوا ذلك.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://library.zoom.com/technical-library/technical-library-ar/khdmat-alaamal/zoom-contact-center/expert-insights/customize-user-chat-support-experience/build-your-chat-experience.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.