الموقع الإلكتروني

توجد ثلاث طرق لإتاحة وكيل Quickchat AI على الويب. اختر ما يناسب الواجهة التي تريد عرضها:

• Widget: فقاعة دردشة عائمة في زاوية موقعك. مناسبة للدعم العام.
• Embed: نافذة دردشة داخل الصفحة تظهر في المكان الذي تختاره بالضبط. مناسبة لتضمين AI داخل شاشة تطبيق محددة أو صفحة مركز مساعدة أو صفحة تفاصيل منتج.
• Chat Page: تجربة دردشة بملء الشاشة يستضيفها Quickchat، دون تثبيت أو كود. مناسبة لمشاركة رابط مع شخص، مثلًا في بريد دعم أو Slack داخلي أو مع مختبري النسخة التجريبية، دون تعديل متصفحه.

ثبّت الواجهة المختارة من Channels → Your Website → Install. تتضمن الصفحة ثلاثة تبويبات فرعية: Install لاختيار طريقة إضافة الوكيل، وAppearance للتصميم المرئي، وText Content للنصوص والتسميات التي يراها الزوار. يبدأ تبويب Install باختيار الطريقة، ويضع ضوابط الإتاحة والوصول في قسم مستقل، ويعرض Scenario ID قابلًا للنسخ تحتاج إليه الإضافات وواجهة API.

أدوات إعداد اختيارية

• قارن طرق النشر. قارن القنوات وإمكانية الوصول إلى الموقع والميزات المطلوبة التي تحددها بخيارات إعداد Quickchat AI. لا تفحص هذه الأداة موقعك أو حسابك.

• قارن HTML وMarkdown لصفحة نموذجية. اجلب HTML الأولي ومحتوى Markdown وروابط الأدوات من نموذج ثابت تابع لـQuickchat AI. لا تشغّل الأداة JavaScript ولا تفحص مواقع عشوائية.

Widget

تتيح Widget تضمين وكيل Quickchat AI مباشرة في موقعك، مما يمنح المستخدمين طريقة سلسة للتفاعل مع AI. تظهر عادة كفقاعة دردشة أسفل يمين الصفحة. وعند الضغط عليها، تتمدد إلى نافذة دردشة يستطيع المستخدمون من خلالها طرح الأسئلة والحصول على المساعدة أو المعلومات.

كيفية إضافة Widget إلى موقعك

افتح Channels → Your Website → Install. يبدأ التبويب بسؤال “How do you want to add your AI Agent?” ويسرد طرق التثبيت بدءًا من الأسهل. اختر ما يناسب موقعك:

• WordPress: ثبّت إضافة Quickchat AI Agent المجانية، والصق Scenario ID، فتظهر Widget تلقائيًا دون تعديل كود القالب.
• Shopify: أضف Widget من محرر قوالب المتجر. راجع دليل Shopify.
• Webflow, Wix & others: انسخ مقتطفًا واحدًا والصقه في إعداد الكود المخصص الذي يطبق على كامل الموقع في أداة بنائه. لا تستخدم عنصر Embed أو HTML داخل صفحة. راجع أدوات بناء المواقع.
• Share a link instead: لا تثبّت شيئًا؛ شارك رابط Chat Page المستضافة.
• Install manually with code: انسخ مقتطف Widget أو Embed الخام والصقه في HTML بنفسك.

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

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

التثبيت اليدوي بالكود

إذا كنت تدير HTML بنفسك، وسّع Install manually with code في تبويب Install، ثم:

1. انسخ مقتطف Widget.
2. افتح ملف HTML للصفحة. وإذا كنت تستخدم أداة لبناء المواقع، فاستخدم إعداد الكود على مستوى الموقع بدلًا من ذلك، كما في أدوات بناء المواقع.
3. الصق المقتطف قبل وسم الإغلاق </body> مباشرة في كل صفحة تريد أن تظهر Widget فيها.

