عناصر التضمين

تتيح لك عناصر التضمين وضع نموذج من SupDesk مباشرةً على موقعك. فينضم الزوّار إلى قائمة انتظارك، أو يراسلونك، أو يسجّلون في بيتا دون مغادرة موقعك إطلاقًا.

تبحث عن فقاعة دردشة بدلاً من نموذج؟ للدردشة المباشرة مُحمّلها الخاص (chat.js) ومقتطفها الخاص — راجع الدردشة المباشرة.

يمكن تضمين ثلاثة نماذج:

إضافة عنصر تضمين

يُولَّد مقتطف كل نموذج لك في وحدة التحكّم — انسخه والصقه في صفحتك حيث تريد أن يظهر النموذج:

• قائمة الانتظار — قسم قائمة الانتظار بالمشروع، أسفل بطاقة الإعدادات
• التواصل — صفحة الإعدادات بالمشروع، تحت تضمين نموذج التواصل
• بيتا — صفحة برنامج بيتا، تحت التضمين

يبدو المقتطف هكذا:

<script src="https://acme.supdesk.app/embed.js"
        data-supdesk="contact"
        data-title="Contact Acme" data-height="520" async></script>
<noscript>
  <iframe src="https://acme.supdesk.app/embed/contact" width="100%" height="520"
          style="border:0" title="Contact Acme"></iframe>
</noscript>

يُدرِج السكربت النموذج حيث يقع الوسم ويغيّر حجمه مع تغيّر ارتفاع النموذج — مثلاً عند ظهور أخطاء التحقق، أو عند انكماشه إلى تأكيد قصير بعد الإرسال. أما كتلة <noscript> فهي iframe عادي، فيظل النموذج يعمل للزوّار الذين عطّلوا JavaScript.

كل شيء يُقدَّم من نطاق بوابتك أنت. وإن كان لديك نطاق مخصص فإن وحدة التحكّم تعطيك المقتطفات على ذلك النطاق؛ وإلا فهي تستخدم نطاقك الفرعي في *.supdesk.app.

النطاقات المخصصة ونطاقات الجذر

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

الحالة التي ينبغي الانتباه لها هي مقتطف نسخته قبل إضافة نطاق مخصص. فالطلبات إلى أصلك القديم يُعاد توجيهها إلى النطاق المخصص، والمُحمّل يقبل إعادة التوجيه تلك فقط عندما يتشارك الاثنان نطاق جذر — مثلاً نطاق بوابة فرعي على feedback.apibot.dev ونطاق مخصص www.apibot.dev يعيشان كلاهما على apibot.dev. أما إذا كان نطاقك المخصص على جذر مختلف تمامًا، فإعادة التوجيه عابرة للنطاقات ولن يعمل التضمين: أعد نسخ المقتطف من وحدة التحكّم بعد أن يصبح نطاقك المخصص نشطًا.

السمات

يمكنك وضع أكثر من عنصر تضمين في صفحة واحدة — أعطِ كل واحد وسم <script> خاصًا به.

سياسة أمان المحتوى

إذا كان موقعك يرسل ترويسة Content-Security-Policy، فاسمح بأصل بوابتك في توجيهين، وإلا حجب المتصفح عنصر التضمين:

script-src https://acme.supdesk.app;
frame-src  https://acme.supdesk.app;

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

الحماية من البريد المزعج

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

ولأن مفتاح Turnstile الخاص بك مسجَّل مقابل نطاقك أنت، ولأن عناصر التضمين تُقدَّم من النطاق نفسه، فإن مفتاحك يعمل في التضمين دون أي إعداد إضافي.

الخصوصية وتسجيل الدخول

لا تقرأ النماذج المضمَّنة جلسة تسجيل دخول للبوابة ولا تكتبها — فالمتصفحات لا ترسل تلك الكوكيز إلى إطار في صفحة شخص آخر، وهذا بالتصميم. وبدلاً من ذلك، كل عنصر تضمين البريد-أولاً: يرسل الزائر عنوان بريد إلكتروني ويتلقّى رابطًا بالبريد.

ولهذا نتيجة واحدة تستحق المعرفة عند وضعك عنصر تضمين: ينهي الزائر التدفق في لسان متصفح عادي، لا داخل صفحتك.

• قائمة الانتظار — تُسجَّل التسجيلة فورًا؛ ويحمل البريد ترتيبهم ورابط إحالتهم الشخصي
• بيتا — يحمل البريد رابط القبول الذي يسجّلهم
• التواصل — تصل الرسالة إلى صندوق واردك فورًا؛ والبريد هو إيصالهم ويتيح لهم رؤية ردودك

تُسجَّل مدخلات قائمة الانتظار المُنشأة عبر عنصر تضمين بمصدر embed، فتستطيع تمييزها عن تسجيلات البوابة في جدول المدخلات وفي تصديرات CSV.

ما يراه الزوّار

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

الصفحات المضمَّنة لا تفهرسها محركات البحث؛ فصفحات بوابتك العامة هي النسخ المعتمَدة والقابلة للفهرسة.

مقتطف قائمة الانتظار القديم

قبل وجود المُحمّل المعتمد على السكربت، كان تضمين قائمة الانتظار مجرد iframe يشير إلى /waitlist/embed:

<iframe src="https://acme.supdesk.app/waitlist/embed" width="100%" height="360"
        style="border:0" title="Waitlist"></iframe>

هذا يظل يعمل — ولا تحتاج إلى تغيير أي شيء. واستبداله بالمقتطف الحالي يمنحك تغيير الحجم التلقائي؛ والارتفاع الثابت في الـ iframe القديم هو العيب الحقيقي الوحيد.