# সাবস্ক্রিপশন উইজেট

**সাবস্ক্রিপশন উইজেট** হল একটি লঞ্চার বেল এবং একটি প্রম্পট যা ওয়েবসাইট ভিজিটরদের পুশ নোটিফিকেশন সাবস্ক্রাইব করতে আমন্ত্রণ জানায়। এটি [পুশ সাবস্ক্রিপশন বাটন](/bn/developer/pushwoosh-sdk/web-push-notifications/push-subscription-button/), [কাস্টম সাবস্ক্রিপশন পপআপ](/bn/developer/pushwoosh-sdk/web-push-notifications/custom-subscription-popup/), এবং [সাবস্ক্রিপশন প্রম্পট](/bn/developer/guides/messaging-channels/subscription-prompt/) উইজেটগুলিকে একটি একক কম্পোনেন্টে প্রতিস্থাপন করে। এটি সক্রিয় থাকাকালীন, এই তিনটির কোনোটিই পেজে লোড হয় না, তাই ভিজিটররা কখনও দুটি প্রতিযোগী অনুরোধ দেখেন না।

যে ভিজিটর এখনও সিদ্ধান্ত নেননি তিনি অনুরোধটি দেখেন। যে ভিজিটর ইতিমধ্যে নোটিফিকেশন ব্লক করেছেন তিনি এর পরিবর্তে সেগুলি আনব্লক করার ব্যাখ্যা দেখেন।

## পূর্বশর্ত

