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

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

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Pushwoosh Web SDK บนเว็บไซต์ของคุณแล้ว หากต้องการทำเช่นนั้น โปรดปฏิบัติตามคู่มือของเรา

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

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

นี่คือเวิร์กโฟลว์ทั่วไปของ InboxMessages:

ขั้นตอน	เมธอด
การโหลดหน้าเว็บ
การซิงโครไนซ์ข้อความกับเซิร์ฟเวอร์	`InboxMessagesModel.updateMessages` ทำงานในขณะที่ SDK กำลังเริ่มต้น
การลบข้อความที่ล้าสมัย	`InboxMessagesModel.updateMessages` ทำงานในขณะที่ SDK กำลังเริ่มต้น
การรับจำนวนข้อความที่ยังไม่ได้อ่านเพื่ออัปเดตป้ายสถานะ (badge)	`Pushwoosh.pwinbox.unreadMessagesCount` ทำงานด้วยตนเอง (หลังจากที่อีเวนต์ `onUpdateInboxMessages` ทำงาน)
การโหลดข้อความเพื่อแสดงใน Inbox	`Pushwoosh.pwinbox.loadMessages` ทำงานด้วยตนเอง (หลังจากที่อีเวนต์ `onUpdateInboxMessages` ทำงาน)
การทำเครื่องหมายข้อความที่อยู่ใน viewport ว่าอ่านแล้ว	`Pushwoosh.pwinbox.readMessagesWithCodes` ทำงานด้วยตนเอง
การดำเนินการตามที่กำหนดไว้สำหรับข้อความที่เปิด	`Pushwoosh.pwinbox.performActionForMessageWithCode` ทำงานด้วยตนเอง
การลบข้อความโดยการคลิกที่ไอคอนลบหรือปัดข้อความไปทางขวา	`Pushwoosh.pwinbox.performActionForMessageWithCode` ทำงานด้วยตนเอง

ตัวรับฟังอีเวนต์ (Event listeners)

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

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

โมดูลสาธารณะ (Public module)

โมดูล WebSDK InboxMessagesPublic นำเสนออินเทอร์เฟซสาธารณะสำหรับนำ Web Inbox ไปใช้งาน

type TInboxMessageTypePlain = 0;
type TInboxMessageTypeRichmedia = 1;
type TInboxMessageTypeURL = 2;
type TInboxMessageTypeDeeplink = 3;
type TInboxMessageType = TInboxMessageTypePlain  // depends on action_params
  | TInboxMessageTypeRichmedia
  | TInboxMessageTypeURL
  | TInboxMessageTypeDeeplink;

type TInboxLayout = 'classic' | 'banner' | 'captioned' | 'carousel';

interface IInboxMessageSlide {
  imageUrl: string;
  caption: string;  // caption overlaid on the slide; empty when the slide has none
  link: string;  // where a tap on the slide goes; empty when the slide has none, and the message's own action applies instead
}

interface IInboxMessagePublic {
  code: string;  // inbox_id
  title: string;  // title
  message: string; // body
  imageUrl: string;  // image
  sendDate: string;  // send_date, ISO 8601 in UTC
  type: TInboxMessageType;  // depends on action_params
  isRead: boolean;  // true if status is "read" or "open"
  link: string; // Deeplink | URL | "/"
  isActionPerformed: boolean;  // true if status is "open"
  layout: TInboxLayout;  // cell layout to draw, already degraded to one this message can render
  iconUrl: string;  // small round avatar; same value as imageUrl, under the name the layouts use
  heroUrl: string;  // hero image; falls back to iconUrl when the message has no banner, so it's set for classic messages too
  carousel: Array<IInboxMessageSlide>;  // slides of the carousel layout; empty for every other layout
  customData: Record<string, unknown>;  // the campaign's own custom data, as sent from the control panel
}

เค้าโครงเซลล์ (Cell layouts) ข้อความจะแสดงผลเป็นหนึ่งในสี่เค้าโครง — classic, banner, captioned หรือ carousel — ซึ่งเป็นเค้าโครงเดียวกับที่แสดงในหน้าตัวอย่างแคมเปญใน control panel เค้าโครงที่ไม่สามารถแสดงผลด้วยข้อมูลที่ข้อความมีอยู่จะถูกลดระดับเป็น classic: banner ต้องการ hero image, captioned ต้องการ hero image พร้อมทั้ง title และ body, และ carousel ต้องการอย่างน้อยหนึ่งสไลด์พร้อมทั้ง title และ body layout บนข้อความสาธารณะจะเป็นเค้าโครงที่ถูกวาดจริงเสมอ ซึ่งถูกลดระดับแล้ว

การตรวจสอบ layout เป็นวิธีเดียวที่เชื่อถือได้ในการบอกว่าข้อความจะแสดงผลเป็นอย่างไร — heroUrl ถูกตั้งค่าสำหรับข้อความแบบ classic ด้วย (ดูหมายเหตุของฟิลด์ด้านบน) ดังนั้นการผสานรวมจะต้องไม่ใช้การมีอยู่ของมันเพื่อตัดสินใจว่าจะวาด hero หรือไม่

เมธอดสาธารณะ (Public methods)

ตรวจสอบคำอธิบายเมธอดสาธารณะได้ในคู่มือ Web Push SDK 3.0

Pushwoosh.pwinbox.syncMessages() ดึงข้อมูล inbox ปัจจุบันจากเซิร์ฟเวอร์ เรียกใช้เมธอดนี้เพื่อบังคับให้รีเฟรชข้อมูลนอกเหนือจากการ polling ของวิดเจ็ตในตัว