تحقق من مقتطف Widget بمقارنته مع Scenario ID الذي تقدمه. يقرأ الفحص الكود الملصق ولا يجلب موقعك.

أدوات بناء المواقع

في Webflow وWix وSquarespace وHostinger وما يشابهها، أضف Widget مرة واحدة من إعداد الكود على مستوى الموقع:

1. افتح الإعداد الذي يضيف الكود إلى كل الصفحات. قد تسميه الأداة Custom code أو Code injection أو Footer code أو Body end.
2. الصق مقتطف Widget هناك وطبقه على جميع الصفحات. إذا أمكنك تحديد الموضع، فاختر التذييل أو نهاية body. لا يعمل المقتطف داخل head.
3. انشر موقعك. ستظهر فقاعة الدردشة في كل صفحة.

تنبيه

لا تضف Widget باستخدام عنصر Embed أو HTML داخل الصفحة. تعرض كثير من أدوات البناء هذه العناصر داخل إطار صغير منفصل، ولا تستطيع Widget الفتح فيه. وحتى إذا حُمّلت، فلن تظهر إلا في تلك الصفحة الواحدة.

مكان إعداد الكود على مستوى الموقع:

أداة البناء	إعداد الكود على مستوى الموقع
Webflow	Site settings → Custom code → Footer code
Wix	Settings → Custom Code، ثم All pages وBody - end. يتطلب نطاقًا متصلًا.
Squarespace	Custom Code → Code Injection → Footer. خطط Core وPlus وAdvanced وبعض الخطط القديمة.
Hostinger Website Builder	More (⋯) → Integrations → Custom code. تُحمّل السكربتات في نهاية الصفحة تلقائيًا.

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

هل تحتاج إلى مساعدة؟

لست مطورًا؟ يوفر تبويب Install اختصارين ضمن Need a hand?:

• Ask AI for help: يفتح مساعد التطبيق بسؤال مُعدّ مسبقًا عن إضافة الوكيل إلى موقعك.
• Email instructions to a developer: يرسل إلى زميل كل ما يحتاج إليه، بما في ذلك مقتطف Widget ومعرّف Scenario ID ورابط هذا الدليل، ليتمكن من تثبيتها لك.

لمزيد من المساعدة، تواصل معنا على contact@quickchat.ai.

Chat Page

Chat Page نسخة مستضافة بملء الشاشة من وكيل AI، متاحة على رابط Quickchat. لا تحتاج إلى تثبيت شيء؛ شارك الرابط، وسيستطيع الزوار التحدث مع الوكيل مباشرة في متصفحهم. استخدمها عندما:

• تريد تجربة دردشة لكنك لا تملك موقعًا أو لا تريد تعديل كوده.
• تشارك AI داخليًا مع مجموعة صغيرة، مثل مختبري النسخة التجريبية أو فريق الدعم أو عملاء مبيعات محتملين، وتحتاج إلى رابط بتحكم في الوصول بدلًا من Widget عامة.
• تريد إرسال AI كقناة متابعة عبر البريد الإلكتروني أو Slack أو نظام CRM.

اضبط من يمكنه فتح Chat Page من Install → Chat Page Access. راجع التحكم في الوصول أدناه.

بدء محادثة جديدة

لإعادة بدء الدردشة من الصفر:

• Widget أو Embed: افتح الدردشة واضغط زر القلم داخل مربع أعلى يمين نافذة الدردشة.
• Chat Page: اختر New chat في الشريط الجانبي، أو استخدم زر القلم داخل مربع في الرأس.

يبدأ ذلك محادثة جديدة مع وكيل AI. تبقى المحادثة السابقة في Inbox. قد يؤدي إغلاق Widget وفتحها مجددًا أو تحديث الصفحة إلى استئناف المحادثة الحالية. طلب “إعادة الضبط” أو “مسح الدردشة” من AI لا يبدأ محادثة جديدة. ولا تحتاج إلى حذف ملفات تعريف الارتباط في المتصفح.

التحكم في الوصول

