বিষয়বস্তুতে যান
ব্যবহারকারী গাইড কিভাবে করবেন গাইড সাপোর্ট ডেমো অনুরোধ করুন সাইন ইন করুন
Pushwoosh.com

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

সাবস্ক্রিপশন উইজেট হল একটি প্রম্পট এবং একটি লঞ্চার বেল, যা ওয়েবসাইট ভিজিটরদের পুশ নোটিফিকেশন সাবস্ক্রাইব করতে আমন্ত্রণ জানায়। এগুলি একসাথে subscriptionWidget হিসেবে কনফিগার করা হয়, কিন্তু স্বতন্ত্রভাবে চালু করা যায়: শুধু প্রম্পট, শুধু বেল, অথবা দুটিই একসাথে। যেকোনো একটি চালু করলে পুশ সাবস্ক্রিপশন বাটন, কাস্টম সাবস্ক্রিপশন পপআপ, এবং সাবস্ক্রিপশন প্রম্পট প্রতিস্থাপিত হয় — অন্তত একটি অংশ চালু থাকাকালীন, এই তিনটি পুরনো উইজেটের কোনোটিই পেজে লোড হয় না।

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

পূর্বশর্ত

Anchor link to

নিশ্চিত করুন যে আপনি আপনার ওয়েবসাইটে Pushwoosh Web SDK 3.0 বাস্তবায়ন করেছেন। এটি করতে, আমাদের ইন্টিগ্রেশন গাইড অনুসরণ করুন।

১. প্রম্পট এবং বেল চালু করুন

Anchor link to

WebSDK ইনিশিয়ালাইজেশনে subscriptionWidget প্যারামিটার যোগ করুন এবং prompt.enabled এবং/অথবা launcher.enabled-কে true-তে সেট করুন:

Pushwoosh.push(['init', {
  //...
  subscriptionWidget: {
    prompt: { enabled: true },
    launcher: { enabled: true },
  }
}]);

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

২. প্রম্পট এবং বেল কনফিগার করুন

Anchor link to
Pushwoosh.push(['init', {
  //...
  subscriptionWidget: {
    prompt: {
      enabled: true,
      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
      width: 48,             // 16–200
      height: 48,            // 16–200
      imageUrl: 'https://url-image.png',
      background: '#4285f4',
      iconColor: '#ffffff',
    },
    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',
    },
  }
}]);

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

Anchor link to

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 ফর্ম এর পরিবর্তে এই সংমিশ্রণটি প্রত্যাখ্যান করে।

প্রম্পট কখন দেখাবেন

Anchor link to

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

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

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

লঞ্চার বেল

Anchor link to

launcher.enabled এমন ভিজিটরকে একটি ভাসমান বেল দেখায় যিনি এখনও অনুরোধে সাড়া দিতে পারেন (এখনও সাবস্ক্রাইব করেননি, অথবা ব্লক করেছেন), প্রম্পট এবং display.trigger নির্বিশেষে। প্রম্পট খোলা থাকাকালীনও বেলটি স্ক্রিনে থাকে। launcher.position এটিকে চারটি কোণের একটিতে স্থাপন করে। launcher.offset প্রান্ত থেকে এর দূরত্ব পিক্সেলে নির্ধারণ করে।

বেলে ক্লিকের প্রভাব প্রম্পটের উপর নির্ভর করে। prompt.enabled true হলে, ক্লিক প্রম্পটটি টগল করে: খোলে, অথবা ইতিমধ্যে খোলা থাকলে বন্ধ করে। প্রম্পট বন্ধ থাকলে, ক্লিক সরাসরি ব্রাউজারের কাছে অনুমতি চায়, Pushwoosh.subscribe()-এর মতোই — তবে ভিজিটর ইতিমধ্যে নোটিফিকেশন ব্লক করে থাকলে ক্লিকে কিছুই হয় না।

launcher.width এবং launcher.height বেলের আকার পিক্সেলে নির্ধারণ করে (16–200, প্রতিটির ডিফল্ট 48)। launcher.imageUrl গোলাকার বেল বাটনের পরিবর্তে একটি ছবি আঁকে। launcher.background এবং launcher.iconColor গোলাকার বাটনের ফিল এবং গ্লিফের রং নির্ধারণ করে। সেট না করা থাকলে, launcher.background প্যালেটের অ্যাকসেন্ট রঙে এবং launcher.iconColor তার বিপরীতে কনট্রাস্টের জন্য গণনা করা গ্লিফ রঙে ডিফল্ট হয়।

টেক্সট এবং রং

Anchor link to

একবার ব্রাউজার রিপোর্ট করলে যে ভিজিটর নোটিফিকেশন ব্লক করেছেন, তখন অনুরোধের পরিবর্তে 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 ফর্মগুলি এগুলির এবং launcher.background/launcher.iconColor-এর প্রতিটিকে এভাবেই যাচাই করে, সর্বোচ্চ ৬৪ অক্ষর পর্যন্ত। init স্নিপেট colors.*-এর জন্য যেকোনো নন-এম্পটি স্ট্রিং গ্রহণ করে, ফরম্যাট বা দৈর্ঘ্য যাচাই না করেই। launcher.background/launcher.iconColor-এর ক্ষেত্রে এটি ফরম্যাটও যাচাই করে না, কিন্তু মানটি নীরবে ৬৪ অক্ষরে কেটে দেয়।

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

Anchor link to

একটি প্যানেল-পরিচালিত অ্যাপ্লিকেশনে, Settings → Configure platforms → Web-এ যান। সেখানে প্রম্পট এবং বেল দুটি আলাদা কার্ড, প্রতিটির নিজস্ব On/Off ব্যাজ এবং Configure বাটন আছে:

  • Subscription invitation প্রম্পট সম্পাদনা করে: Invitation (লেআউট, অবস্থান, আইকন), When to show (ট্রিগার, বিলম্ব, ক্যাপিং), Texts, এবং Colors।
  • Subscription bell লঞ্চার সম্পাদনা করে: অবস্থান, ছবির URL, প্রস্থ/উচ্চতা, ব্যাকগ্রাউন্ড ও আইকনের রং, এবং এর নিজস্ব টুলটিপ টেক্সট।

প্রতিটি কার্ডের Configure বাটন ফর্মের পাশে একটি লাইভ প্রিভিউ খোলে। সেই কার্ডের নিজস্ব সুইচ বন্ধ থাকলে প্রিভিউ কিছুই আঁকে না। চালু হলে, প্রিভিউয়ের উপরের একটি ড্রপডাউন অনিশ্চিত-ভিজিটরের অনুরোধ এবং ব্লক করা ভিজিটরের ব্যাখ্যার মধ্যে পরিবর্তন করে। একটি কার্ড সংরক্ষণ করলে প্যানেলের উইজেট কনফিগের কপির শুধু তার অংশটি প্রতিস্থাপিত হয় — অন্য কার্ডের সেটিংস এবং আপনার সাইটের WebSDK init স্নিপেট অপরিবর্তিত থাকে।

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

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

Anchor link to

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

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

prompt.enabled false থাকাকালীন show() এবং toggle()-এর কোনো প্রভাব নেই, এবং যে ভিজিটর ইতিমধ্যে সাবস্ক্রাইব করেছেন তার জন্যও নেই। প্রম্পট খোলা show-subscription-widget ইভেন্ট ডিসপ্যাচ করে। এটি বন্ধ করা hide-subscription-widget ডিসপ্যাচ করে:

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');
});

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

Anchor link to

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