FreemiumProBusinessEnterprise

الودجت لا يُحمَّل أو الأنماط مكسورة

التشخيص السريع

قبل تحليل مشاكل محددة، أجرِ فحصاً أساسياً:

  1. افتح الصفحة التي تحتوي على الودجت.
  2. اضغط F12 (أو Cmd+Option+I على Mac) ← علامة التبويب Console.
  3. ابحث عن أخطاء متعلقة بـ tikento، widget.js، CSP أو CORS.
  4. تحقق من علامة التبويب Network — ابحث عن طلب إلى tikento.com/widget.js وتأكد أن الحالة 200.

المشكلة: الودجت لا يُحمَّل إطلاقاً

السبب 1: سياسة أمن المحتوى (CSP) تحظر السكريبت

الأعراض:

  • النموذج لا يظهر.
  • في وحدة التحكم: Refused to load the script 'https://tikento.com/widget.js' because it violates the following Content Security Policy directive: "script-src ...".

الحل:

أضف tikento.com إلى توجيه script-src في سياسة CSP الخاصة بك:

script-src 'self' https://tikento.com;

إذا كنت تستخدم وسم meta:

<meta http-equiv="Content-Security-Policy"
  content="script-src 'self' https://tikento.com;">

قد تحتاج أيضاً لإضافة connect-src https://tikento.com لطلبات API للودجت وstyle-src 'unsafe-inline' https://tikento.com للأنماط.

السبب 2: eventId غير صحيح

الأعراض:

  • السكريبت يُحمَّل (200 في Network)، لكن النموذج لا يُعرض.
  • في وحدة التحكم: [tikento] Event not found أو [tikento] Invalid eventId format.

الحل:

  1. افتح الفعالية في لوحة تحكم tikento.
  2. انتقل إلى علامة التبويب التسجيلودجت للموقع.
  3. انسخ UUID الصحيح من الحقل أو من كود الودجت الجاهز.
  4. تأكد أن خاصية data-tikento-widget تحتوي على UUID بدون مسافات أو رموز زائدة.
<!-- صحيح -->
<div data-tikento-widget="550e8400-e29b-41d4-a716-446655440000"></div>

<!-- خطأ -->
<div data-tikento-widget="YOUR_EVENT_ID"></div>

السبب 3: السكريبت غير متصل أو متصل مرتين

الأعراض:

  • حاوية div موجودة في الصفحة لكن النموذج لا يظهر.
  • لا أخطاء في وحدة التحكم، لا طلب لـ widget.js في Network.

الحل:

تأكد أن وسم <script> موجود في الصفحة ويُحمَّل مرة واحدة فقط:

<script src="https://tikento.com/widget.js" async defer></script>

بعض منشئي المواقع (Tilda، Wix) يتطلبون إضافة السكريبتات في كتل خاصة. انظر التثبيت على Tilda، Webflow، Wix.

المشكلة: أخطاء CORS

الأعراض:

  • النموذج يبدأ بالتحميل لكن البيانات (الحقول، التذاكر) لا تُحمَّل.
  • في وحدة التحكم: Access to fetch at 'https://tikento.com/api/...' from origin 'https://your-site.com' has been blocked by CORS policy.

الحل:

على خطط Pro وأعلى يجب إضافة نطاق موقعك إلى قائمة المصادر المسموحة:

  1. في لوحة التحكم: الفعالية ← التسجيلالودجتالنطاقات المسموحة.
  2. أضف نطاق موقعك (مثلاً example.com أو *.example.com).
  3. اضغط حفظ.

تسري التغييرات خلال دقيقة (بعد إبطال ذاكرة widget:origins:{eventId} المؤقتة).

على خطة Free لا تُطبَّق قيود CORS — الودجت يعمل على أي نطاق.

لمزيد من التفاصيل — إعداد CORS.

المشكلة: أنماط الودجت مكسورة

خصائص CSS الموروثة

Shadow DOM يعزل معظم الأنماط، لكن بعض خصائص CSS تُورَث عبر حدود Shadow DOM:

  • font-family، font-size، line-height
  • color
  • direction، text-align
  • visibility

إذا كان CSS-reset الخاص بك يضبط قيماً عدوانية على body أو *، فقد يؤثر ذلك على الودجت.

الحل:

اضبط متغيرات CSS للودجت صراحةً لتجاوز القيم الموروثة:

