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

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

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

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

পূর্বশর্ত

Anchor link to

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

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

Anchor link to

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

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

ট্রিগার

Anchor link to

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

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

Anchor link to

উইজেটটি চারটি সেল লেআউটের মধ্যে একটি হিসাবে একটি বার্তা আঁকে — 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'      // ক্যারোসেল নিষ্ক্রিয় পৃষ্ঠা ডট
  }
}]);

API

Anchor link to

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

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

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