วิดเจ็ตกล่องข้อความเว็บ

Web Message Inbox ที่ผสานรวมเข้ากับเว็บไซต์ของคุณจะช่วยเพิ่มคอนเวอร์ชันได้อย่างมาก Web Inbox Widget ที่พร้อมใช้งานจะสมัครรับข้อมูลเมธอดทั้งหมดที่จำเป็นสำหรับการสื่อสารกับผู้ใช้โดยอัตโนมัติ เพียงแค่ผสานรวมวิดเจ็ตเข้ากับเว็บไซต์ของคุณและปรับแต่งรูปลักษณ์ให้เข้ากับแบรนด์ของคุณ

การตั้งค่า inboxWidget.enable: true จะลงทะเบียนอุปกรณ์ของผู้เข้าชมสำหรับการส่งข้อความใน Inbox แม้ว่าผู้เข้าชมจะยังไม่ได้ให้สิทธิ์การแจ้งเตือนแบบพุชก็ตาม ดังนั้นจึงสามารถเข้าถึงผู้เข้าชมที่ไม่เคยสมัครรับพุชได้

หมายเหตุสำคัญเกี่ยวกับเวอร์ชัน SDK (v3.66.0+)

ตั้งแต่เวอร์ชัน 3.66.0 เป็นต้นไป อุปกรณ์ของผู้เข้าชมจะถูกติดตามด้วย ID ฮาร์ดแวร์ที่ผูกกับเบราว์เซอร์ของพวกเขาก่อนที่ผู้เข้าชมจะเข้าสู่ระบบ หากผู้เข้าชมล้างข้อมูลเว็บไซต์ เปลี่ยนเบราว์เซอร์ หรือเปลี่ยนอุปกรณ์ก่อนที่จะเรียกใช้ registerUser การติดตามนั้นจะหยุดทำงาน ประวัติข้อความก่อนหน้าของพวกเขาจะหายไปและจะไม่ถูกนำมาใช้แม้ว่าผู้เข้าชมจะเข้าสู่ระบบแล้วก็ตาม

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

หากต้องการผสานรวม Message Inbox สำหรับเว็บไซต์ โปรดปฏิบัติตาม คู่มือ

การผสานรวมวิดเจ็ต

เมื่อเริ่มต้น Pushwoosh WebSDK ให้เพิ่มพารามิเตอร์ inboxWidget:

ตัวอย่าง

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

ทริกเกอร์

ในการแสดงผลวิดเจ็ต คุณควรระบุ องค์ประกอบทริกเกอร์ สำหรับวิดเจ็ต องค์ประกอบ DOM ใดๆ บนหน้าเว็บก็สามารถเป็นทริกเกอร์ได้ ระบุ ID ของมันเป็น “pwInbox” หรือกำหนด ID ที่กำหนดเองให้กับพารามิเตอร์ triggerId เมื่อเริ่มต้น SDK
เมื่อ 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 ดังนั้นจึงจำเป็นต้องระบุคลาส ID หรือองค์ประกอบให้ชัดเจน

การปรับแต่งวิดเจ็ต

การปรับแต่งข้อความ

หากต้องการปรับแต่งข้อความในวิดเจ็ต ให้เพิ่มพารามิเตอร์ emptyInboxTitle และ emptyInboxText:

ตัวอย่าง

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    title: 'Inbox',                                 // widget title
    emptyInboxTitle: 'You\'re all caught up',       // empty inbox widget title
    emptyInboxText: 'There are no new messages. Stay tuned!'    // empty inbox widget text
  }
}]);

ผลลัพธ์จะมีลักษณะดังนี้:

การปรับแต่งรูปลักษณ์

หากต้องการปรับแต่ง รูปลักษณ์ ของวิดเจ็ต ให้ใช้พารามิเตอร์ต่อไปนี้:

ตัวอย่าง

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    bgColor: '#ffffff',         // widget background
    borderColor: 'transparent', // widget border color
    borderRadius: 4,            // widget border radius (px)
    widgetWidth: 350,           // widget width (px)
    zIndex: 100                 // z-index
  }
}]);

ป้ายนับจำนวนข้อความที่ยังไม่ได้อ่าน สามารถปรับแต่งได้ดังนี้:

ตัวอย่าง

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    badgeBgColor: '#ff4c00',    // badge color
    badgeTextColor: '#ffffff'   // badge text color
  }
}]);

หากต้องการปรับแต่ง คุณสมบัติของข้อความ ให้เพิ่มโค้ดต่อไปนี้:

