# ตั้งค่ากล่องข้อความบนเว็บ

#### ข้อกำหนดเบื้องต้น

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Pushwoosh Web SDK บนเว็บไซต์ของคุณแล้ว หากต้องการดำเนินการดังกล่าว โปรดปฏิบัติตาม [คู่มือ](/th/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/) ของเรา

**Message Inbox สำหรับเว็บไซต์** ช่วยให้คุณสามารถจัดเก็บการแจ้งเตือนแบบพุชบนเว็บเพื่อให้ผู้ใช้สามารถกลับมาดูได้ในภายหลัง เพื่อให้มั่นใจว่าข้อความสำคัญจะถูกเห็น

## วิธีการทำงาน

นี่คือขั้นตอนการทำงานทั่วไปของ InboxMessages:

| ขั้นตอน                                                                 | เมธอด                                                                                                                                      |
| -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| การโหลดหน้าเว็บ                                                            |                                                                                                                                             |
| การซิงโครไนซ์ข้อความกับเซิร์ฟเวอร์                                | <p><code>InboxMessagesModel.updateMessages</code><br/>ดำเนินการเมื่อ SDK ได้รับการเริ่มต้น</p>                                              |
| การลบข้อความที่ล้าสมัย                                           | <p><code>InboxMessagesModel.updateMessages</code><br/>ดำเนินการเมื่อ SDK ได้รับการเริ่มต้น</p>                                              |
| การรับจำนวนข้อความที่ยังไม่ได้อ่านเพื่ออัปเดตป้ายกำกับ            | <p><code>Pushwoosh.pwinbox.unreadMessagesCount</code><br/>ดำเนินการด้วยตนเอง (หลังจากเหตุการณ์ <code>onUpdateInboxMessages</code> ทริกเกอร์)</p> |
| การโหลดข้อความเพื่อแสดงใน Inbox                            | <p><code>Pushwoosh.pwinbox.loadMessages</code><br/>ดำเนินการด้วยตนเอง (หลังจากเหตุการณ์ <code>onUpdateInboxMessages</code> ทริกเกอร์)</p>        |
| การทำเครื่องหมายข้อความที่อยู่ในวิวพอร์ตว่าอ่านแล้ว                         | <p><code>Pushwoosh.pwinbox.readMessagesWithCodes</code><br/>ดำเนินการด้วยตนเอง</p>                                                            |
| การดำเนินการที่กำหนดให้กับข้อความที่เปิด                  | <p><code>Pushwoosh.pwinbox.performActionForMessageWithCode</code><br/>ดำเนินการด้วยตนเอง</p>                                                  |
| การลบข้อความโดยการคลิกที่ไอคอนลบหรือปัดขวาข้อความ | <p><code>Pushwoosh.pwinbox.performActionForMessageWithCode</code><br/>ดำเนินการด้วยตนเอง</p>                                                  |

## ตัวฟังเหตุการณ์

```javascript title="onUpdateInboxMessages"
// ดำเนินการหลังจาก Inbox ได้รับการอัปเดตโดยอัตโนมัติในขณะที่หน้าเว็บกำลังโหลด
Pushwoosh.push(['onUpdateInboxMessages', function(api, pwinbox) {
  pwinbox.loadMessages().then(function(messages) {
    console.log('EVENT: onUpdateInboxMessages', messages);
  });
}]);
```

```javascript title="onPutNewMessageToInboxStore"
// ดำเนินการโดย ServiceWorker หลังจากได้รับ Inbox Message และบันทึกไปยัง indexedDB
Pushwoosh.push(['onPutNewMessageToInboxStore', function(api, message) {
  console.log('EVENT: onPutNewMessageToInboxStore', message);
}]);
```

## โมดูลสาธารณะ

**โมดูล WebSDK InboxMessagesPublic** นำเสนออินเทอร์เฟซสาธารณะเพื่อใช้งาน Web Inbox

```txt title="Model"
type TInboxMessageTypePlain = 0;
type TInboxMessageTypeRichmedia = 1;
type TInboxMessageTypeURL = 2;
type TInboxMessageTypeDeeplink = 3;
type TInboxMessageType = TInboxMessageTypePlain  // ขึ้นอยู่กับ action_params
  | TInboxMessageTypeRichmedia
  | TInboxMessageTypeURL
  | TInboxMessageTypeDeeplink;
 
 
interface IInboxMessagePublic {
  code: string;  // inbox_id
  title: string;  // title
  message: string; // body
  imageUrl: string;  // image
  sendDate: string;  // send_date
  type: TInboxMessageType;  // ขึ้นอยู่กับ action_params
  isRead: boolean;  // เป็นจริงหากสถานะคือ "read" หรือ "open"
  link: string; // Deeplink | URL | "/"
  isActionPerformed: boolean;  // เป็นจริงหากสถานะคือ "open"
}
```

## เมธอดสาธารณะ

ตรวจสอบคำอธิบายเมธอดสาธารณะใน [คู่มือ Web Push SDK 3.0](/th/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/)