عنصر بطاقة الكشط
بطاقة جائزة تُكشط لكشف ما تحتها، مبنية على تقنية CSS نفسها :checked التي يستخدمها عنصرا القائمة القابلة للطي وعجلة الحظ. مربع اختيار مخفي، وتسمية قابلة للنقر منسّقة لتبدو سطح كشط، وقاعدة CSS تبدّل ما هو ظاهر لحظة تحديده — دون أي JavaScript في أي مكان.
آلية العمل
حيثما يُحترم CSS الحركي، يعرض العنصر سطح كشط — عنصر <label> منسّقًا بخلفية رمادية مخطّطة قطريًا وعبارة «اكشط هنا» — فوق الجائزة. ويؤدي النقر عليه إلى تحديد مربع الاختيار المخفي المرتبط به، ما يشغّل قاعدة CSS تُخفي سطح الكشط وتكشف الجائزة تحته، في البريد الوارد مباشرة. لا توجد إيماءة سحب ولا حركة كشط جزئي؛ بل كشف بنقرة واحدة: التفاعل نفسه الذي تستخدمه العجلة في عنصر عجلة الحظ، وتوسيع القائمة القابلة للطي وطيّها.
البديل هو ما يجعل هذا العنصر جديرًا بالإشارة تحديدًا: فبدلًا من عنصر تحكّم منفصل ظاهر دائمًا كما في عجلة الحظ والاختبار، تعتمد بطاقة الكشط على «افتراض آمن» في التنسيق نفسه. فالنمط المضمَّن لسطح الكشط هو display:none؛ ولا يصبح مرئيًا أصلًا إلا حين تفرضه قاعدة <style> (مقصورة على تطبيقات البريد القادرة على المستوى الحركي) صراحةً إلى display:block. وفي Outlook وأي تطبيق بريد آخر لا يحترم ورقة الأنماط تلك، لا يظهر السطح أبدًا ببساطة، ويكون عنصر الجائزة (الذي لا يحمل أي نمط إخفاء من هذا النوع) مرئيًا افتراضيًا. فلا يوجد طريق مسدود «غير مكشوط» في أي مكان: إما أن يعرض تطبيق البريد إيماءة الكشط (وتظهر الجائزة بعد النقر)، أو يتخطى الإيماءة كليًا ويعرض الجائزة مباشرة. ولا يعلق أحد أبدًا أمام بطاقة لا يمكن كشطها.
كما في عجلة الحظ، لا ترسل بطاقة الكشط أي شيء إلى MailInApp عند كشط السطح — لا يُسجَّل حدث كشف ولا صوت ولا إرسال. ولا تظهر في لوحة الردود، ولا في تصدير CSV، ولا في الخريطة الحرارية للنقرات. وإذا ضُبط للعنصر رابط جائزة اختياري، فإن النقر على الجائزة المكشوفة يتّبع ذلك الرابط فحسب مثل أي <a href> آخر. ولا يمرّ عبر إعادة التوجيه الخاصة بتتبّع النقرات في MailInApp كما يمرّ رابط عنصر button/image/social، لذا لن تظهر نقرة الجائزة في بطاقة الكشط في الخريطة الحرارية للنقرات أيضًا.
الحقول القابلة للضبط:
- العنوان — العنوان الرئيسي فوق البطاقة، مع لونه وحجم خطه الخاصين.
- نص الجائزة — ما يُكشف تحت سطح الكشط (الافتراضي «🎉 خصم 20% على طلبك التالي!»).
- رابط الجائزة (اختياري) — إذا ضُبط، تُعرض الجائزة المكشوفة رابطًا حقيقيًا بنمط زر إلى ذلك الرابط؛ وإذا تُرك فارغًا، تُعرض نصًّا عريضًا عاديًا بدلًا من ذلك، إذ لا يوجد ما يُربط به.
- لون الخلفية، والحشو، والحد، واستدارة الزوايا للبطاقة.
- لون نص الجائزة ولون خلفية الجائزة — ليس لهما عمدًا قيمة افتراضية مدمجة كما لمعظم تخصيصات الألوان، لأن العنصر يعرض نسختين مختلفتين بصريًا من الجائزة (زر بنص أبيض على خلفية ملوّنة حين يُضبط رابط، ونص داكن بلا خلفية حين لا يُضبط)، وأي قيمة افتراضية ثابتة واحدة ستجعل إحدى النسختين غير مرئية. وترجع كل نسخة إلى قيمتها الافتراضية المعقولة الخاصة بها فقط حين تترك الحقل فارغًا.
أمثلة
Subject
Scratch off to reveal your discount
يمكن لرسالة استبقاء العملاء استخدام بطاقة الكشط بديلًا أخفّ من عجلة الحظ لكشف خصم واحد مضمون — راجع التفاعل والولاء لمزيد عن هذا النوع من عناصر الألعاب الخفيفة. ويمكن لرسالة عيد ميلاد أو ذكرى سنوية أن تكشف رمز قسيمة مخصّصًا نصًّا للجائزة (اجمعه مع وسم دمج لتخصيص الرمز لكل مستلم، لأن نص الجائزة نفسه مجرد نص قابل للضبط). ويمكن لرسالة ختام حملة بعنوان «اخترنا فائزًا» استخدامها لكشف ما إذا كان مستلم بعينه قد فاز في مسابقة هدايا، مع رابط جائزة يشير إلى صفحة المطالبة بها.
كيف يبدو البديل الثابت
<div id="em-scratch-1" style="margin:12px 0;text-align:center;background-color:transparent">
<p style="margin:0 0 10px;font-weight:700;font-size:18px;color:#111827">
Scratch to reveal your prize!
</p>
<!-- scratch surface (checkbox + label, display:none by default) omitted:
only shown where a kinetic-tier <style> rule forces it visible -->
<div class="sc-prize" style="margin-top:10px">
<a href="https://acme.example.com/claim"
style="display:inline-block;padding:10px 20px;background-color:#4f46e5;
color:#ffffff;border-radius:6px;text-decoration:none;
font-size:14px;font-weight:600">
🎉 20% off your next order!
</a>
</div>
</div>
لا يحمل عنصر <div> الخاص بالجائزة أي نمط إخفاء خاص به، فيكون مرئيًا دون شرط ما لم تُخفِه فعليًا ورقة أنماط من المستوى الحركي — فإيماءة الكشف إضافة بحتة فوق جائزة مرئية أصلًا.