What Is Embedded Messaging?
Embedded Messaging provides an inbox-like experience within your application. It displays personalized messages to users in a native, scrollable list with support for rich content, categories, read/unread states, and more.
Messages are displayed for the contact that is linked in the SDK. If no contact has been linked, messages are displayed for the anonymous contact.
The UI components for embedded messaging are implemented using Compose Multiplatform. Jetpack Compose on Android and Compose Multiplatform on Kotlin Multiplatform are recommended.
Key Features
| Feature | Description |
|---|---|
| Message List | Display messages in a scrollable list with thumbnail images, titles, and preview text. |
| Rich Content | Users can open messages to view full HTML content with images, buttons, and interactive elements. |
| Categories | Organize messages into categories for filtering. |
| Read/Unread State | Track which messages have been opened by the user. |
| Deletion | Users can delete messages. |
| Pagination | Messages load incrementally as the user scrolls. |
Architecture Overview
The Embedded Messaging feature consists of three main components:
- Embedded Messaging View - A pre-built UI component that displays messages in a list format with filtering options. On larger screens, it displays the selected message in a detailed view. On smaller screens, it provides the option to navigate to a detailed view.
┌─────────────────────────────────┬───────────────────────────────┐
│[All ▼] [Unread ○] [Categories ▼]│ │
├─────────────────────────────────│ Message Title │
│ ┌─────┐ │ │
│ │ IMG │ Message Title 12:30│ │
│ └─────┘ Preview text... ● │ │
│─────────────────────────────────│ Full message content with │
│ ┌─────┐ │ rich HTML, images, and │
│ │ IMG │ 2nd Message 10:15│ interactive elements. │
│ └─────┘ Preview text... │ │
│─────────────────────────────────│ [Action Button] │
│ ┌─────┐ │ │
│ │ IMG │ 3rd Message 09:00│ │
│ └─────┘ Preview text... │ │
│ │ │
└─────────────────────────────────┴───────────────────────────────┘
Message List Detailed View
- Embedded Messaging Compact View - A pre-built UI component that displays messages in a compact list. It can be used for navigating to the embedded messaging view. It does not provide any detailed view or filtering options.
┌─────────────────────────────────┐
│ ┌─────┐ │
│ │ IMG │ Message Title 12:30│
│ └─────┘ Preview text... ● │
│─────────────────────────────────│
│ ┌─────┐ │
│ │ IMG │ Another Message 10:15│
│ └─────┘ Preview text... │
│─────────────────────────────────│
│ ┌─────┐ │
│ │ IMG │ Third Message 09:00│
│ └─────┘ Preview text... │
│ │
└─────────────────────────────────┘
- Embedded Messaging API - Provides programmatic access to the current state such as categories and filters.