ข้ามไปยังเนื้อหา
คู่มือผู้ใช้ คู่มือวิธีการ การสนับสนุน ขอสาธิต เข้าสู่ระบบ
Pushwoosh.com

การตั้งค่า Pushwoosh Inbox UI Android

Pushwoosh Inbox UI มาพร้อมกับหน้าจอ inbox ของ Android ที่พร้อมใช้งาน (App Inbox ที่มี “ไอคอนรูประฆัง”) ซึ่งทำงานบน Pushwoosh inbox backend โดยจะแสดงผลข้อความในรูปแบบการ์ด 5 ประเภท รองรับปุ่ม CTA แบบอินไลน์ และสามารถปรับแต่งสไตล์ผ่าน XML attributes หรือโค้ดได้

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

Anchor link to
  • Pushwoosh Android SDK พื้นฐาน ได้รับการผสานรวมและสามารถส่ง push ได้แล้ว
  • การรองรับ Kotlin ในโมดูลแอปของคุณ (apply plugin: 'kotlin-android')

เพิ่มไลบรารี

Anchor link to

เพิ่มปลั๊กอิน Kotlin และโมดูล Pushwoosh สองตัวในไฟล์ build.gradle ของแอปของคุณ:

build.gradle
apply plugin: 'kotlin-android'


dependencies {
    implementation 'com.pushwoosh:pushwoosh-inbox:6.+'
    implementation 'com.pushwoosh:pushwoosh-inbox-ui:6.+'
}

ปักหมุดเวอร์ชันของ pushwoosh-inbox และ pushwoosh-inbox-ui ให้ตรงกับเวอร์ชันของ com.pushwoosh:pushwoosh ที่คุณมีอยู่ แทนที่ + ด้วยเวอร์ชันปัจจุบันของ Pushwoosh Android SDK

หากแอปของคุณใช้ ProGuard สำหรับการลดขนาดโค้ด ให้คงคลาสปลั๊กอินของ inbox ไว้:

proguard-rules.pro
-keep public class com.pushwoosh.inbox.PushwooshInboxPlugin {
 *;
}

แสดง inbox

Anchor link to

แสดง inbox เป็นหน้าจอเดี่ยว หรือฝังเป็น fragment ภายในเลย์เอาต์ของคุณเอง

ในรูปแบบ activity:

startActivity(Intent(this, InboxActivity::class.java))

ในรูปแบบ fragment:

supportFragmentManager.beginTransaction()
    .replace(R.id.inboxContainer, PushwooshInboxUi.createInboxFragment())
    .commitAllowingStateLoss()

ประเภทของการ์ด

Anchor link to

Inbox UI จะกำหนดประเภทของการ์ดสำหรับแต่ละข้อความ ตัวกำหนดจะอ่าน displayType จากอ็อบเจกต์ data ของ push payload ซึ่ง SDK จะส่งมอบภายใต้ actionParams หาก displayType ระบุชื่อประเภทการ์ดที่รู้จัก ระบบจะแสดงผลประเภทนั้นเสมอ โดยจะกลับไปใช้ classic ก็ต่อเมื่อฟิลด์ที่จำเป็นสำหรับประเภทนั้นหายไป การกำหนดนี้ไม่ขึ้นอยู่กับการตั้งค่า heuristic ด้านล่าง

เมื่อไม่มี displayType ข้อความจะแสดงผลเป็นแถวธรรมดา เว้นแต่คุณจะเลือกใช้ heuristic สำหรับรูปภาพ/ข้อความ:

PushwooshInboxStyle.richCardsHeuristicEnabled = true

เมื่อเปิดใช้งาน heuristic รูปภาพที่ไม่มีชื่อเรื่องจะแสดงผลเป็น banner รูปภาพที่มีชื่อเรื่องและเนื้อหาจะแสดงผลเป็น captioned และกรณีอื่นๆ จะกลับไปใช้ classic

