ওয়েব ইনবক্স উইজেট

Web Message Inbox আপনার ওয়েবসাইটে একত্রিত করা হলে তা কনভার্সন ব্যাপকভাবে বৃদ্ধি করে। একটি ব্যবহার-উপযোগী Web Inbox Widget ব্যবহারকারীদের সাথে যোগাযোগের জন্য প্রয়োজনীয় সমস্ত পদ্ধতিতে আউট অফ দ্য বক্স সাবস্ক্রাইব করা থাকে। শুধু আপনার ওয়েবসাইটে উইজেটটি সংহত করুন এবং আপনার ব্র্যান্ডের সাথে মানানসই করতে এর চেহারা কাস্টমাইজ করুন।

inboxWidget.enable: true সেট করলে একজন ভিজিটরের ডিভাইস ইনবক্স ডেলিভারির জন্য রেজিস্টার হয়, এমনকি যদি ভিজিটর পুশ নোটিফিকেশন অনুমতি না দিয়ে থাকে, তাই এটি এমন ভিজিটরদের কাছে পৌঁছাতে পারে যারা কখনও পুশে সাবস্ক্রাইব করেনি।

SDK সংস্করণ (v3.66.0+) সম্পর্কে গুরুত্বপূর্ণ নোট

সংস্করণ 3.66.0 থেকে, একজন ভিজিটরের ডিভাইস লগ ইন করার আগে তাদের ব্রাউজারের সাথে সংযুক্ত একটি হার্ডওয়্যার আইডি দ্বারা ট্র্যাক করা হয়। যদি ভিজিটর registerUser কল করার আগে তাদের সাইটের ডেটা পরিষ্কার করে, ব্রাউজার পরিবর্তন করে, বা ডিভাইস পরিবর্তন করে, তাহলে সেই ট্র্যাকিং ভেঙে যায়। তাদের পূর্ববর্তী বার্তা ইতিহাস হারিয়ে যায় এবং ভিজিটর লগ ইন করার পরেও তা আর ফিরে আসে না।

পূর্বশর্ত

ওয়েবসাইটের জন্য মেসেজ ইনবক্স সংহত করতে, অনুগ্রহ করে গাইডটি অনুসরণ করুন।

উইজেট সংহত করা

Pushwoosh WebSDK শুরু করার সময়, inboxWidget প্যারামিটার যোগ করুন:

উদাহরণ

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox'
  }
}]);

ট্রিগার

উইজেটটি রেন্ডার করতে, আপনার উইজেটের জন্য একটি ট্রিগার এলিমেন্ট নির্দিষ্ট করা উচিত। পৃষ্ঠার যেকোনো DOM-এলিমেন্ট ট্রিগার হতে পারে। এর আইডি “pwInbox” হিসাবে নির্দিষ্ট করুন অথবা SDK শুরু করার সময় triggerId প্যারামিটারে যেকোনো কাস্টম আইডি বরাদ্দ করুন।
WebSDK শুরু হলে, অপঠিত বার্তাগুলির ব্যাজ ট্রিগার এলিমেন্টে প্রদর্শিত হয়। ট্রিগার এলিমেন্টে ট্যাপ করা হলে, উইজেটটি পৃষ্ঠায় উপস্থিত হয়।

অবস্থান নির্ধারণ

ডিফল্টরূপে, উইজেটটি ট্রিগার এলিমেন্টের সবচেয়ে কাছের স্ক্রিন বর্ডার থেকে বিপরীত দিকে অবস্থিত থাকে।
আপনি কনফিগারেশন প্যারামিটারের মাধ্যমে উইজেটের অবস্থান সেট করতে পারেন:

উদাহরণ

Pushwoosh.push(['init', {

  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    position: 'top'
  }
}]);

ডিফল্টরূপে, inboxWidget বন্ধ হওয়া </body> ট্যাগের আগে স্থাপন করা উচিত।
নিচের উদাহরণে দেখানো হিসাবে পৃষ্ঠার যেকোনো জায়গায় উইজেটটি রেন্ডার করুন:

