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

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

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

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

পূর্বশর্ত

Anchor link to

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

উইজেট ইন্টিগ্রেট করা

Anchor link to

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

উদাহরণ
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox'
  }
}]);

ট্রিগার

Anchor link to

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

পজিশনিং

Anchor link to

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

উদাহরণ
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 দ্বারা সঞ্চালিত হয়, তাই এর জন্য একটি ক্লাস, আইডি, বা এলিমেন্টের স্পষ্ট স্পেসিফিকেশন প্রয়োজন।

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

Anchor link to

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

Anchor link to

উইজেটের টেক্সট কাস্টমাইজ করতে, 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!'    // খালি ইনবক্স উইজেটের টেক্সট
  }
}]);

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

অ্যাপিয়ারেন্স কাস্টমাইজ করা

Anchor link to

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

উদাহরণ
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 পাথ
  }
}]);

API

Anchor link to

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

উদাহরণ
Pushwoosh.pwinboxWidget.toggle(open?: boolean);