نافذة الاشتراك المنبثقة المخصصة

نافذة الاشتراك المنبثقة المخصصة (Custom Subscription Popup) هي نافذة منبثقة تُعرض على صفحة الويب وتقترح على المستخدمين الاشتراك في إشعارات الويب الفورية. يتم تنفيذها باستخدام Pushwoosh WebSDK وتسمح بتجاوز قيود المتصفح على عرض مطالبات الاشتراك الأصلية. يمكن عرض نافذة الاشتراك المنبثقة الأصلية لمستخدم معين مرتين فقط. إذا لم يسمح المستخدم بإشعارات الدفع وأغلق نافذة الاشتراك المنبثقة الأصلية مرتين على التوالي، فلن يتم عرضها مرة أخرى وتعتبر إشعارات الدفع محظورة. أما نافذة الاشتراك المنبثقة المخصصة فيمكن عرضها عدة مرات حسب الحاجة ما لم يقم المستخدم بالاشتراك أو حظر إشعارات الدفع بشكل صريح.

يمكن أن تحتوي نافذة الاشتراك المنبثقة المخصصة على أي نص يشرح مزايا الاشتراك في إشعارات الدفع وزرين قابلين للتخصيص — أحدهما لخيار “اسأل لاحقًا” والآخر لـ “اشتراك”.

بمجرد أن يضغط المستخدم على زر “اشتراك”، تظهر نافذة الاشتراك المنبثقة الأصلية.

عندما يضغط المستخدم على زر “اسأل لاحقًا” أو يغلق النافذة ببساطة، ستظهر نافذة الاشتراك المنبثقة المخصصة مرة أخرى في وقت محدد (افتراضيًا، بعد أسبوع؛ يمكن تخصيص تأخير إعادة المحاولة عبر المعلمة “retryOffset”).

التنفيذ

لتمكين وتخصيص نافذة الاشتراك المنبثقة المخصصة، استخدم البرنامج النصي التالي أثناء تهيئة Pushwoosh WebSDK:

مثال

Pushwoosh.push('init', {
    // . . .,
    subscribePopup: {
        enable: true,                      // (boolean) تفعيل النافذة المنبثقة
        text: 'Text on popup',             // (string) نص لعرضه في النافذة المنبثقة
        confirmSubscriptionButtonText: 'Subscribe', // (string) نص مخصص لزر "الاشتراك"

        manualToggle: false,               // (boolean) تحكم يدوي في إظهار النافذة المنبثقة
        delay: 60,                         // (integer) تأخير بين تحميل الصفحة وظهور النافذة المنبثقة
        retryOffset: 604800,               // (integer) إزاحة زمنية بالثواني لعرض النافذة المنبثقة مرة أخرى

        iconUrl: 'https://...',            // (string) عنوان URL للأيقونة المخصصة
        iconAlt: 'Descriptive text for your icon', // (string) نص بديل (ALT) للأيقونة
        overlay: false,                    // (boolean) يُمكّن تراكب الصفحة عند عرض النافذة المنبثقة
        position: 'top',                   // (string) الموضع على الصفحة. القيم الممكنة: 'top' | 'center' | 'bottom'
        mobileViewMargin: '10px',          // (string) هامش لعرض الجوال

        bgColor: '#fff',                   // (string) لون خلفية النافذة المنبثقة
        borderColor: 'transparent',        // (string) لون إطار النافذة المنبثقة
        boxShadow: '0 3px 6px rgba(0,0,0,0.16)', // (string) ظل النافذة المنبثقة

        textColor: '#000',                 // (string) لون نص النافذة المنبثقة
        textSize: 'inherit',               // (string) حجم نص النافذة المنبثقة
        textWeight: 'normal',              // (string) وزن خط نص النافذة المنبثقة
        fontFamily: 'inherit',             // (string) خط نص النافذة المنبثقة

        subscribeBtnBgColor: '#4285f4',         // (string) لون خلفية زر "الاشتراك"
        subscribeBtnTextColor: '#fff',          // (string) لون نص زر "الاشتراك"
        subscribeBtnTextWeight: 'bold',         // (string) وزن خط نص زر "الاشتراك"
        subscribeBtnBorderColor: 'transparent', // (string) لون إطار زر "الاشتراك"
        subscribeBtnBorderRadius: '4px',        // (string) نصف قطر إطار زر "الاشتراك"

        askLaterButtonText: 'Not now',          // (string) نص مخصص لزر "اسأل لاحقًا"
        askLaterBtnBgColor: 'transparent',      // (string) لون خلفية زر "اسأل لاحقًا"
        askLaterBtnTextColor: '#000',           // (string) لون نص زر "اسأل لاحقًا"
        askLaterBtnBorderColor: 'transparent',  // (string) لون إطار زر "اسأل لاحقًا"
        askLaterBtnBorderRadius: '4px',         // (string) نصف قطر إطار زر "اسأل لاحقًا"
        askLaterBtnTextWeight: 'normal',        // (string) وزن خط نص زر "اسأل لاحقًا"

        theme: 'material',               // (string) سمة النافذة المنبثقة، القيم الممكنة: 'material' | 'topbar'
        viewport: 'desktop'              // (string) منفذ العرض المستهدف، القيم الممكنة: 'desktop' | 'mobile'
    }
});