উদাহরণ

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {

    enable: true,
    triggerId: 'pwInbox',
    appendTo: '.widget-parent-element-class'
  }
}]);

একটি প্যারেন্ট এলিমেন্টের জন্য অনুসন্ধান querySelector দ্বারা সঞ্চালিত হয়, তাই এর জন্য একটি ক্লাস, আইডি বা এলিমেন্টের স্পষ্ট নির্দিষ্টকরণ প্রয়োজন।

উইজেট কাস্টমাইজ করা

টেক্সট কাস্টমাইজ করা

উইজেটের টেক্সট কাস্টমাইজ করতে, emptyInboxTitle এবং emptyInboxText প্যারামিটার যোগ করুন:

উদাহরণ

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    title: 'Inbox',                                 // উইজেটের শিরোনাম
    emptyInboxTitle: 'You\'re all caught up',       // খালি ইনবক্স উইজেটের শিরোনাম
    emptyInboxText: 'There are no new messages. Stay tuned!'    // খালি ইনবক্স উইজেটের টেক্সট
  }
}]);

ফলাফলটি এইরকম দেখায়:

চেহারা কাস্টমাইজ করা

উইজেটের চেহারা কাস্টমাইজ করতে, নিম্নলিখিত প্যারামিটারগুলি ব্যবহার করুন:

উদাহরণ

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    bgColor: '#ffffff',         // উইজেটের পটভূমি
    borderColor: 'transparent', // উইজেটের বর্ডারের রঙ
    borderRadius: 4,            // উইজেটের বর্ডার রেডিয়াস (px)
    widgetWidth: 350,           // উইজেটের প্রস্থ (px)
    zIndex: 100                 // z-index
  }
}]);

অপঠিত বার্তা সংখ্যা ব্যাজ নিম্নলিখিতভাবে কাস্টমাইজ করা যেতে পারে:

উদাহরণ

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    badgeBgColor: '#ff4c00',    // ব্যাজের রঙ
    badgeTextColor: '#ffffff'   // ব্যাজের টেক্সটের রঙ
  }
}]);

টেক্সট বৈশিষ্ট্য কাস্টমাইজ করতে, নিম্নলিখিত কোড যোগ করুন:

উদাহরণ

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    textColor: '#333333',                       // টেক্সটের রঙ
    fontFamily: 'Helvetica, Arial, sans-serif', // ফন্ট
    messageTitleColor: '#7a7a7a',               // বার্তাগুলির শিরোনামের রঙ
    timeTextColor: '#c4c4c4',                   // টাইমস্ট্যাম্প টেক্সটের রঙ
    emptyInboxTitleColor: '#333333',            // খালি ইনবক্স শিরোনামের রঙ
    emptyInboxTextColor: '#7a7a7a'              // খালি ইনবক্স টেক্সটের রঙ
  }
}]);

সবশেষে, আপনি খালি ইনবক্সের জন্য আইকন নির্দিষ্ট করতে পারেন:

উদাহরণ

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    emptyInboxIconUrl: 'https://pushon.pushwoosh.com/images/icon-empty-inbox.png'   // একটি আইকনের URL পাথ
  }
}]);

সেল লেআউট কাস্টমাইজ করা

উইজেটটি চারটি সেল লেআউটের মধ্যে একটি হিসাবে একটি বার্তা আঁকে — classic, banner, captioned, বা carousel — কন্ট্রোল প্যানেলে ক্যাম্পেইন প্রিভিউতে দেখানো একই লেআউট। একটি লেআউট যা বার্তার বিষয়বস্তু দিয়ে রেন্ডার করতে পারে না তা classic-এ অবনমিত হয়: banner-এর জন্য একটি হিরো ইমেজ প্রয়োজন, captioned-এর জন্য একটি হিরো ইমেজ এবং একটি শিরোনাম ও বডি উভয়ই প্রয়োজন, এবং carousel-এর জন্য কমপক্ষে একটি স্লাইড এবং একটি শিরোনাম ও বডি উভয়ই প্রয়োজন।

লেআউটগুলির চেহারা কাস্টমাইজ করতে, নিম্নলিখিত প্যারামিটারগুলি ব্যবহার করুন:

