تخصيص الودجت

مبدأ العمل

ودجت tikento يُعرض في Shadow DOM -- منطقة معزولة لا تخترقها أنماط موقعك. هذا يضمن أن النموذج يبدو دائماً صحيحاً. الجانب الآخر: قواعد CSS العادية لموقعك لا يمكنها التأثير على الودجت مباشرة.

للعلامة التجارية تُستخدم متغيرات CSS المخصصة (CSS custom properties). تمر عبر حدود Shadow DOM وتسمح بالتحكم في الألوان والخطوط والزوايا.

متغيرات CSS المتاحة

حدد المتغيرات في CSS موقعك أو مباشرة في سمة style للحاوية:

:root {
  /* اللون الرئيسي (الأزرار، الروابط، اللمسات) */
  --tikento-primary: #4F46E5;

  /* لون النص على الأزرار */
  --tikento-primary-foreground: #FFFFFF;

  /* خلفية النموذج */
  --tikento-bg: #FFFFFF;

  /* لون النص الرئيسي */
  --tikento-text: #18181B;

  /* لون النص الثانوي */
  --tikento-text-muted: #71717A;

  /* لون حدود حقول الإدخال */
  --tikento-border: #E4E4E7;

  /* نصف قطر الزوايا (الأزرار، الحقول، البطاقات) */
  --tikento-radius: 8px;

  /* الخط */
  --tikento-font: 'Inter', sans-serif;

  /* لون أخطاء التحقق */
  --tikento-error: #EF4444;

  /* لون حالات النجاح */
  --tikento-success: #22C55E;
}

جميع المتغيرات اختيارية. إذا لم تحدد أياً منها، يستخدم الودجت القيمة الافتراضية.

الإعداد عبر لوحة التحكم

طريقة بدون كود -- اضبط كل شيء في واجهة tikento:

1. افتح الفعالية في لوحة التحكم.
2. انتقل إلى علامة تبويب التسجيل ← قسم ودجت للموقع.
3. اضغط تخصيص.
4. اختر الألوان والخط والزوايا عبر عناصر التحكم المرئية.
5. على اليمين تظهر معاينة -- النموذج يتحدث في الوقت الفعلي.
6. اضغط حفظ -- تُطبق التغييرات على جميع الودجات المدمجة لهذه الفعالية.

تولّد لوحة التحكم كود CSS جاهزاً يمكنك أيضاً نسخه ولصقه في الموقع يدوياً.

الإعداد عبر الكود

إذا كنت بحاجة لتحكم أدق، حدد متغيرات CSS مباشرة في الصفحة:

الخيار 1: عالمياً عبر :root

:root {
  --tikento-primary: #0D9488;
  --tikento-radius: 12px;
  --tikento-font: 'Montserrat', sans-serif;
}

الخيار 2: على حاوية الودجت

<div
  data-tikento-widget="YOUR_EVENT_ID"
  style="--tikento-primary: #0D9488; --tikento-radius: 12px;"
></div>

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

الخيار 3: تحميل خط

إذا كنت تستخدم خطاً غير قياسي، حمّله في الصفحة المضيفة عبر <link> أو @font-face، ثم حدده في المتغير:

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">

:root {
  --tikento-font: 'Montserrat', sans-serif;
}

Shadow DOM يرث متغيرات CSS من الصفحة المضيفة، لكن يجب تحميل الخط على مستوى المستند.

Shadow DOM: ما هو معزول وما ليس كذلك

هذا يعني أن أنماط موقعك لن تكسر الودجت أبداً، والودجت لن يؤثر على أنماط موقعك.

قيود الباقات

المزيد عن العلامة المائية -- العلامة المائية «Powered by tikento».

نصائح

• تحقق من التباين: لون الزر (--tikento-primary) يجب أن يوفر تبايناً لا يقل عن 4.5:1 مع لون النص عليه (--tikento-primary-foreground).
• اختبر النموذج في الوضع المظلم للمتصفح إذا كان موقعك يدعم الوضع المظلم.
• حدد خطاً احتياطياً في --tikento-font في حال عدم تحميل خط الويب.
• بعد حفظ التخصيص في لوحة التحكم يُلغى كاش Redis للودجت (widget:config:{eventId}) تلقائياً -- تدخل التغييرات حيز التنفيذ خلال ثوانٍ.