يضع تبويب Install ضوابط الوصول في قسم قابل للطي باسم Availability and access. وسّعه للوصول إلى عنصرَي التحكم اللذين ينطبقان على النشر:

وصول Widget وEmbed

المفتاح أعلى Availability and access. عند تفعيله، تعمل سكربتات Widget وEmbed طبيعيًا في متصفحات الزوار. وعند تعطيله، تصبح Widget وEmbed غير متاحتين على الموقع حتى لو بقي السكربت ملصقًا. يفيد ذلك في إيقاف AI مؤقتًا دون حذف المقتطف، أو في تقييد الوصول العام مع إبقاء Chat Page متاحة للمستخدمين المدعوين.

Chat Page Access

بشكل مستقل عن مفتاح Widget وEmbed، يمكنك تقييد من يستطيع فتح Chat Page:

• Anyone: رابط Chat Page عام. يستطيع أي شخص لديه الرابط استخدامه.
• Invited users only: يستطيع فقط Chat Users الذين دعوتهم بالبريد الإلكتروني استخدام Chat Page. سيحتاجون إلى المصادقة.
• Nobody: تُعطّل Chat Page بالكامل.

يفتح رابط Invite Chat Users صفحة Settings → Organization → Team Members. يوفر نموذج الدعوة الحالي أدوار فريق بصلاحيات لوحة التحكم، ولا يوفر دورًا منفصلًا للدردشة فقط أو قسم Chat Users. راجع أعضاء الفريق والأدوار قبل دعوة شخص.

التخصيص

يتيح التبويبان الفرعيان Appearance وText Content تخصيص مظهر Widget وEmbed وChat Page والنصوص التي يراها الزوار. تشترك واجهات النشر الثلاث في هذه الإعدادات، لذلك يكفي تغييرها مرة واحدة لتسري أينما نُشر الوكيل.

تحتوي اللوحة اليمنى في تبويبات Install وAppearance وText Content على ضوابط معاينة مستقلة. بدّل بين معاينات Widget وEmbed وChat Page، وبين مقاسي Desktop وMobile، لترى التغييرات قبل النشر.

المظهر

تنسيق مرئي لواجهات الدردشة، موزع على Branding وSize & Position وTheme وOther Settings.

Branding

• AI Agent Avatar: صورة ملف الوكيل أو شعاره. صورة واحدة تُستخدم في رأس الدردشة وعلى زر التشغيل، بحد أقصى 5 MB. هذا إعداد واحد وليس إعدادين: ارفع صورة واحدة فتظهر في المكانين، بدلًا من إعدادَي “header logo” و”launcher icon” القديمين. يبدأ كل وكيل بصورة افتراضية مدمجة. يعيد Reset to default الصورة الافتراضية، بينما يؤدي حذفها إلى عدم عرض صورة مطلقًا. متاح في كل الخطط، بما فيها Free.

تُطبّق AI Agent Avatar على Widget وEmbed وChat Page، لكنها لا تُطبّق على Discord، حيث تأتي صورة البوت من تطبيق Discord الخاص به. راجع Discord.

Size & Position

• Launcher size: خيارات Classic أو Input Only أو Small. تتحكم في مظهر مشغّل الدردشة قبل فتحه.
• إغلاق المشغّل: يحتوي مشغّل Classic على زر إغلاق صغير أعلى اليمين، يظهر عند تمرير المؤشر على سطح المكتب ويبقى ظاهرًا على الأجهزة اللمسية. يخفي Widget لعرض الصفحة الحالي فقط، ويعود المشغّل عند تحميل الصفحة التالية. لا تحتوي الأحجام الأخرى على زر إغلاق.
• Launcher label: يظهر عند اختيار Small فقط. نص مخصص على زر المشغّل الصغير، حتى 25 حرفًا، مثل “Ask AI” أو “Chat”. اتركه فارغًا ليعرض المشغّل أيقونة فقط.
• Widget position: أسفل اليسار أو أسفل الوسط أو أسفل اليمين.
• أبعاد نافذة الدردشة: العرض (300–700px) والارتفاع (400–1200px).
• Draggable launcher: يتيح للزوار سحب المشغّل إلى موضع آخر في الصفحة. مفيد عندما يغطي محتوى مهمًا.