الوصول إلى نسخة نافذة الاشتراك المنبثقة المخصصة

تتوفر نسخة نافذة الاشتراك المنبثقة المخصصة عبر Pushwoosh.moduleRegistry.subscribePopup.

ملاحظة: تصبح هذه النسخة متاحة فقط بعد تشغيل حدث subscribe-popup-ready. ومع ذلك، لن تكون متاحة إذا كان المستخدم مشتركًا بالفعل في إشعارات الويب الفورية.

توفر النسخة طريقة toggle() التي تسمح لك بإظهار أو إخفاء النافذة المنبثقة يدويًا:

// إظهار أو إخفاء نافذة الاشتراك المنبثقة المخصصة يدويًا
Pushwoosh.moduleRegistry.subscribePopup.toggle(); // تبديل الرؤية
Pushwoosh.moduleRegistry.subscribePopup.toggle(true); // إظهار النافذة المنبثقة
Pushwoosh.moduleRegistry.subscribePopup.toggle(false); // إخفاء النافذة المنبثقة

يسمح هذا بمزيد من التحكم في سلوك النافذة المنبثقة مباشرة من الكود الخاص بك.

السمات

بشكل افتراضي، تستخدم نافذة الاشتراك المنبثقة سمة ‘material’ وتغطي جزءًا من الشاشة عند عرضها، وبالتالي تخفي بعض المحتوى عن زائر موقع الويب.

لتجنب إخفاء المحتوى القيم بواسطة نافذة الاشتراك المنبثقة، استخدم سمة ‘topbar’ بحيث يتم عرض النافذة المنبثقة كشريط ضيق في أعلى الشاشة.

أحداث نافذة الاشتراك المنبثقة المخصصة

الأحداث التالية متاحة لتتبع التفاعلات مع نافذة الاشتراك المنبثقة المخصصة:

// يُنفذ عندما يتم تحميل نافذة الاشتراك المنبثقة المخصصة وتكون جاهزة للعرض
// ملاحظة: لن يتم تشغيل هذا الحدث إذا كان المستخدم مشتركًا بالفعل في إشعارات الويب الفورية.
Pushwoosh.addEventHandler('subscribe-popup-ready', function() {
  console.log("Triggered event: subscribe-popup-ready");
});

// يُنفذ عند عرض نافذة الاشتراك المنبثقة المخصصة
Pushwoosh.addEventHandler('subscribe-popup-show', function() {
  console.log("Triggered event: subscribe-popup-show");
});

// يُنفذ عندما ينقر المستخدم على زر "الاشتراك" في النافذة المنبثقة
Pushwoosh.addEventHandler('subscribe-popup-accept', function() {
  console.log("Triggered event: subscribe-popup-accept");
});

// يُنفذ عندما ينقر المستخدم على زر "اسأل لاحقًا" في النافذة المنبثقة
Pushwoosh.addEventHandler('subscribe-popup-decline', function() {
  console.log("Triggered event: subscribe-popup-decline");
});

// يُنفذ عند إخفاء النافذة المنبثقة
Pushwoosh.addEventHandler('subscribe-popup-hide', function() {
  console.log("Triggered event: subscribe-popup-hide");
});