تسجيل الدخول
مجانًا · مفتوح · 9 كيلوبايت

ضع المراجعات في أي موقع

وسم script واحد — يعمل على WordPress و Shopify و Webflow و React و Vue و HTML العادي. يكتشف الأداة تلقائيًا خط موقعك وألوانه ووضعه الداكن وتندمج طبيعيًا. أي إعداد يمكن تجاوزه عبر سمات data-.

تخصيص

اختر كيف تظهر على صفحتك

لون hex — يستبدل اللون المكتشف تلقائيًا

كود التضمين

<div data-compasly-widget="YOUR_WIDGET_ID"></div>
<script async src="https://compasly.com/widget.js"></script>

استبدل YOUR_WIDGET_ID بمعرّف الأداة من لوحة التحكم بعد التحقق من ملكية الشركة.

معاينة مباشرة

معاينة diabloshop-ru. التكيّف التلقائي يقرأ خط هذه الصفحة وألوانها.

لا توجد أداة تجريبية بعد. شغّل لإنشاء عرض توضيحي ثم عُد. npm run seed:widget

التخصيص

تتكيّف مع طراز موقعك

افتراضيًا تقرأ الأداة font-family الصفحة، ولون النص، ومتغيرات CSS الشائعة (--brand، --primary، --accent) لتلائم تصميمك. عطّل ذلك بـ data-adapt='false'.

فاتح أو داكن

ضع data-theme='light' أو 'dark'. الوضع التلقائي يختار حسب درجة سطوع خلفية الصفحة.

8 لغات

data-lang='ru' (أو en, es, de, ko, zh, ja, ar). 'auto' يستخدم خاصية html lang.

تحميل كسول

افتراضيًا تجلب الأداة البيانات فقط عند ظهورها في نطاق الرؤية. ضع data-lazy='false' للجلب الفوري.

تخصيص لون العلامة

data-accent='#FF4500' (أو أي قيمة hex) يستبدل اللون الذي اكتُشف تلقائيًا.

حصر الأصل (اختياري)

في لوحة التحكم يمكنك تحديد النطاقات المسموح لها بتحميل الأداة. الافتراضي هو السماح لأي أصل (بدون CORS preflight).

تخصيص متقدم للأنماط

تُعرض الأداة داخل Shadow DOM لعزل الأنماط. يمكن استبدال الألوان عبر تعيين متغيرات CSS على العنصر الأم:

<div data-compasly-widget="wgt_..."
     style="--cp-accent: #FF4500;
            --cp-font: 'Inter', sans-serif;
            --cp-radius: 8px;">
</div>

متغيرات CSS المتاحة: --cp-accent, --cp-font, --cp-radius, --cp-fg, --cp-bg.

أدلة المنصات

WordPress

  1. Custom HTML block in your editor
  2. Or paste into footer.php before </body>

Shopify

  1. Online Store → Themes → Edit code → theme.liquid
  2. Paste snippet before </body>

Webflow

  1. Page settings → Custom code → Footer
  2. Paste snippet

React / Next.js

  1. <Script src="/widget.js" async/>
  2. Render <div data-compasly-widget="..."/> anywhere

Vue / Nuxt

  1. nuxt.config head script
  2. <div data-compasly-widget="..."/> in templates

Plain HTML

  1. Paste snippet inside <body>
  2. One script tag per page