displayTypeลักษณะที่ปรากฏฟิลด์ payload ที่จำเป็นลดระดับเป็น
bannerรูปภาพเต็มขอบ ไม่มีข้อความimage (ไอคอนข้อความ หรือ data.attachment)classic เมื่อไม่มีรูปภาพ
captionedรูปภาพด้านบน ชื่อเรื่อง + เนื้อหาด้านล่างimage, title และ content ของข้อความclassic เมื่อรูปภาพ, ชื่อเรื่อง หรือเนื้อหาหายไป
classicไอคอน + ชื่อเรื่อง + เนื้อหา— (คาดว่าจะมีชื่อเรื่อง, เนื้อหา และไอคอน)—
carouselแกลเลอรีหลายรูปภาพที่สามารถปัดได้title และ content ของข้อความ, data.carousel (1–5 สไลด์)classic เมื่อไม่มีสไลด์ หรือไม่มีชื่อเรื่อง/เนื้อหา
videoโปสเตอร์พร้อมป้ายเล่น แตะเพื่อเปิดโปรแกรมเล่นเต็มหน้าจอdata.video (url + poster (ตัวเลือก))classic เมื่อไม่มี descriptor

การ์ด Apple Wallet จาก iOS InboxKit ไม่มีในเวอร์ชัน Android ข้อความที่มี displayType: "wallet" จะแสดงผลเป็น classic บน Android เสมอ

Anchor link to

สไลด์จะอยู่ใน data.carousel แต่ละสไลด์ต้องมี image ส่วน title (ข้อความซ้อนทับ) และ url (เปิดเมื่อแตะ) เป็นตัวเลือก สไลด์ที่ไม่มีรูปภาพจะถูกทิ้ง และจะแสดงสไลด์ได้สูงสุด 5 สไลด์

POST https://api.pushwoosh.com/json/1.3/createMessage
{
  "request": {
    "application": "XXXXX-XXXXX",
    "auth": "API_TOKEN",
    "notifications": [{
      "send_date": "now",
      "content": "Swipe through this week's drops",
      "inbox_days": 7,
      "data": {
        "displayType": "carousel",
        "carousel": [
          { "image": "https://cdn.example.com/inbox/1.jpg", "title": "New in", "url": "myapp://product/1" },
          { "image": "https://cdn.example.com/inbox/2.jpg", "title": "On sale", "url": "myapp://product/2" }
        ]
      },
      "platforms": [3]
    }]
  }
}

การ์ด Video

Anchor link to

descriptor จะอยู่ใน data.video: url เป็นฟิลด์ที่จำเป็น ส่วน poster เป็นรูปภาพตัวอย่าง (ตัวเลือก) การแตะที่โปสเตอร์จะเปิดโปรแกรมเล่นเต็มหน้าจอ

POST https://api.pushwoosh.com/json/1.3/createMessage
{
  "request": {
    "application": "XXXXX-XXXXX",
    "auth": "API_TOKEN",
    "notifications": [{
      "send_date": "now",
      "content": "Tap to play",
      "inbox_days": 7,
      "data": {
        "displayType": "video",
        "video": {
          "url": "https://cdn.example.com/inbox/clip.mp4",
          "poster": "https://cdn.example.com/inbox/poster.jpg"
        }
      },
      "platforms": [3]
    }]
  }
}

อ่านข้อมูลที่กำหนดเองจากข้อความ

Anchor link to

เพื่อให้ push ปรากฏใน inbox, request ของ Messages API createMessage ต้องมี inbox_image, inbox_date, หรือ inbox_days หากไม่มีฟิลด์เหล่านี้ push จะถูกส่งเป็นการแจ้งเตือนปกติและจะไม่ไปถึงฟีดของ inbox ข้อมูลที่กำหนดเองแบบอิสระจะอยู่ภายใต้ data ซึ่ง SDK จะแสดงเป็น actionParams บน InboxMessage:

