دليل تضمين الويدجت

تعلم كيف تضيف بوت الدردشة الخاص بك إلى موقعك الإلكتروني. العملية بسيطة — فقط انسخ سطر كود واحد والصقه في موقعك.

الحصول على كود التضمين

انتقل إلى صفحة البوت

من لوحة التحكم، اختر البوت الذي تريد تضمينه.

افتح تبويب "الويدجت"

انقر على تبويب "الويدجت" لعرض إعدادات التضمين.

انسخ الكود

انقر على زر "نسخ" لنسخ كود التضمين إلى الحافظة.

كود التضمين

كود التضمين يبدو كالتالي:

<script src="https://yourdomain.com/widget/searj-widget.js" data-bot-id="YOUR_BOT_ID"></script>

سيتم استبدال YOUR_BOT_ID تلقائياً بمعرف البوت الخاص بك عند نسخ الكود من لوحة التحكم.

أين تضع الكود

ضع كود التضمين قبل وسم الإغلاق مباشرة في صفحات HTML الخاصة بك:

<html>
  <head>...</head>
  <body>
    <!-- محتوى موقعك -->

    <!-- Searj Chatbot Widget -->
    <script src="https://yourdomain.com/widget/searj-widget.js" data-bot-id="YOUR_BOT_ID"></script>
  </body>
</html>

تعليمات حسب المنصة

WordPress

لديك خياران لإضافة الكود في ووردبريس:

الخيار 1: محرر القالب

انتقل إلى المظهر ← محرر القالب
افتح ملف footer.php
الصق كود التضمين قبل وسم ‎</body>‎
انقر "تحديث الملف"

الخيار 2: إضافة (مُستحسن)

ثبّت إضافة "Insert Headers and Footers"
انتقل إلى الإعدادات ← Insert Headers and Footers
الصق الكود في قسم "Scripts in Footer"
احفظ الإعدادات

Shopify

انتقل إلى المتجر الإلكتروني ← القوالب
انقر على "تعديل الكود"
افتح ملف theme.liquid
الصق كود التضمين قبل وسم ‎</body>‎
انقر "حفظ"

Wix

انتقل إلى الإعدادات ← كود مخصص
انقر "إضافة كود مخصص"
الصق كود التضمين
اختر "نهاية Body" كموقع الإضافة
اختر "جميع الصفحات" للتطبيق
انقر "تطبيق"

HTML مخصص

الصق كود التضمين مباشرة في ملف HTML الخاص بك قبل وسم ‎</body>‎.

Next.js / React

أضف السكريبت في ملف layout الرئيسي أو ملف ‎_document:

// app/layout.tsx (Next.js App Router)
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://yourdomain.com/widget/searj-widget.js"
          data-bot-id="YOUR_BOT_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

اختبار التضمين

بعد إضافة الكود، تحقق من عمله بالخطوات التالية:

افتح موقعك في المتصفح

قد تحتاج لمسح ذاكرة التخزين المؤقت (Ctrl+Shift+R).

ابحث عن زر الدردشة

يجب أن يظهر زر دردشة عائم في الزاوية السفلية من الشاشة.

جرّب المحادثة

انقر على الزر واطرح سؤالاً لاختبار البوت.

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

✅ يمكنك معاينة الويدجت مباشرة من تبويب "الويدجت" في لوحة التحكم بدون الحاجة لإضافة الكود إلى موقعك أولاً. استخدم هذه الميزة لاختبار مظهر البوت وسلوكه.

💡 يستخدم الويدجت تقنية Shadow DOM لعزل أنماط CSS — وهذا يعني أن الويدجت لن يؤثر على تصميم موقعك ولن يتأثر بأنماط CSS الموجودة في موقعك.