تثبيت JS Web SDK

تضيف حزمة JS Web SDK خدمة Shrinkit إلى موقع غير مثبّت من متجر تطبيقات سلة أو زد أو شوبيفاي: تعرض نافذة طلب إذن الإشعارات وتسجّل المشتركين في إشعارات المتصفح. متاجر شوبيفاي تحصل على إشعارات المتصفح تلقائيًا مع التطبيق.

المتطلبات

• متجر في Shrinkit — راجع إنشاء متجر.
• معرّف المتجر (Store ID) ومفتاح API، من إعدادات المتجر ← مفتاح API.
• أن يعمل موقعك عبر HTTPS. المتصفحات تسمح بالإشعارات على الصفحات الآمنة فقط.
• ملف عامل الخدمة firebase-messaging-sw.js، محفوظًا في جذر موقعك بحيث يُفتح من https://yoursite.com/firebase-messaging-sw.js (مثلًا public/firebase-messaging-sw.js). الإشعارات ما تشتغل بدونه، ولازم يكون في الجذر عشان يغطي كل الصفحات.

فقط في متجرك

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

موقع متعدد الصفحات

أضف السكربت داخل وسم head في كل الصفحات:

<script src="https://cdn.appgain.io/docs/appgain/appgainSdk/websdk/shrinkit.min.js"></script>

ثم هيّئ الحزمة داخل body:

<script>
  const shrinkitConfig = {
    projectId: "<Your Store ID>",
    apiKey: "<Your API Key>",
    websiteName: "<Your Website Name (Optional)>",
    userId: "<Your User ID (Optional)>",
    useCustomModal: true, // Optional - defaults to false

    // custom modal config
    title: "Modal Title", // Optional
    description: "Modal Description", // Optional
    yesButton: "YES", // Optional
    noButton: "NO", // Optional
    modalLanguage: "en", // Optional [en, ar] - defaults to en
    modalImage: "https://placehold.co/600x400/png", // Optional
  };

  Shrinkit.init(shrinkitConfig)
    .then((response) => {
      console.log("Shrinkit SDK initialized successfully", response);
    })
    .catch((error) => {
      console.log("Shrinkit SDK initialization failed", error);
    });
</script>

تطبيق صفحة واحدة (React وVue وNext.js…)

أضف السكربت داخل head في ملف index.html (أو في التخطيط الجذري)، ثم هيّئ الحزمة مرة واحدة من نقطة بداية التطبيق — مثل App.js أو App.vue أو index.js:

const shrinkitConfig = {
  projectId: "<Your Store ID>",
  apiKey: "<Your API Key>",
  websiteName: "<Your Website Name (Optional)>",
  userId: "<Your User ID (Optional)>",
  useCustomModal: true, // Optional - defaults to false

  // custom modal config
  title: "Modal Title", // Optional
  description: "Modal Description", // Optional
  yesButton: "YES", // Optional
  noButton: "NO", // Optional
  modalLanguage: "en", // Optional [en, ar] - defaults to en
  modalImage: "https://placehold.co/600x400/png", // Optional
};

try {
  await Shrinkit.init(shrinkitConfig);
  console.log("Shrinkit SDK initialized successfully");
} catch (error) {
  console.log("Shrinkit SDK initialization failed", error);
}

في Next.js، ضع firebase-messaging-sw.js في مجلد public/ وشغّل التهيئة داخل مكوّن يعمل في المتصفح (client component).

حل المشكلات

• ما تظهر نافذة الإذن: يمكن الزائر حظر الإشعارات لموقعك سابقًا — لازم يسمح بها من إعدادات الموقع في المتصفح. والمتصفحات تخفي النافذة في الصفحات غير الآمنة (بدون HTTPS).
• المشتركون ما يزيدون: تأكد أن https://yoursite.com/firebase-messaging-sw.js يفتح في المتصفح، وأن سياسة أمان المحتوى (CSP) إن وُجدت تسمح بالسكربتات من cdn.appgain.io والاتصال بـ api.shrinkit.me وخدمات Google Firebase للإشعارات.
• آيفون وآيباد: إشعارات المتصفح تشتغل فقط للزوار الذين أضافوا موقعك إلى الشاشة الرئيسية. راجع إشعارات المتصفح.

مواضيع ذات صلة

• إشعارات المتصفح
• إرسال إشعار متصفح
• إشعارات المتصفح

---

ثبّت Shrinkit على متجرك

Shrinkit يشتغل مع سلة وزد وشوبيفاي. ثبّت التطبيق على متجرك، وطلباتك وسلاتك ومنتجاتك وعملاؤك تظهر في لوحة التحكم تلقائيًا — بدون برمجة وبدون استيراد بيانات.

ثبّت على سلة ثبّت على زد ثبّت على شوبيفاي

متجرك على منصة ثانية؟ كلّمنا على واتساب.