PushwooshInboxUi.onMessageClickListener = OnInboxMessageClickListener { message ->
    val params = message.actionParams?.let { JSONObject(it) }
    val promoId = params?.optString("promo_id")
    if (!promoId.isNullOrEmpty()) {
        navigateToPromo(promoId)
    }
}

เพิ่มปุ่ม CTA แบบอินไลน์

Anchor link to

ข้อความสามารถมีปุ่ม call-to-action แบบอินไลน์ภายใน data.buttons:

POST https://api.pushwoosh.com/json/1.3/createMessage
{
  "request": {
    "application": "XXXXX-XXXXX",
    "auth": "API_TOKEN",
    "notifications": [{
      "send_date": "now",
      "content": "Tap a button to claim or save",
      "inbox_image": "https://cdn.example.com/inbox/promo.png",
      "inbox_days": 7,
      "data": {
        "displayType": "captioned",
        "promo_id": "SUMMER2026",
        "buttons": [
          { "title": "Claim", "url": "https://example.com/promo/SUMMER2026" },
          { "title": "Read",  "action": "markRead" },
          { "title": "Save",  "action": "custom", "tag": "save_promo" }
        ]
      },
      "platforms": [3]
    }]
  }
}

แต่ละปุ่มต้องมี title การทำงานจะเรียงตามลำดับความสำคัญดังนี้:

  • action ที่ตั้งค่าเป็น dismiss หรือ markRead (ไม่คำนึงถึงตัวพิมพ์ใหญ่-เล็ก) จะทำงานตามนั้น
  • มิฉะนั้น url ที่ไม่ว่างเปล่าและสามารถแยกวิเคราะห์ได้ จะทำงานเป็น action openURL
  • มิฉะนั้น การแตะจะทำงานเป็น custom action และทุกคีย์เพิ่มเติมบนอ็อบเจกต์ปุ่มจะถูกส่งต่อไปยัง listener ของคุณเป็น payload

ดักจับการแตะจาก PushwooshInboxUi.onButtonClickListener คืนค่า true เพื่อให้ SDK ทำงานตามค่าเริ่มต้นของปุ่ม หรือ false เพื่อระงับการทำงาน:

PushwooshInboxUi.onButtonClickListener = OnInboxButtonClickListener { message, button ->
    when (val action = button.action) {
        is InboxCardButton.Action.OpenUrl -> true
        InboxCardButton.Action.Dismiss, InboxCardButton.Action.MarkRead -> true
        is InboxCardButton.Action.Custom -> {
            when (action.payload.optString("tag")) {
                "save_promo" -> saveCurrentPromoLocally(message)
            }
            true
        }
    }
}

ปรับแต่งสไตล์

Anchor link to

ตั้งค่าสี, ฟอนต์ และสถานะว่าง/ข้อผิดพลาดจากโค้ดผ่าน PushwooshInboxStyle:

PushwooshInboxStyle.accentColor = ContextCompat.getColor(this, R.color.brand_accent)
PushwooshInboxStyle.titleColor = ContextCompat.getColor(this, R.color.brand_title)
PushwooshInboxStyle.listEmptyText = "You have no messages yet"
PushwooshInboxStyle.showToolbar = false

หรือใช้ชุด attributes เดียวกันเป็น theme ซึ่งมีรายการอยู่ใน attrs.xml: inboxAccentColor, inboxTitleColor, inboxBackgroundColor, inboxDefaultIcon และ attributes สีและลักษณะที่ปรากฏอื่นๆ ทั้งสองวิธี พร้อมแอปตัวอย่างฉบับเต็ม อยู่ใน repo pushwoosh-inbox-ui-android-sdk InboxSample

ป้ายข้อความที่ยังไม่ได้อ่าน

Anchor link to
PushwooshInbox.unreadMessagesCount { result ->
    if (result.isSuccess) {
        val count = result.data
    } else {
        Log.e("App", "Failed to get unread count", result.exception)
    }
}