# কাস্টম সাবস্ক্রিপশন পপআপ

**কাস্টম সাবস্ক্রিপশন পপআপ** হল একটি পপ-আপ উইন্ডো যা ওয়েব পেজে প্রদর্শিত হয় এবং ব্যবহারকারীদের ওয়েব পুশ নোটিফিকেশনে সাবস্ক্রাইব করার জন্য পরামর্শ দেয়। এটি [Pushwoosh WebSDK](/bn/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#integration) দিয়ে বাস্তবায়িত এবং নেটিভ সাবস্ক্রিপশন প্রম্পট প্রদর্শনের উপর ব্রাউজারের সীমাবদ্ধতা অতিক্রম করতে সাহায্য করে। একটি নেটিভ সাবস্ক্রিপশন পপআপ একজন নির্দিষ্ট ব্যবহারকারীকে শুধুমাত্র দুইবার দেখানো যেতে পারে। যদি একজন ব্যবহারকারী পুশ নোটিফিকেশনের অনুমতি না দেন এবং নেটিভ সাবস্ক্রিপশন পপআপটি পরপর দুইবার বন্ধ করে দেন, তবে এটি আর দেখানো হবে না এবং পুশ নোটিফিকেশন ব্লক করা হয়েছে বলে মনে করা হবে। অন্যদিকে, একটি **কাস্টম সাবস্ক্রিপশন পপআপ** যতবার প্রয়োজন ততবার দেখানো যেতে পারে, যতক্ষণ না একজন ব্যবহারকারী সাবস্ক্রাইব করেন বা স্পষ্টভাবে পুশ নোটিফিকেশন ব্লক করেন।

একটি **কাস্টম সাবস্ক্রিপশন পপআপ**-এ পুশ নোটিফিকেশনে সাবস্ক্রাইব করার সুবিধা ব্যাখ্যা করে যেকোনো টেক্সট এবং দুটি কাস্টমাইজযোগ্য বাটন থাকতে পারে — একটি "পরে জিজ্ঞাসা করুন" বিকল্পের জন্য এবং একটি "সাবস্ক্রাইব" এর জন্য।

যখন একজন ব্যবহারকারী "সাবস্ক্রাইব" বাটনে ক্লিক করেন, তখন একটি নেটিভ সাবস্ক্রিপশন পপআপ প্রদর্শিত হয়।

যখন একজন ব্যবহারকারী "পরে জিজ্ঞাসা করুন" বাটনে ক্লিক করেন বা কেবল উইন্ডোটি বন্ধ করে দেন, তখন কাস্টম সাবস্ক্রিপশন পপআপটি একটি নির্দিষ্ট সময় পরে আবার প্রদর্শিত হবে (ডিফল্টভাবে, এক সপ্তাহ পরে; পুনরায় চেষ্টার জন্য বিলম্ব "retryOffset" প্যারামিটারের মাধ্যমে কাস্টমাইজ করা যেতে পারে)।

## বাস্তবায়ন

একটি **কাস্টম সাবস্ক্রিপশন পপআপ** সক্রিয় এবং কাস্টমাইজ করতে, [Pushwoosh WebSDK](/bn/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#integration) ইনিশিয়ালাইজ করার সময় নিম্নলিখিত স্ক্রিপ্টটি ব্যবহার করুন:

```javascript title="উদাহরণ"
Pushwoosh.push('init', {
    // . . .,
    subscribePopup: {
        enable: true,                      // (বুলিয়ান) পপআপ সক্রিয়করণ
        text: 'পপআপের টেক্সট',             // (স্ট্রিং) পপআপে প্রদর্শনের জন্য একটি টেক্সট
        confirmSubscriptionButtonText: 'সাবস্ক্রাইব', // (স্ট্রিং) "সাবস্ক্রাইব" বাটনের জন্য কাস্টম টেক্সট

        manualToggle: false,               // (বুলিয়ান) পপআপ দেখানোর জন্য ম্যানুয়াল নিয়ন্ত্রণ
        delay: 60,                         // (পূর্ণসংখ্যা) পেজ লোড হওয়া এবং পপআপ প্রদর্শিত হওয়ার মধ্যে বিলম্ব
        retryOffset: 604800,               // (পূর্ণসংখ্যা) পপআপটি আবার দেখানোর জন্য সেকেন্ডে একটি অফসেট

        iconUrl: 'https://...',            // (স্ট্রিং) কাস্টম আইকন URL
        iconAlt: 'আপনার আইকনের জন্য বর্ণনামূলক টেক্সট', // (স্ট্রিং) আইকনের জন্য ALT টেক্সট
        overlay: false,                    // (বুলিয়ান) পপআপ প্রদর্শিত হলে পেজ ওভারলে সক্রিয় করে
        position: 'top',                   // (স্ট্রিং) পেজের উপর অবস্থান। সম্ভাব্য মান: ’top' | 'center' | 'bottom’
        mobileViewMargin: '10px',          // (স্ট্রিং) মোবাইল ভিউয়ের জন্য মার্জিন

        bgColor: '#fff',                   // (স্ট্রিং) পপআপের ব্যাকগ্রাউন্ড রঙ
        borderColor: 'transparent',        // (স্ট্রিং) পপআপের বর্ডার রঙ
        boxShadow: '0 3px 6px rgba(0,0,0,0.16)', // (স্ট্রিং) পপআপের শ্যাডো

        textColor: '#000',                 // (স্ট্রিং) পপআপের টেক্সটের রঙ
        textSize: 'inherit',               // (স্ট্রিং) পপআপের টেক্সটের আকার
        textWeight: 'normal',              // (স্ট্রিং) পপআপের টেক্সটের ওজন
        fontFamily: 'inherit',             // (স্ট্রিং) পপআপের টেক্সটের ফন্ট

        subscribeBtnBgColor: '#4285f4',         // (স্ট্রিং) "সাবস্ক্রাইব" বাটনের ব্যাকগ্রাউন্ড রঙ
        subscribeBtnTextColor: '#fff',          // (স্ট্রিং) "সাবস্ক্রাইব" বাটনের টেক্সটের রঙ
        subscribeBtnTextWeight: 'bold',         // (স্ট্রিং) "সাবস্ক্রাইব" বাটনের টেক্সটের ওজন
        subscribeBtnBorderColor: 'transparent', // (স্ট্রিং) "সাবস্ক্রাইব" বাটনের বর্ডার রঙ
        subscribeBtnBorderRadius: '4px',        // (স্ট্রিং) "সাবস্ক্রাইব" বাটনের বর্ডার রেডিয়াস

        askLaterButtonText: 'এখন নয়',          // (স্ট্রিং) "পরে জিজ্ঞাসা করুন" বাটনের জন্য কাস্টম টেক্সট
        askLaterBtnBgColor: 'transparent',      // (স্ট্রিং) "পরে জিজ্ঞাসা করুন" বাটনের ব্যাকগ্রাউন্ড রঙ
        askLaterBtnTextColor: '#000',           // (স্ট্রিং) "পরে জিজ্ঞাসা করুন" বাটনের টেক্সটের রঙ
        askLaterBtnBorderColor: 'transparent',  // (স্ট্রিং) "পরে জিজ্ঞাসা করুন" বাটনের বর্ডার রঙ
        askLaterBtnBorderRadius: '4px',         // (স্ট্রিং) "পরে জিজ্ঞাসা করুন" বাটনের বর্ডার রেডিয়াস
        askLaterBtnTextWeight: 'normal',        // (স্ট্রিং) "পরে জিজ্ঞাসা করুন" বাটনের টেক্সটের ওজন

        theme: 'material',               // (স্ট্রিং) পপআপ থিম, সম্ভাব্য মান: 'material' | 'topbar'
        viewport: 'desktop'              // (স্ট্রিং) টার্গেট ভিউপোর্ট, সম্ভাব্য মান: 'desktop' | 'mobile'
    }
});
```


### কাস্টম সাবস্ক্রিপশন পপআপ ইনস্ট্যান্স অ্যাক্সেস করা

**কাস্টম সাবস্ক্রিপশন পপআপ** ইনস্ট্যান্সটি `Pushwoosh.moduleRegistry.subscribePopup`-এর মাধ্যমে উপলব্ধ।

**দ্রষ্টব্য:** এই ইনস্ট্যান্সটি কেবল `subscribe-popup-ready` ইভেন্টটি ট্রিগার হওয়ার পরেই অ্যাক্সেসযোগ্য হয়। তবে, **ব্যবহারকারী যদি ইতিমধ্যে পুশ নোটিফিকেশনে সাবস্ক্রাইব করে থাকেন তবে এটি উপলব্ধ হবে না।**

ইনস্ট্যান্সটি একটি `toggle()` মেথড প্রদান করে যা আপনাকে ম্যানুয়ালি পপআপটি দেখাতে বা লুকাতে দেয়:

```javascript
// কাস্টম সাবস্ক্রিপশন পপআপ ম্যানুয়ালি দেখান বা লুকান
Pushwoosh.moduleRegistry.subscribePopup.toggle(); // দৃশ্যমানতা টগল করে
Pushwoosh.moduleRegistry.subscribePopup.toggle(true); // পপআপ দেখায়
Pushwoosh.moduleRegistry.subscribePopup.toggle(false); // পপআপ লুকায়
```

এটি আপনার কোড থেকে সরাসরি পপআপের আচরণের উপর আরও নিয়ন্ত্রণ দেয়।

## থিম

ডিফল্টভাবে, সাবস্ক্রিপশন পপআপ একটি **'material' থিম** ব্যবহার করে এবং প্রদর্শিত হলে স্ক্রিনের কিছু অংশ ওভারলে করে, যার ফলে ওয়েবসাইট ভিজিটরের কাছ থেকে কিছু কন্টেন্ট লুকিয়ে যায়।

<img src="/web-push-notifications-custom-subscription-popup-1.webp" alt="'ম্যাটেরিয়াল' থিম"/>

সাবস্ক্রিপশন পপআপ দ্বারা মূল্যবান কন্টেন্ট লুকানো এড়াতে, **'topbar' থিম** ব্যবহার করুন যাতে পপআপটি স্ক্রিনের উপরে একটি সংকীর্ণ বার হিসাবে দেখানো হয়।

<img src="/web-push-notifications-custom-subscription-popup-2.webp" alt="'টপবার' থিম"/>

## কাস্টম সাবস্ক্রিপশন পপআপ ইভেন্টস

**কাস্টম সাবস্ক্রিপশন পপআপ**-এর সাথে ইন্টারঅ্যাকশন ট্র্যাক করার জন্য নিম্নলিখিত ইভেন্টগুলি উপলব্ধ:

```javascript
// যখন কাস্টম সাবস্ক্রিপশন পপআপ লোড হয় এবং দেখানোর জন্য প্রস্তুত হয় তখন এটি কার্যকর হয়
// দ্রষ্টব্য: ব্যবহারকারী যদি ইতিমধ্যে পুশ নোটিফিকেশনে সাবস্ক্রাইব করে থাকেন তবে এই ইভেন্টটি ট্রিগার হবে না।
Pushwoosh.addEventHandler('subscribe-popup-ready', function() {
  console.log("ট্রিগার করা ইভেন্ট: subscribe-popup-ready");
});

// যখন কাস্টম সাবস্ক্রিপশন পপআপ দেখানো হয় তখন এটি কার্যকর হয়
Pushwoosh.addEventHandler('subscribe-popup-show', function() {
  console.log("ট্রিগার করা ইভেন্ট: subscribe-popup-show");
});

// যখন একজন ব্যবহারকারী পপ-আপ উইন্ডোতে 'সাবস্ক্রাইব' বাটনে ক্লিক করেন তখন এটি কার্যকর হয়
Pushwoosh.addEventHandler('subscribe-popup-accept', function() {
  console.log("ট্রিগার করা ইভেন্ট: subscribe-popup-accept");
});

// যখন একজন ব্যবহারকারী পপ-আপ উইন্ডোতে 'পরে জিজ্ঞাসা করুন' বাটনে ক্লিক করেন তখন এটি কার্যকর হয়
Pushwoosh.addEventHandler('subscribe-popup-decline', function() {
  console.log("ট্রিগার করা ইভেন্ট: subscribe-popup-decline");
});

// যখন পপআপটি লুকিয়ে যায় তখন এটি কার্যকর হয়
Pushwoosh.addEventHandler('subscribe-popup-hide', function() {
  console.log("ট্রিগার করা ইভেন্ট: subscribe-popup-hide");
});
```