ضع زرّ مراسلة المتجر في موقعك

ما هذا الزرّ

ملفّ شيفرة واحد تلصقه في صفحة موقعك، فيرسم زرًّا عائمًا في زاوية الشاشة (تختار أسفل اليسار أو أسفل اليمين) — وحين يضغطه الزبون تُفتح صفحة https://koratland.com/m/<معرّف-متجرك> في تبويب جديد، ويُرفَق معها دائمًا عنوان الصفحة الحالية (بالوسيط src) ليعرف المتجر من أي صفحة راسله الزبون.

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

ولهذا يحمل الزرّ في داخله QR code أيضًا (يرسمه خادم Korat نفسه لا هذه الشيفرة): فمن كان تطبيق Korat على هاتفه وقد سجّل دخوله فيه، يمسح الرمز فيدخل غرفة الدردشة فورًا بلا كتابة شيء على الحاسوب — وعلى هواتف أندرويد التي ثُبّت عليها التطبيق، يفتح الرابط نفسه التطبيق مباشرةً.

كيف تبدأ — انسخ سطرًا واحدًا والصقه

الصق هذه الشيفرة قبل إغلاق </body> (أو في أي موضع من الصفحة)، واستبدل somtam-lardprao-42 بـمعرّف صفحة متجرك (حروف وأرقام لاتينية، لا اسم المتجر بالعربية) — وطريقة إيجاده في القسم التالي:

<script src="https://koratland.com/embed/korat-message.js"
        data-korat="somtam-lardprao-42" defer></script>

وبهذا ينتهي الأمر — لا تثبيت إضافيًّا، ولا اعتماديات، ولا أثر في سرعة موقعك (ملفّ واحد صغير يُحمَّل بـdefer فلا يعطّل عرض الصفحة).

أين تجد معرّف متجرك

• افتح صفحة متجرك على Korat على العنوان https://koratland.com/b/<المعرّف> — والمعرّف هو الجزء الواقع بعد /b/ في شريط العنوان.
• والمعرّف نفسه يُستعمل في زرّ الدردشة وفي رمز QR معًا

كيف تلصقها في كل منصّة

• Wix — Editor ← إضافة عنصر (Add) ← Embed Code ← Custom Embeds ← HTML iframe ← الصق الشيفرة أعلاه
• Webflow — Add panel ← Embed ← Embed an HTML Code ← الصق الشيفرة ← Publish
• Shopify — Online Store ← Themes ← Edit code ← افتح ملفّ theme.liquid ← الصق الشيفرة قبل </body>
• WordPress — إن كان موقعك ووردبريس فاستعمل إضافة Korat المخصّصة له (انظر صفحة مركز التوثيق)، ففيها مساعد ضبط داخل قائمة الإدارة ولا تحتاج إلى تعديل شيفرة — والشيفرة في هذه الصفحة تعمل كذلك إن أردت لصقها بنفسك
• موقع كتبته بنفسك أو كتبه لك غيرك — ضع وسم <script> في ملفّ HTML مباشرةً قبل إغلاق </body>

خيارات التخصيص (data-*)

src في رابط الدردشة ورابط صورة QR يأتي دائمًا من location.href الخاصّ بالصفحة التي زُرع فيها الزرّ — ولا تتيح الشيفرة وضع قيمة ثابتة بدلًا منه، لأن ذلك يجعل كل الأزرار تبدو آتيةً من صفحة واحدة، وهو نقيض الغرض من هذه الميزة.

مثال تخصيص كامل:

<script src="https://koratland.com/embed/korat-message.js"
        data-korat="somtam-lardprao-42"
        data-name="سمتم لادبراو"
        data-position="bl"
        data-label="راسلنا الآن"
        data-lang="th"
        defer></script>

إمكانية الوصول (Accessibility)

• الزرّ زرّ حقيقي يُوصَل إليه بمفتاح Tab وله aria-label
• يُغلَق لوح QR بمفتاح Esc
• يحترم إعداد «تقليل الحركة» (prefers-reduced-motion) في جهاز المستخدم
• التباين اللوني كافٍ على الخلفيّتين الفاتحة والداكنة، ويبتعد عن حافّة الشاشة وفق المنطقة الآمنة (safe-area) في الهواتف الحديثة، فلا يحجب شريط الإيماءات أسفل الشاشة

لماذا هو آمن على موقعك

• يرسم واجهته بـShadow DOM ⇒ فلا تتصادم أنماط CSS في موقعك مع أنماط الزرّ أبدًا
• ملفّ واحد بلا اعتماديات خارجية، ولا يحمّل خطوطًا ولا مكتبات إضافية
• ومهما تكرّر تحميله لا يرسم أزرارًا فوق بعضها
• والقيم التي تكتبها في data-* تُهرَّب (escape) قبل عرضها دائمًا