Theme

اختر ألوان واجهات الدردشة:

• Light وDark إعدادان جاهزان ثابتان بالمظهر نفسه في كل الحسابات.
• يتيح Custom لوحة ألوان كاملة خاصة بك. عند اختياره، تظهر ضوابط ألوان الخلفية والرأس ونص الرأس واللون البارز المستخدم للأزرار، مثل زر بدء ما قبل الدردشة وشرائح الاقتراحات وأزرار التقييم، وفقاعة الرسالة ونصها ونص رسائل AI ولون الروابط وحقل الإدخال والحدود وغير ذلك. يُفحص تباين كل لون مع خلفيته وفق WCAG AA، وتظهر تنبيهات عندما يصعب قراءة تركيب الألوان.

توجد ألوان الرأس واللون البارز الخاصة بالعلامة التجارية في سمة Custom. يبقى Light وDark إعدادين محايدين، فلا ينقل التبديل بينهما أي لون مخصص.

ضمن Transparency، يحدد Background مدى شفافية نافذة الدردشة. يعمل مع كل أوضاع السمة، وتحدد السمة درجة التلوين:

• Solid: خلفية معتمة لنافذة الدردشة. هذا هو الوضع الافتراضي.
• Glass: تصبح النافذة شفافة ويُطمس الموقع خلفها مثل الزجاج المصنفر. يكون التلوين أبيض في Light، وداكنًا في Dark، وبلون الخلفية الذي اخترته في Custom. وفي Custom، يحتفظ الرأس بلونه إذا اختلف عن الخلفية، لتبقى هوية علامتك ظاهرة. تحدد Glass opacity مقدار تغطية التلوين للصفحة، بدءًا من أدنى مستوى يبقي نص السمة مقروءًا فوق أي موقع (50% في Light و65% في Dark وبحسب ألوانك في Custom) وحتى 95%. إذا لم تحقق أي درجة عتامة وضوحًا كافيًا مع ألوان Custom، تستخدم Widget خلفية معتمة وتوضح الإعدادات السبب. يبقى Glass مختارًا ويُطبق مجددًا بمجرد تعديل لون النص أو الخلفية للحصول على تباين كافٍ.

تسري الشفافية على Widget، بما في ذلك الهواتف، وعلى Embed. أما Chat Page بملء الصفحة فلها دائمًا خلفية معتمة. يرى الزوار الذين فعّلوا “Reduce transparency” في أجهزتهم أسلوب Solid في Chrome وEdge، وهما المتصفحان اللذان يمرران هذا الإعداد إلى المواقع. وفي المتصفح الذي لا يستطيع طمس الصفحة، يبقى Glass شبه معتم للحفاظ على وضوح النص.

عند اختيار Custom، تحصل Chat Page أيضًا على ألوان مستقلة للشريط الجانبي: Sidebar background وSidebar text وSidebar hover وSidebar hover text. تنطبق فقط على Chat Page بملء الصفحة، وليس على فقاعة Widget أو Embed. اترك ألوان النص دون تحديد لتختار Chat Page تلقائيًا لونًا مقروءًا للخلفية التي اخترتها.

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

Other Settings

• Voice Input: يتيح للزوار تسجيل رسالة صوتية بميكروفون مربع الدردشة. تُحوّل إلى نص في حقل الإدخال ليتمكنوا من تعديله قبل الإرسال. تتوقف التسجيلات تلقائيًا بعد دقيقتين. متاح في الخطط المدفوعة.
• File Attachments: يتيح إرفاق صورة أو مستند بالرسالة. مفعّل افتراضيًا؛ أوقفه لإزالة زر المرفقات من مربع الدردشة.
• Auto-open Widget: يفتح Widget تلقائيًا عند تحميل الصفحة.
• Hide Quickchat AI Branding: يخفي تذييل “Powered by Quickchat AI” لتقديم تجربة بعلامتك بالكامل. متاح في الخطط التي تشمل إزالة العلامة التجارية.