ตัวอย่าง

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    textColor: '#333333',                       // text color
    fontFamily: 'Helvetica, Arial, sans-serif', // font
    messageTitleColor: '#7a7a7a',               // messages title color
    timeTextColor: '#c4c4c4',                   // timestamp text color
    emptyInboxTitleColor: '#333333',            // empty inbox title color
    emptyInboxTextColor: '#7a7a7a'              // empty inbox text color
  }
}]);

สุดท้าย คุณสามารถระบุ ไอคอนสำหรับกล่องข้อความว่าง ได้:

ตัวอย่าง

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    emptyInboxIconUrl: 'https://pushon.pushwoosh.com/images/icon-empty-inbox.png'   // URL path to an icon
  }
}]);

การปรับแต่งเลย์เอาต์ของเซลล์

วิดเจ็ตจะวาดข้อความเป็นหนึ่งในสี่ เลย์เอาต์ของเซลล์ — classic, banner, captioned หรือ carousel — ซึ่งเป็นเลย์เอาต์เดียวกับที่แสดงตัวอย่างแคมเปญในแผงควบคุม เลย์เอาต์ที่ไม่สามารถแสดงผลด้วยสิ่งที่ข้อความมีอยู่จะลดระดับลงเป็น classic: banner ต้องการรูปภาพฮีโร่, captioned ต้องการรูปภาพฮีโร่พร้อมทั้งชื่อเรื่องและเนื้อหา, และ carousel ต้องการสไลด์อย่างน้อยหนึ่งสไลด์พร้อมทั้งชื่อเรื่องและเนื้อหา

หากต้องการปรับแต่งรูปลักษณ์ของเลย์เอาต์ ให้ใช้พารามิเตอร์ต่อไปนี้:

ตัวอย่าง

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    unreadDotColor: '#ff4c00',    // unread dot on the classic avatar
    avatarBgColor: '#e6e6e6',     // classic avatar background
    avatarTextColor: '#333333',   // classic avatar initial color
    avatarSize: 52,               // classic avatar size (px)
    mediaRadius: 8,               // corner radius of banner/captioned/carousel media (px)
    slideCaptionColor: '#ffffff', // carousel slide caption text color
    slideScrimColor: '#000000',  // carousel slide caption background scrim
    pagerDotActiveColor: '#ff4c00', // carousel active page dot
    pagerDotColor: '#c4c4c4'      // carousel inactive page dots
  }
}]);

การกู้คืนเซลล์คลาสสิกก่อนเวอร์ชัน 3.75

ตั้งค่า inboxWidget.legacyClassicCell: true เพื่อรักษารูปลักษณ์เดิมของเซลล์คลาสสิก — คอลัมน์ไอคอนขนาด 40px แทนที่จะเป็นอวาตาร์ทรงกลมขนาด 52px, ไม่มีจุดแสดงว่ายังไม่ได้อ่าน และเนื้อหาที่ไม่ถูกจำกัด เลย์เอาต์ banner, captioned และ carousel จะไม่ได้รับผลกระทบจากตัวเลือกนี้

การจัดการใน Control Panel

ข้อกำหนด

• เว็บไซต์โหลด Web SDK จาก CDN ของ Pushwoosh ตามที่การ์ดระบุ การ์ดทำงานได้ไม่ว่า Settings source จะเป็น init snippet บนไซต์ของคุณหรือหน้านี้ (ดู Web Push SDK 3.0) แต่เวอร์ชัน SDK ที่ต้องใช้ขึ้นอยู่กับแหล่งที่มานั้น:
  • init snippet บนไซต์ของคุณ: Web SDK 3.93.1 ขึ้นไป SDK ที่เก่ากว่าจะไม่สนใจการ์ดและอ่าน inboxWidget จาก snippet เท่านั้น
  • หน้านี้: Web SDK 3.92 ขึ้นไปสำหรับค่าในการ์ด และ 3.93.0 ขึ้นไปสำหรับการปิดวิดเจ็ตบนไซต์ที่ใช้ npm ตามที่อธิบายไว้ด้านล่าง
• หน้าเว็บมีองค์ประกอบที่ใช้เปิดกล่องข้อความ ซึ่งค่าเริ่มต้นคือ #pwInbox หากไม่มีองค์ประกอบนี้ กล่องข้อความจะไม่เปิด และคอนโซลของเบราว์เซอร์จะแสดงข้อผิดพลาด Error during Pushwoosh initialization ที่ระบุชื่อองค์ประกอบที่ขาดหายไปและบอกว่าจะเปลี่ยน ID ได้ที่ใด
• บนไซต์ที่ติดตั้ง SDK จาก npm การ์ดสามารถปิดวิดเจ็ตได้แต่เปิดไม่ได้ เนื่องจากไซต์สร้างวิดเจ็ตขึ้นเอง

วิธีตั้งค่าวิดเจ็ตจาก Control Panel:

1. ไปที่ Settings → Configure platforms → Web