নিশ্চিত করুন যে আপনি আপনার ওয়েবসাইটে Pushwoosh Web SDK 3.0 বাস্তবায়ন করেছেন। এটি করতে, আমাদের [ইন্টিগ্রেশন গাইড](/bn/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#integration) অনুসরণ করুন।

## ১. উইজেট সক্রিয় করুন

WebSDK ইনিশিয়ালাইজেশনে `subscriptionWidget` প্যারামিটার যোগ করুন এবং `enable`-কে `true`-তে সেট করুন:

```javascript
Pushwoosh.push(['init', {
  //...
  subscriptionWidget: {
    enable: true,
  }
}]);
```

নিচের প্রতিটি ফিল্ড ঐচ্ছিক। বাদ দেওয়া ফিল্ড তার ডিফল্ট মানে ফিরে যায়। init স্নিপেটে, সীমার বাইরের একটি সংখ্যা নীরবে নিকটতম সীমায় সীমাবদ্ধ করা হয় এবং একটি অবৈধ enum মান নীরবে তার ডিফল্ট মানে ফিরে যায়, কোনো কনসোল সতর্কতা ছাড়াই। নিচে বর্ণিত Control Panel ফর্ম একটি অবৈধ মান সরাসরি প্রত্যাখ্যান করে এবং তা সংরক্ষণ করতে অস্বীকার করে।

## ২. প্রম্পট কনফিগার করুন

```javascript
Pushwoosh.push(['init', {
  //...
  subscriptionWidget: {
    enable: true,
    prompt: {
      layout: 'card',       // 'card' | 'bar' | 'modal'
      position: 'bottom-right',
      iconUrl: 'https://url-image.png',
      borderRadius: 12,     // 0–32
      overlay: false,
    },
    launcher: {
      enabled: true,
      position: 'bottom-right', // 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
      offset: 20,           // 0–100
      size: 48,             // 32–80
    },
    display: {
      trigger: 'auto',      // 'auto' | 'launcher' | 'manual'
      delay: 5,             // seconds, 0–3600
      cappingCount: 3,      // auto-shows per visitor, 0–100, 0 = unlimited
      cappingInterval: 24,  // hours between auto-shows, 0–8760
    },
    texts: {
      title: 'Stay in the loop',
      message: 'Get notified about news and updates.',
      acceptText: 'Allow',
      declineText: 'Not now',
      closeText: 'Close',
      blockedTitle: 'Notifications are blocked',
      blockedMessage: 'Enable notifications in your browser settings to stay updated.',
      launcherLabel: 'Subscribe to notifications',
      launcherBlockedLabel: 'Notifications are blocked',
    },
    colors: {
      background: '#ffffff',
      accent: '#4285f4',
      text: '#000000',
      textSecondary: '#666666',
    },
  }
}]);
```

### লেআউট এবং অবস্থান

`prompt.layout` প্রম্পটের আকৃতি সেট করে:

- **`card`** — একটি কম্প্যাক্ট কার্ড যা কোনো প্রান্ত বা কোণে অ্যাঙ্কর করা থাকে। `prompt.position` গ্রহণ করে `top`, `bottom`, `top-left`, `top-right`, `bottom-left`, অথবা `bottom-right`।
- **`bar`** — একটি বার যা পেজের সম্পূর্ণ প্রস্থ জুড়ে থাকে। `prompt.position` শুধুমাত্র `top` অথবা `bottom` গ্রহণ করে।
- **`modal`** — পেজের কেন্দ্রে অবস্থিত একটি উইন্ডো। `prompt.position` সর্বদা `center`।

অবস্থান নির্বাচন করার আগে আপনার সেট করা লেআউটের জন্য উপরের তালিকাটি দেখুন। init স্নিপেটে, বর্তমান লেআউট সমর্থন করে না এমন অবস্থান নীরবে লেআউটের ডিফল্ট মান দিয়ে প্রতিস্থাপিত হয়। Control Panel ফর্ম এর পরিবর্তে এই সংমিশ্রণটি প্রত্যাখ্যান করে।

### কখন দেখাবেন

`display.trigger` নিয়ন্ত্রণ করে প্রম্পট কী খোলে:

- **`auto`** — পেজ লোড হওয়ার `display.delay` সেকেন্ড পর স্বয়ংক্রিয়ভাবে খোলে, তারপর ভিজিটর সিদ্ধান্ত না নিলে প্রতি `display.cappingInterval` ঘণ্টায় আবার, সর্বমোট `display.cappingCount` বার পর্যন্ত (`0` মানে কোনো সীমা নেই)।
- **`launcher`** — শুধুমাত্র তখনই খোলে যখন ভিজিটর বেলে ক্লিক করেন।
- **`manual`** — শুধুমাত্র নিচে বর্ণিত `Pushwoosh.moduleRegistry.subscriptionWidget`-এর মাধ্যমে খোলে।

`display.delay`, `display.cappingCount`, এবং `display.cappingInterval` শুধুমাত্র `auto` ট্রিগারের ক্ষেত্রে প্রযোজ্য।

### লঞ্চার বেল

`launcher.enabled` ভিজিটর সাবস্ক্রাইব না করা পর্যন্ত একটি ভাসমান বেল দেখায়, `display.trigger` যাই হোক না কেন — এমনকি `trigger: 'auto'`-এর ক্ষেত্রেও, বেলটি দৃশ্যমান থাকে যাতে ভিজিটর প্রম্পটটি বন্ধ করার পরে আবার খুলতে পারেন। `launcher.position` এটিকে চারটি কোণের একটিতে স্থাপন করে। `launcher.offset` (প্রান্ত থেকে পিক্সেলে দূরত্ব) এবং `launcher.size` (বেলের ব্যাস পিক্সেলে) এর অবস্থান সূক্ষ্ম-সমন্বয় করে।

### টেক্সট এবং রং

একবার ব্রাউজার রিপোর্ট করলে যে ভিজিটর নোটিফিকেশন ব্লক করেছেন, তখন অনুরোধের পরিবর্তে `texts.blockedTitle`, `texts.blockedMessage`, এবং `texts.closeText` দেখানো হয় — সেই অবস্থায় `texts.acceptText` এবং `texts.declineText` কখনও দেখা যায় না। `texts.launcherLabel` এবং `texts.launcherBlockedLabel` প্রতিটি অবস্থায় বেলের টুলটিপ। প্রতিটি টেক্সট ফিল্ড সর্বোচ্চ ৩০০ অক্ষর গ্রহণ করে।

`colors.accent`, `colors.background`, `colors.text`, এবং `colors.textSecondary` একটি হেক্স মান বা CSS রঙের নাম গ্রহণ করে। Control Panel ফর্ম প্রতিটি ফিল্ডকে এভাবেই যাচাই করে, সর্বোচ্চ ৬৪ অক্ষর পর্যন্ত। init স্নিপেট এই ফিল্ডগুলির জন্য যেকোনো নন-এম্পটি স্ট্রিং গ্রহণ করে, তার ফরম্যাট বা দৈর্ঘ্য যাচাই না করেই।

<Aside type="note">
একটি ডার্ক-মোড প্যালেট, লঞ্চারের `zIndex`, এবং একটি কাস্টম `fontFamily` অতিরিক্ত, শুধুমাত্র-init-প্যারামিটার ফিল্ড হিসেবে উপলব্ধ। এগুলি নিচে বর্ণিত Control Panel ফর্মে প্রকাশিত হয় না।
</Aside>

## Control Panel-এ এটি পরিচালনা করা

<Aside type="caution" title="শুধুমাত্র প্যানেল-পরিচালিত অ্যাপ্লিকেশনের জন্য">
Control Panel কার্ডটি শুধুমাত্র সেই অ্যাপ্লিকেশনের জন্য উপলব্ধ যাদের Web প্ল্যাটফর্ম **প্যানেল-পরিচালিত** মোডে আছে (দেখুন [Web Push SDK 3.0](/bn/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/))। একটি স্নিপেট-কনফিগার করা অ্যাপ্লিকেশনের জন্য, উপরে দেখানো মতো init স্নিপেটে `subscriptionWidget` সেট করুন।
</Aside>

একটি প্যানেল-পরিচালিত অ্যাপ্লিকেশনে, **Settings → Configure platforms → Web**-এ যান এবং **Subscription widget** কার্ডটি খুলুন। কার্ডের একটি ব্যাজ দেখায় উইজেটটি **On** নাকি **Off**।

উপরে বর্ণিত একই ফিল্ডগুলি সম্পাদনা করতে **Configure**-এ ক্লিক করুন, যা **Prompt**, **When to show**, **Bell**, **Texts**, এবং **Colors** হিসেবে গ্রুপ করা, একটি লাইভ প্রিভিউয়ের পাশে যা অনিশ্চিত-ভিজিটর এবং ব্লক করা ভিজিটর উভয় অবস্থাই দেখায়। সংরক্ষণ করলে প্যানেলের উইজেট কনফিগের কপি প্রতিস্থাপিত হয়। এটি আপনার সাইটের WebSDK init স্নিপেটকে প্রভাবিত করে না।

যতক্ষণ একটি অ্যাপ্লিকেশন প্যানেল-পরিচালিত থাকে, এই কার্ডে সংরক্ষিত মানগুলি সাইটের init স্নিপেটের একই কী-গুলিকে ওভাররাইড করে। একটি সাইটকে প্যানেল কনফিগারেশনে স্থানান্তর করা প্যানেলে একটি সুইচ মাত্র, সাইটে কোনো কোড পরিবর্তন ছাড়াই।

## ৩. আপনার কোড থেকে উইজেট নিয়ন্ত্রণ করুন

একবার উইজেট বান্ডেল লোড হয়ে গেলে, এটি `Pushwoosh.moduleRegistry.subscriptionWidget`-এ একটি API প্রকাশ করে:

```javascript
Pushwoosh.moduleRegistry.subscriptionWidget.show();          // Opens the prompt
Pushwoosh.moduleRegistry.subscriptionWidget.hide();          // Closes the prompt
Pushwoosh.moduleRegistry.subscriptionWidget.toggle();        // Toggles the current state
Pushwoosh.moduleRegistry.subscriptionWidget.toggle(true);    // Opens the prompt
Pushwoosh.moduleRegistry.subscriptionWidget.isVisible();     // Returns whether the prompt is open
```

যে ভিজিটর ইতিমধ্যে সাবস্ক্রাইব করেছেন তার জন্য `show()`-এর কোনো প্রভাব নেই। প্রম্পট খোলা `show-subscription-widget` ইভেন্ট ডিসপ্যাচ করে। এটি বন্ধ করা `hide-subscription-widget` ডিসপ্যাচ করে:

```javascript
Pushwoosh.addEventHandler('show-subscription-widget', function() {
  console.log('Triggered event: show-subscription-widget');
});

Pushwoosh.addEventHandler('hide-subscription-widget', function() {
  console.log('Triggered event: hide-subscription-widget');
});
```

## পুরনো উইজেট থেকে মাইগ্রেট করা

পুশ সাবস্ক্রিপশন বাটন, কাস্টম সাবস্ক্রিপশন পপআপ, এবং সাবস্ক্রিপশন প্রম্পট তাদের নিজস্ব পেজে বর্ণিত হিসেবে কাজ করতে থাকে যতক্ষণ `subscriptionWidget.enable` সেট না করা হয় বা `false` থাকে। এটিকে `true`-তে সেট করলে তিনটিরই লোড হওয়া বন্ধ হয়ে যায়, স্নিপেট-কনফিগার করা এবং প্যানেল-পরিচালিত উভয় অ্যাপ্লিকেশনেই।

<Aside type="caution">
একটি প্যানেল-পরিচালিত অ্যাপ্লিকেশনকে সাবস্ক্রিপশন উইজেটে স্যুইচ করলে এটি যে পুরনো উইজেট প্রতিস্থাপন করে তার সেটিংস বহন করে না — উইজেটটি নিজস্ব ডিফল্ট মান থেকে শুরু হয়, এবং আপনি এটিকে এর কার্ডে নতুন করে কনফিগার করেন।
</Aside>