للسماح للزوار بتقييم المحادثات، افتح Conversations → Insights → Conversation Rating. توجد الإعدادات والنتائج في ذلك التبويب. راجع تقييم المحادثات.

المحتوى النصي

افتح Channels → Your Website → Text Content لتعديل التحية والنصوص الأخرى التي يراها الزوار:

• Header text: النص المعروض أعلى نافذة الدردشة.
• Welcome message: أول رسالة من وكيل AI في بداية كل محادثة، مثل “مرحبًا، هل تحتاج إلى مساعدة؟”.
• Show as a pop-up: مفتاح يعرض رسالة الترحيب كفقاعة كلام عائمة بجوار المشغّل لجذب الانتباه قبل أن يضغط الزائر. وهي ما يسميه البعض “teaser” أو “launcher message”. تعرض الفقاعة نص رسالة الترحيب نفسه، لذا عدّل ذلك الحقل لتغيير ما تقوله.
• Conversation starters: ما يصل إلى 3 رسائل نموذجية تظهر قبل أن يبدأ الزائر الكتابة. يؤدي الضغط على واحدة إلى إرسالها كأول رسالة. يفيد ذلك في توجيه الزوار إلى نقاط قوة AI، مثل “كيف أثبّت Widget؟” أو “ما التكاملات التي تدعمونها؟”.
• Input placeholder: نص إرشادي في حقل الرسالة الفارغ.
• Disclaimer text: نص يظهر خلف المحادثة، ويُستخدم عادة لإعلام المستخدمين بأنهم يتحدثون إلى AI. نوصي بإبقائه واضحًا ومرئيًا.

يوجد قسم Pre-chat Screen أسفل هذه الحقول في تبويب Text Content نفسه. فعّله هناك وعدّل نص العنوان والزر والرسالة.

اللغات والترجمات

افتراضيًا، يظهر Text Content لكل زائر كما كتبته بالضبط. في الخطط المدفوعة يمكنك إضافة ترجمات لكل لغة ليرى الزوار Widget بلغتهم.

1. افتح تبويب Text Content الفرعي واضغط Translate ضمن Other languages. تفتح لوحة Translate widget text، وتعرض النص الأساسي بجانب كل ترجمة باسم Default (source).
2. اضغط Add language واختر لغة. ينشئ Quickchat AI ترجمة للنص الحالي. راجع حقول هذه اللغة وعدّلها: الرأس ورسالة الترحيب وبدايات المحادثات والنص الإرشادي وشاشة ما قبل الدردشة وإخلاء المسؤولية. تُحفظ التغييرات تلقائيًا.
3. يستخدم أي حقل تتركه فارغًا النص الافتراضي، فلا تحتاج إلا إلى ترجمة ما تريد تغييره. وإذا فشلت الترجمة التلقائية، يمكنك إدخال النص بنفسك.

يعتمد عدد اللغات التي يمكنك إضافتها على خطتك.

كيفية اختيار لغة الزائر

بالنسبة إلى Widget وEmbed، يختار Quickchat اللغة بهذا الترتيب:

1. تجاوز صريح تحدده في أداة التحميل: _quickchat("language", "de")، ويجب استدعاؤه قبل _quickchat("init", ...).
2. خاصية <html lang> في صفحتك. مثلًا، يعرض <html lang="de"> ترجمتك الألمانية. هذا هو النهج الموصى به: اضبط lang بشكل صحيح في كل صفحة مترجمة، وستتبعها Widget تلقائيًا.
3. لغة متصفح الزائر، ثم نص Default إذا لم توجد مطابقة.

ملاحظة

إذا لم توجد ترجمة للغة الزائر، سيرى نص Default دائمًا. لا يُترك أي شيء فارغًا.