উদাহরণ

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    unreadDotColor: '#ff4c00',    // ক্লাসিক অবতারে অপঠিত ডট
    avatarBgColor: '#e6e6e6',     // ক্লাসিক অবতারে পটভূমি
    avatarTextColor: '#333333',   // ক্লাসিক অবতারে প্রাথমিক রঙ
    avatarSize: 52,               // ক্লাসিক অবতারে আকার (px)
    mediaRadius: 8,               // ব্যানার/ক্যাপশনড/ক্যারোসেল মিডিয়ার কোণার রেডিয়াস (px)
    slideCaptionColor: '#ffffff', // ক্যারোসেল স্লাইড ক্যাপশন টেক্সটের রঙ
    slideScrimColor: '#000000',  // ক্যারোসেল স্লাইড ক্যাপশন পটভূমি স্ক্রিম
    pagerDotActiveColor: '#ff4c00', // ক্যারোসেল সক্রিয় পৃষ্ঠা ডট
    pagerDotColor: '#c4c4c4'      // ক্যারোসেল নিষ্ক্রিয় পৃষ্ঠা ডট
  }
}]);

প্রি-3.75 ক্লাসিক সেল পুনরুদ্ধার করা

inboxWidget.legacyClassicCell: true সেট করুন ক্লাসিক সেলের আগের চেহারা বজায় রাখতে — 52px গোলাকার অবতারে পরিবর্তে একটি 40px আইকন কলাম, কোনো অপঠিত ডট নেই, এবং একটি আনক্ল্যাম্পড বডি। banner, captioned, এবং carousel লেআউটগুলি এই বিকল্প দ্বারা প্রভাবিত হয় না।

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

প্রয়োজনীয়তা

• কার্ডে যেমন বলা আছে, সাইটটি Pushwoosh CDN থেকে Web SDK লোড করে। Settings source যা-ই হোক, আপনার সাইটের init স্নিপেট বা এই পেজ (দেখুন Web Push SDK 3.0), কার্ডটি কাজ করে, তবে প্রয়োজনীয় SDK সংস্করণ সেই উৎসের উপর নির্ভর করে:
  • আপনার সাইটের init স্নিপেট: Web SDK 3.93.1 বা তার পরের সংস্করণ। পুরোনো SDK কার্ডটি উপেক্ষা করে এবং শুধুমাত্র স্নিপেট থেকে inboxWidget পড়ে।
  • এই পেজ: কার্ডের মানগুলির জন্য Web SDK 3.92 বা তার পরের সংস্করণ, এবং নিচে বর্ণিত npm-এ বন্ধ করার জন্য 3.93.0 বা তার পরের সংস্করণ।
• পেজে ইনবক্স খোলার এলিমেন্টটি আছে, ডিফল্টভাবে #pwInbox। এটি না থাকলে ইনবক্স খোলে না, এবং ব্রাউজার কনসোলে Error during Pushwoosh initialization ত্রুটি দেখায়, যা অনুপস্থিত এলিমেন্টের নাম জানায় এবং এর ID কোথায় পরিবর্তন করতে হবে তা বলে।
• যে সাইট npm থেকে SDK ইনস্টল করে, সেখানে কার্ডটি উইজেট বন্ধ করতে পারে কিন্তু চালু করতে পারে না, কারণ সাইটটি নিজেই উইজেট তৈরি করে।

Control Panel থেকে উইজেট সেট আপ করতে:

1. Settings → Configure platforms → Web-এ যান।

2. Inbox widget কার্ডে Configure-এ ক্লিক করুন।

   

3. Show the inbox on the site চালু করুন।

4. যে ফিল্ডগুলি আপনি প্যানেল থেকে পরিচালনা করতে চান সেগুলি পূরণ করুন, এবং বাকিগুলি খালি রাখুন। খালি ফিল্ড সংরক্ষিত হয় না, তাই স্নিপেটের মান, বা SDK ডিফল্ট, তখনও প্রযোজ্য হয়। triggerId এবং appendTo যে মার্কআপের দিকে নির্দেশ করে তার পাশে স্নিপেটে রাখতে চাইলে ID of the element that opens the inbox এবং Insert into (CSS selector) খালি রাখুন।

