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

আপনার ওয়েবসাইটে [ওয়েব মেসেজ ইনবক্স](/bn/developer/guides/message-inbox/web-message-inbox/) ইন্টিগ্রেট করা হলে কনভার্সন ব্যাপকভাবে বৃদ্ধি পায়। একটি রেডি-টু-ইউজ **ওয়েব ইনবক্স উইজেট** ব্যবহারকারীদের সাথে যোগাযোগের জন্য প্রয়োজনীয় সমস্ত পদ্ধতিতে আউট-অফ-দ্য-বক্স সাবস্ক্রাইব করা থাকে। শুধু আপনার ওয়েবসাইটে উইজেটটি ইন্টিগ্রেট করুন এবং আপনার ব্র্যান্ডের সাথে মানানসই করতে এর চেহারা কাস্টমাইজ করুন।

## পূর্বশর্ত

ওয়েবসাইটের জন্য মেসেজ ইনবক্স ইন্টিগ্রেট করতে, অনুগ্রহ করে [গাইডটি](/bn/developer/guides/message-inbox/web-message-inbox/) অনুসরণ করুন।

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

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

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

### ট্রিগার

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

<img src="/web-push-notifications-web-inbox-widget-1.webp" alt="ওয়েব ইনবক্স উইজেট উদাহরণ"/>

### পজিশনিং

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

```txt title="উদাহরণ"
Pushwoosh.push(['init', {

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

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

```txt title="উদাহরণ"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {

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

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

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

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

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

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

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

<img src="/web-push-notifications-web-inbox-widget-2.webp" alt="কাস্টমাইজড টেক্সট সহ ওয়েব ইনবক্স উইজেট"/>

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

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

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

**অপঠিত মেসেজ কাউন্ট ব্যাজ** নিম্নরূপ কাস্টমাইজ করা যেতে পারে:

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

**টেক্সট প্রোপার্টি** কাস্টমাইজ করতে, নিম্নলিখিত কোড যোগ করুন:

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

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

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

## API

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

```txt title="উদাহরণ"
Pushwoosh.pwinboxWidget.toggle(open?: boolean);
```