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

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

পূর্বশর্ত

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

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

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

উদাহরণ

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

ট্রিগার

উইজেটটি রেন্ডার করার জন্য, আপনাকে উইজেটের জন্য একটি ট্রিগার এলিমেন্ট নির্দিষ্ট করতে হবে। পেজের যেকোনো DOM-এলিমেন্ট ট্রিগার হতে পারে। এর ID “pwInbox” হিসাবে নির্দিষ্ট করুন অথবা SDK ইনিশিয়ালাইজ করার সময় triggerId প্যারামিটারে যেকোনো কাস্টম ID বরাদ্দ করুন। যখন 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 পাথ
  }
}]);

API

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

উদাহরণ

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