5. প্রিভিউতে ফলাফল দেখে নিন। দুটি অবস্থাই দেখতে With messages এবং No messages-এর মধ্যে পরিবর্তন করুন।

   

6. ফর্মটি সংরক্ষণ করুন। Width, px 200 থেকে 1200 পর্যন্ত একটি পূর্ণসংখ্যা নেয়, এবং Corner radius, px 0 থেকে 64 পর্যন্ত। অন্য যেকোনো মান ফিল্ডের নিচে একটি ত্রুটি দেখায় এবং সংরক্ষিত হয় না।

কার্ড কীভাবে স্নিপেটের সাথে কাজ করে

কার্ডে সংরক্ষিত মানগুলি init স্নিপেটের একই inboxWidget কী-গুলিকে কী ধরে ধরে ওভাররাইড করে। প্রতিটি ফিল্ড একটি কী সেট করে:

বিভাগ	ফিল্ড	inboxWidget কী
Placement	ID of the element that opens the inbox	triggerId
Placement	Opens	position
Placement	Insert into (CSS selector)	appendTo
Texts	Widget title	title
Texts	Title when there are no messages	emptyInboxTitle
Texts	Text when there are no messages	emptyInboxText
Texts	Image when there are no messages (URL)	emptyInboxIconUrl
Appearance	Width, px (200–1200)	widgetWidth
Appearance	Corner radius, px (0–64)	borderRadius
Appearance	Font	fontFamily
Appearance	Background, Text, Border	bgColor, textColor, borderColor
Appearance	Counter background, Counter text, Unread mark	badgeBgColor, badgeTextColor, unreadDotColor

কার্ডে নেই এমন কী, যেমন সেল লেআউট প্যারামিটার এবং legacyClassicCell, সবসময় স্নিপেট থেকে পড়া হয়।

Show the inbox on the site সুইচটিও একইভাবে কাজ করে। প্যানেলে এটি সংরক্ষণ না করা পর্যন্ত কার্ডের ব্যাজে Set in the snippet দেখায়, এবং স্নিপেটের enable ঠিক করে উইজেট দেখানো হবে কি না। সুইচটি সংরক্ষণ করার পর ব্যাজে On বা Off দেখায়, এবং কার্ডটি স্নিপেটকে ওভাররাইড করে:

• স্নিপেটে enable: true সেট থাকলেও Off উইজেট লুকিয়ে রাখে।
• স্নিপেটে inboxWidget একেবারেই না থাকলেও On উইজেট দেখায়। enable: true-এর মতো, এটি পুশ অনুমতি ছাড়াই ভিজিটরদের ইনবক্স ডেলিভারির জন্য নিবন্ধন করে।

সংরক্ষিত পরিবর্তনগুলি এক মিনিটের মধ্যে, পরবর্তী পেজ লোডে সাইটে পৌঁছায়।

উইজেটটি আবার স্নিপেটের হাতে ফিরিয়ে দিতে, কার্ডে Return to snippet-এ ক্লিক করুন এবং নিশ্চিত করুন। কার্ডে কিছু সংরক্ষিত হলেই বোতামটি দেখা যায়। এটি প্যানেলে সংরক্ষিত সমস্ত ইনবক্স সেটিং মুছে দেয়, এবং সাইটটি আবার তার স্নিপেটের inboxWidget সেটিংস ব্যবহার করে।

API

উইজেটটি খুলতে বা বন্ধ করতে, নিম্নলিখিত API পদ্ধতিটি ব্যবহার করুন:

উদাহরণ

Pushwoosh.pwinboxWidget.toggle(open?: boolean);

উইজেটটি খুললে এটি সার্ভার থেকে রিফ্রেশ হয়, প্রতি 30 সেকেন্ডে সর্বাধিক একবার — একটি স্বতন্ত্র অ্যাপ ইনবক্স বার্তা পুশ ছাড়া একটি চ্যানেলে চলে, তাই পৃষ্ঠা লোডের মধ্যে অন্য কিছু এটি ঘোষণা করে না।