قسم الأسئلة الشائعة في أغلب المواقع شكله واحد: أكورديون، تدوس على السؤال ينزل الجواب، وخلاص. شغال، بس محدش بيفتكره، والزائر اللي متعود على ChatGPT بقى متوقع حاجة بتكلّمه.
مصمم من جمهورية الدومينيكان اسمه Ricky Rosario عمل حل ذكي: قسم أسئلة شكله محادثة مع مساعد ذكاء اصطناعي، بس من غير أي نموذج AI ولا API ولا فاتورة توكنز. الفكرة دي تنفع لموقعك أو لموقع عميل، وهنفصّلها هنا قرارًا قرارًا.
الفكرة في سطرين
الأسئلة والإجابات مكتوبة مسبقًا، والزائر لا يكتب شيئًا. هو يختار سؤالًا من الأسئلة المعروضة، فيظهر في خانة المحادثة، ثم يضغط “إرسال” فيرى حالة “يفكر” قصيرة، ثم تظهر الإجابة كرد من المساعد.
النتيجة تجربة تشبه الحديث مع مساعد ذكي، بلا تكلفة تشغيل وبلا خطر أن “يهلوس” المساعد بإجابة خاطئة عن أسعارك أو سياسة الاسترجاع.
متى تستخدمه ومتى تتركه؟
قبل أن تبني، اسأل نفسك هل الفكرة تخدم الموقع فعلًا:
| استخدمه عندما | اترك الأكورديون عندما |
|---|---|
| عدد الأسئلة صغير (من 4 إلى 10 تقريبًا) | لديك عشرات الأسئلة يحتاج الزائر للبحث فيها |
| — | — |
| الموقع لخدمة أو منتج تقني والجمهور معتاد على أدوات الذكاء الاصطناعي | الجمهور أكبر سنًا أو يريد الإجابة بأسرع طريق |
| تريد أن ينتهي القسم بخطوة تحويل واضحة | الصفحة مرجعية مثل صفحة الدعم أو السياسات |
صاحب التجربة نفسه يقول إن الأكورديون التقليدي يؤدي وظيفته جيدًا، وإنه لجأ للمحادثة لأن هوية المشروع تبرر ذلك. وهو يخطط لاختبار الفكرة مع مستخدمين حقيقيين، أي أن فعاليتها لم تُقَس بعد.
القرار الأهم: لا تسمح بالكتابة الحرة
المنطقي أن تجعل خانة المحادثة قابلة للكتابة، لكن هذا بالضبط ما تجنبه. خانة كتابة مفتوحة توحي للزائر بأن خلفها ذكاء اصطناعيًا يفهم أي سؤال، وهذا وعد لا يستطيع المكوّن الوفاء به. هذا ما يسميه مصممو الواجهات مشكلة الإيحاء بالاستخدام (Affordance).
لذلك تبقى الخانة مقفلة، ونصها الإرشادي (Placeholder) يقول صراحة “اختر سؤالًا”. الهدف ليس خداع الزائر بذكاء مزيف، بل استعارة شكل المحادثة المألوف لعرض محتوى ثابت.
المكوّن يستند إلى أربعة مبادئ من أساسيات تجربة المستخدم:
- التعرّف أسهل من التذكّر: الزائر يختار من أسئلة ظاهرة بدل أن يفكر في صياغة سؤاله.
- وضوح حالة النظام: السؤال المختار، والإرسال، والتحميل، والصفحات، ونهاية الأسئلة كلها ظاهرة.
- حرية المستخدم: يمكنه التنقل بين الأسئلة ومراجعة الإجابات وإعادة المحادثة من البداية.
- الاتساق: السلوك يتبع أنماط تطبيقات المحادثة التي يعرفها الزائر.
ابنِه كآلة حالات، لا كشاشة واحدة
أذكى ما في التجربة أن المكوّن لم يُصمَّم كشاشة، بل كمجموعة حالات (States) ينتقل بينها. هذا يجعل كود JavaScript أسهل في الفهم والتعديل، ويجعل الاختبار قائمة واضحة: هل تعمل كل حالة؟ هل كل انتقال سليم؟
آلة الحالات
رحلة السؤال داخل المكوّن
البداية
مقدمة وسؤالان ومقسّم صفحات وخانة محادثة فارغة تقول: اختر سؤالًا.
الاختيار
السؤال المختار يظهر داخل خانة المحادثة قبل إرساله.
الإرسال
بعد الضغط على إرسال ينتقل السؤال إلى سجل المحادثة.
التفكير
حركة تحميل قصيرة تخبر الزائر أن الرد في الطريق.
الإجابة
الرد يظهر من المساعد، والسؤال المستخدم يختفي من الخيارات.
النهاية
عند نفاد الأسئلة تظهر رسالة الحد مع زر تحويل مثل واتساب.
إضافة إلى ذلك، توجد حالة إعادة الضبط (Reset) في أي لحظة: تمسح المحادثة وتعيد كل الأسئلة.
تفاصيل صغيرة تصنع الفرق
- سؤالان فقط في كل مرة: الأسئلة تُعرض اثنين اثنين مع مقسّم صفحات (Paginator) يحسب عدد الصفحات من الأسئلة المتبقية، ويتحدث تلقائيًا كلما اختفى سؤال مستخدم.
- القرب البصري: المقسّم فوق الأسئلة مباشرة، والأسئلة فوق خانة المحادثة مباشرة، فيقرؤها الزائر كمنطقة تفاعل واحدة. الخانة ثابتة، وسجل المحادثة وحده هو ما يتحرك بالتمرير.
- حركة خفيفة لها معنى: انتقالات صغيرة عند تغيير الصفحة وظهور رسالة جديدة وحالة “يفكر”. القاعدة: الحركة تشرح ما حدث ولا تؤخر الزائر.
- تجاوب حسب الحاوية: المكوّن يتكيف مع عرض الحاوية التي يوضع فيها، لا مع نقاط توقف الصفحة فقط، فيعمل في عمود جانبي كما يعمل بعرض كامل.
حوّل نهاية الأسئلة إلى خطوة تحويل
عندما تنتهي الأسئلة، يعرض المكوّن رسالة تشبه “وصلت للحد” التي يراها مستخدمو أدوات الذكاء الاصطناعي، لكنها هنا مجرد نهاية للمحتوى. والأهم أنها تتحول إلى دعوة لاتخاذ إجراء (CTA): “لسه عندك سؤال؟” مع زر.
في السوق المصري والخليجي، أقوى زر هنا غالبًا هو “كمّل على واتساب”، لأن الزائر الذي قرأ كل الأسئلة ولم يكتفِ مهتم فعلًا. البدائل: صفحة التواصل، أو حجز مكالمة، أو نموذج طلب عرض سعر.
كيف تبنيه في الـ Stack الخاص بك
صاحب التجربة بنى المكوّن بـ HTML وCSS وJavaScript داخل CrocoBuilder، وفصل المحتوى عن منطق التفاعل. الأسئلة والإجابات تُدار من خصائص المكوّن عبر حقل التكرار (Repeater)، وكل صف فيه سؤال وإجابة. بقية النصوص خصائص مستقلة: المقدمة، والنص الإرشادي، ونص إعادة الضبط، وعنوان رسالة النهاية ونصها، ونص زر CTA ورابطه.
بهذا الفصل يصبح المكوّن قطعة تعيد تركيبها في أي مشروع: تغيّر الأسئلة والزر من الخصائص، ولا تلمس منطق التفاعل.
في JetEngine: يمكنك تطبيق نموذج المحتوى نفسه دون CrocoBuilder. أنشئ صفحة إعدادات (Options Page) فيها حقل Repeater للسؤال والإجابة، أو اربطه بنوع محتوى مخصص للأسئلة، ثم اعرض البيانات داخل المكوّن بحيث يقرأ كود JavaScript الأسئلة من الصفحة لا من الكود نفسه.
في Elementor: ضع المكوّن في ودجت HTML، ولا تحذف القسم التقليدي من حسابك. احتفظ بالأكورديون كنسخة احتياطية للصفحات التي تحتاج بحثًا سريعًا.
تنبيه: لا تحمّل الإجابات من الخادم بعد ضغط الزائر. اجعل كل الأسئلة والإجابات موجودة في كود HTML عند تحميل الصفحة (مخفية بصريًا إن شئت) حتى تقرأها محركات البحث، وأضف aria-live="polite" لمنطقة المحادثة حتى تعلن قارئات الشاشة عن الإجابات الجديدة.
ملاحظة: في الواجهة العربية (RTL) تنعكس اتجاهات فقاعات المحادثة. استخدم الخصائص المنطقية في CSS مثل margin-inline-start وpadding-inline-end بدل left وright، حتى تنقلب الفقاعات تلقائيًا ولا تضطر لكتابة نسخة منفصلة.
الدرس الأكبر: الذكاء الاصطناعي يبني، وأنت المهندس
القسم نفسه ليس كل القصة. صاحب التجربة كان يبني بمساعدة الذكاء الاصطناعي من قبل، ويصل بسرعة إلى نتيجة “قريبة”، لكن الانتقال من “قريب” إلى “جاهز للإنتاج” كان غير مستقر: نتائج متقلبة، وتعديل صغير يكسر شيئًا يعمل، وتكرار الشرح في كل محادثة جديدة.
الحل الذي وصل إليه أن يفصل الأدوار: هو يحدد نظام التصميم (Design System) وقواعد المكونات والوصولية والتجاوب وتسمية العناصر وقيود CrocoBuilder أولًا، ثم يعمل الذكاء الاصطناعي داخل هذه الحدود. وقد استخدم محادثة ChatGPT عادية مع ملفات توثيق وتعليمات جاهزة، دون وكيل مخصص.
مسار العمل عنده: مرجع بصري ← تحليل ← ربط بنظام التصميم ← بناء مكوّن ذري (Atomic Component) ← اختبار في CrocoBuilder ← تحسين ← إعادة استخدام. ويحتفظ بملفات Markdown كمصدر وحيد للحقيقة، مع NotebookLM كقاعدة معرفة إضافية، حتى يبدأ محادثة جديدة لكل مكوّن دون أن يفقد الأساس.
لو تبني مواقع عملاء بالذكاء الاصطناعي، ابدأ من هنا: ملف واحد فيه ألوانك وخطوطك ومسافاتك ونقاط التوقف وقواعد الوصولية وأسلوب التسمية وما يُسمح للذكاء الاصطناعي بتوليده وما لا يُسمح. أعطه للمساعد قبل أي طلب.
بصراحة: هذا المقال قراءة لتجربة منشورة على مدونة Crocoblock، لا تجربة عملية منا لـ CrocoBuilder. لم نقِس أثر المحادثة على التحويل مقارنة بالأكورديون، وصاحب الفكرة نفسه لم يختبرها مع مستخدمين بعد.
اقرأ أيضًا
الأسئلة الشائعة
س: هل يحتاج هذا القسم إلى اشتراك في OpenAI أو أي API؟
ج: لا. الأسئلة والإجابات مكتوبة مسبقًا ويعرضها كود JavaScript في المتصفح، فلا يوجد نموذج ذكاء اصطناعي ولا تكلفة استخدام.
س: لماذا لا أسمح للزائر بكتابة سؤاله؟
ج: لأن خانة الكتابة الحرة توحي بوجود ذكاء اصطناعي يفهم أي سؤال. إذا كتب الزائر سؤالًا لا إجابة له فسيشعر أن الموقع خدعه.
س: هل يؤثر هذا الشكل على ظهور الأسئلة في جوجل؟
ج: لا يؤثر إذا كانت كل الإجابات موجودة في كود الصفحة عند تحميلها. المشكلة تظهر فقط إذا جلبت الإجابات من الخادم بعد ضغط الزائر.
س: هل أستطيع بناءه بدون CrocoBuilder؟
ج: نعم. المنطق نفسه يُبنى بـ HTML وCSS وJavaScript في ودجت HTML داخل Elementor، مع حفظ الأسئلة في حقل Repeater من JetEngine.
الخلاصة
الفكرة هنا مش “اعمل شات بوت”، الفكرة إنك تاخد شكل الواجهة اللي الناس اتعودت عليه وتحط فيه محتوى ثابت مضمون، وتقفل الباب قدام أي وعد مش هتقدر توفّيه. ومعاها درس أهم: خلّي الذكاء الاصطناعي يبني جوه نظام إنت راسمه، مش هو اللي يرسمه.
لو عايز تبني مكونات زي دي جوه موقعك بأدوات Crocoblock، تقدر تبدأ من هنا: اكتشف Crocoblock
مراجع إضافية: CrocoBuilder: How to Build a Component — Crocoblock Knowledge Base
مرجع المقال (بالإنجليزية): How I Built an AI-Like FAQ Using CrocoBuilder (Without AI or API Tokens)
المقال ده مش ترجمة حرفية: متكيّف للقارئ العربي ومضاف عليه سياق ووردبريس وElementor وJetEngine.