ميزات متقدمة: معلمات مخصصة

تتيح Widget وEmbed من Quickchat AI تمرير معلمات مخصصة عند التهيئة. ويمكن استخدامها من أجل:

• تحسين التحليلات، فهي متاحة في تصدير CSV على منصة Quickchat
• توفير قيم لـAPI Actions، وتخصيص الردود حيث يُسمح بذلك. يتلقى AI مجموعة فرعية مفلترة، وليس كل المعلمات؛ راجع سياق النموذج والتفويض

أمثلة على معلمات مخصصة مفيدة:

• visitor_name: Mike
• customer_tier: VIP
• order_id: ord_123

يُعد visitor_name مفتاح تواصل معروفًا. يمكن تخزين مفاتيح مخصصة مثل customer_tier واستخدامها في Actions، لكن إرسالها وحده لا يضمن استخدام AI لها في رده. تعامل مع القيم القادمة من المتصفح كمدخلات غير متحقق منها، وليس كتفويض للوصول إلى حساب عميل.

لإضافة معلمات مخصصة مثل هذه، أدرج المقتطف التالي في السكربت الموجود ضمن Your Website > Install.

تستخدم Widget وEmbed صيغة الاستدعاء نفسها:

_quickchat("custom_params", {
  "visitor_name": "Mike",
  "customer_tier": "VIP",
  "order_id": "ord_123",
});

تُعيّن هذه الخصائص لكل محادثة جديدة. نوصي بالاكتفاء بعدد قليل من المفاتيح.

نصيحة

يمكن حقن المعلمات المخصصة بأسماء snake_case، مثل order_id وcustomer_tier، مباشرة في API Actions بصيغة {{metadata_order_id}} و{{metadata_customer_tier}} وغيرها. راجع متغيرات AI Action للتفاصيل.

مثال للسكربت:

widget

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("custom_params", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _quickchat("init", "abcdefghij");
</script>

Embed

<div id="quickchat-embedded" style="height:600px;overflow:hidden;"></div>
<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("containerId", "quickchat-embedded");
  _quickchat("custom_params", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _quickchat("init", "abcdefghij");
</script>

Embed

تتيح Embed وضع وكيل Quickchat AI مباشرة داخل الصفحة كنافذة دردشة مضمنة، بدلًا من فقاعة عائمة. استخدمها عندما تريد وضع الدردشة في موضع محدد، مثل عمود في مركز المساعدة أو صفحة تواصل أو شريط جانبي داخل تطبيق.

كيفية إضافة Embed

1. احصل على كود Embed

   • سجّل الدخول إلى Quickchat AI App.
   • انتقل إلى Channels → Your Website في الشريط الجانبي الأيسر.
   • اضغط تبويب Install، ثم وسّع Install manually with code.
   • انسخ مقتطف Embed، الذي يتضمن حاوية <div id="quickchat-embedded"> وسكربت التحميل.

2. افتح ملف HTML لموقعك، أو الصفحة في أداة بناء الموقع.

3. الصق الكود

   • أدرج مقتطف Embed في <body> الخاص بالصفحة.
   • ضعه في الموضع الذي تريد ظهور نافذة الدردشة فيه بالضبط. يتحكم <div> في الحجم؛ عدّل style="height:600px" ليلائم المساحة المخصصة في تصميمك.
   • في أداة بناء المواقع، أضف عنصر كود أو HTML حيث تريد ظهور نافذة الدردشة، والصق المقتطف داخله.

ملاحظة

تعمل Embed فقط عندما تضع أداة البناء الكود مباشرة في الصفحة. تعرض بعض الأدوات، مثل Wix، عناصر HTML داخل إطار منفصل، ولا يمكن تحميل Embed داخل إطار. إذا لم تظهر نافذة الدردشة في الصفحة المنشورة، فأضف Widget عبر إعداد الكود على مستوى الموقع بدلًا من ذلك، أو شارك رابط Chat Page.