:root {
  --tikento-font: 'Inter', sans-serif;
  --tikento-text: #18181B;
}

حاوية الودجت مضغوطة أو مخفية

الأعراض:

  • الودجت يُعرض بارتفاع 0 أو عرض 0.
  • النموذج مقطوع.

الحل:

تحقق أن العنصر الأب لحاوية data-tikento-widget لا يحتوي على:

  • overflow: hidden بارتفاع ثابت
  • display: none أو visibility: hidden
  • max-height: 0 أو height: 0
  • position: fixed / absolute بدون أبعاد محددة

تحتاج حاوية الودجت عرضاً حراً لا يقل عن 320px.

المشكلة: تُعرض نسخة قديمة من النموذج

الأعراض:

  • حدّثت الحقول أو التذاكر في المنشئ، لكن في الودجت على الموقع تظهر النسخة القديمة.

الحل:

  1. ذاكرة المتصفح المؤقتة. اضغط Ctrl+Shift+R (أو Cmd+Shift+R على Mac) لإعادة تحميل صارمة.
  2. ذاكرة CDN / الاستضافة المؤقتة. إذا كان موقعك خلف Cloudflare أو CDN مشابه، امسح ذاكرة التخزين المؤقت للصفحة التي تحتوي على الودجت.
  3. ذاكرة Redis المؤقتة في tikento. تُخزن تكوينات الودجت مؤقتاً بمدة TTL 300 ثانية (5 دقائق). إذا مرت أكثر من 5 دقائق ولم تظهر التغييرات — تواصل مع الدعم.

سكريبت widget.js يُحمَّل مع رأس Cache-Control: no-cache — فهو دائماً محدّث. لكن تكوين النموذج (الحقول، التذاكر، الخيارات) يُخزّن مؤقتاً من جانب tikento.

المشكلة: الودجت لا يعمل في وضع popup

الأعراض:

  • الزر مع data-tikento-popup لا يفتح النموذج عند الضغط.

الحل:

  1. تأكد أن سكريبت widget.js محمّل في الصفحة.
  2. تحقق أن خاصية data-tikento-popup تحتوي على UUID صحيح للفعالية.
  3. إذا أُضيف الزر ديناميكياً (عبر إطار عمل JS)، تأكد أنه موجود في DOM عند تهيئة الودجت، أو استدعِ window.tikento?.refresh() بعد الإضافة.

أخطاء وحدة التحكم: مرجع

الرسالةالسببالإجراء
[tikento] Event not foundeventId غير صحيح أو الفعالية محذوفةتحقق من UUID
[tikento] Event not publishedالفعالية بحالة draftانشر الفعالية
[tikento] Origin not allowedالنطاق ليس في قائمة المسموح (Pro وأعلى)أضف النطاق في الإعدادات
[tikento] Widget init failedخطأ في التهيئةتحقق من CSP وNetwork
Refused to load the script...CSP يحظرحدّث سياسة CSP
CORS policyالنطاق غير مسموحأعدّ CORS

لا يزال لا يعمل

إذا بقيت المشكلة بعد جميع الفحوصات:

  1. التقط لقطة شاشة للأخطاء في وحدة التحكم (علامة التبويب Console).
  2. انسخ عنوان URL للصفحة التي ثُبّت فيها الودجت.
  3. حدد المتصفح وإصداره.
  4. أرسل كل ذلك للدعم عبر لوحة التحكم (المساعدة ← اكتب للدعم) أو على support@tikento.com.

الأسئلة الشائعة

الودجت يعرض شاشة بيضاء — ماذا أفعل؟
افتح وحدة تحكم المتصفح (F12 ← Console). إذا رأيت خطأ CSP — أضف tikento.com إلى توجيه script-src. إذا لم تكن هناك أخطاء — تحقق من صحة eventId في خاصية data-tikento-widget.
الودجت كان يعمل لكنه توقف بعد تحديث الموقع
تحقق من أن كود الودجت (وسم script وحاوية div) لم يُحذف بالخطأ أثناء التحديث. تأكد أيضاً من عدم تغيير قواعد CSP.
النموذج يُحمَّل لكنه يبدو غريباً
Shadow DOM يعزل أنماط الودجت، لكن بعض عمليات إعادة تعيين CSS العامة (reset) يمكن أن تؤثر على Shadow DOM عبر الخصائص الموروثة. تحقق مما إذا كان reset الخاص بك يضبط font-size: 0 أو line-height: 0 على body.