2. บนการ์ด Inbox widget คลิก Configure

   

3. เปิด Show the inbox on the site

4. กรอกฟิลด์ที่คุณต้องการจัดการจากแผงควบคุม และเว้นฟิลด์ที่เหลือให้ว่างไว้ ฟิลด์ที่ว่างจะไม่ถูกบันทึก ดังนั้นค่าใน snippet หรือค่าเริ่มต้นของ SDK จะยังมีผลอยู่ เว้นฟิลด์ ID of the element that opens the inbox และ Insert into (CSS selector) ให้ว่างไว้ เพื่อเก็บ triggerId และ appendTo ไว้ใน snippet ถัดจากมาร์กอัปที่คีย์เหล่านั้นอ้างถึง

5. ตรวจสอบผลลัพธ์ในตัวอย่าง สลับระหว่าง With messages และ No messages เพื่อดูทั้งสองสถานะ

   

6. บันทึกฟอร์ม Width, px รับจำนวนเต็มตั้งแต่ 200 ถึง 1200 และ Corner radius, px รับตั้งแต่ 0 ถึง 64 ค่าอื่นใดจะแสดงข้อผิดพลาดใต้ฟิลด์และจะไม่ถูกบันทึก

การทำงานของการ์ดร่วมกับ snippet

ค่าที่บันทึกในการ์ดจะแทนที่คีย์ inboxWidget เดียวกันใน init snippet ทีละคีย์ แต่ละฟิลด์กำหนดหนึ่งคีย์:

ส่วน	ฟิลด์	คีย์ inboxWidget
Placement	ID of the element that opens the inbox	triggerId
Placement	Opens	position
Placement	Insert into (CSS selector)	appendTo
Texts	Widget title	title
Texts	Title when there are no messages	emptyInboxTitle
Texts	Text when there are no messages	emptyInboxText
Texts	Image when there are no messages (URL)	emptyInboxIconUrl
Appearance	Width, px (200–1200)	widgetWidth
Appearance	Corner radius, px (0–64)	borderRadius
Appearance	Font	fontFamily
Appearance	Background, Text, Border	bgColor, textColor, borderColor
Appearance	Counter background, Counter text, Unread mark	badgeBgColor, badgeTextColor, unreadDotColor

คีย์ที่การ์ดไม่มี เช่น พารามิเตอร์เลย์เอาต์ของเซลล์และ legacyClassicCell จะถูกอ่านจาก snippet เสมอ

สวิตช์ Show the inbox on the site ทำงานในลักษณะเดียวกัน จนกว่าจะบันทึกสวิตช์ในแผงควบคุม ป้ายบนการ์ดจะแสดง Set in the snippet และ enable ใน snippet จะเป็นตัวกำหนดว่าวิดเจ็ตจะแสดงหรือไม่ เมื่อคุณบันทึกสวิตช์แล้ว ป้ายจะแสดง On หรือ Off และการ์ดจะแทนที่ค่าใน snippet:

• Off ซ่อนวิดเจ็ตแม้ว่า snippet จะตั้งค่า enable: true
• On แสดงวิดเจ็ตแม้ว่า snippet จะไม่มี inboxWidget เลย เช่นเดียวกับ enable: true โดยจะลงทะเบียนผู้เข้าชมสำหรับการส่ง Inbox โดยไม่ต้องมีสิทธิ์พุช

การเปลี่ยนแปลงที่บันทึกแล้วจะไปถึงเว็บไซต์ภายในหนึ่งนาที เมื่อโหลดหน้าครั้งถัดไป

หากต้องการคืนการจัดการวิดเจ็ตให้กับ snippet ให้คลิก Return to snippet บนการ์ดแล้วยืนยัน ปุ่มนี้จะปรากฏเมื่อมีการบันทึกค่าใดๆ ในการ์ด ปุ่มนี้จะลบการตั้งค่ากล่องข้อความทั้งหมดที่บันทึกไว้ในแผงควบคุม และเว็บไซต์จะกลับไปใช้การตั้งค่า inboxWidget จาก snippet ของตนอีกครั้ง

API

หากต้องการเปิดหรือปิดวิดเจ็ต ให้ใช้เมธอด API ต่อไปนี้:

ตัวอย่าง

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

การเปิดวิดเจ็ตจะรีเฟรชข้อมูลจากเซิร์ฟเวอร์ อย่างมากที่สุดหนึ่งครั้งทุกๆ 30 วินาที — ข้อความ App Inbox แบบสแตนด์อโลนจะทำงานบนช่องทางที่ไม่มีพุช ดังนั้นจึงไม่มีสิ่งอื่นใดประกาศข้อความใหม่ระหว่างการโหลดหน้าเว็บ