Inbox Views
Courier Inbox supports the retrieval and display of different messages, filtered by parameters. Read, Unread, and tagged messages are all examples of different views you can use in the inbox. There is support for the inbox views in Courier's GraphQL Client, React-hooks and Components. Views are not yet supported in our Mobile SDKs natively in our mobile SDKs, but are available through CourierClient. If you need help implementing them, do not hesitate to reach out and we can help guide you through the APIs and interacting with the Client to create your own views.
Notifications (Default)
By default, the Courier inbox provides all messages via its API's sorted by time received. Both read and unread statuses are retrieved, but archived messages are filtered out. Pinned messages are returned and displayed at the top and in the APIs will be a separate object (messages key vs pinned key).
Unread / Read Views
Having an unread view may be the experience you'd like to present to your end users. You can configure the Inbox with these views when implementing it in your front-end.
React Inbox |
|
---|---|
Components Inbox |
|
Archived Messages
You retrieve and display messages that a user as archived by exposing the Archive view.
React Inbox |
|
---|---|
Components Inbox |
|
Inbox Preferences
You can allow a user to see and change their user preferences by adding the preference view.
React Inbox |
|
---|---|
Components Inbox |
|
Custom Filtered Views
You can create filtered views for the inbox by specifying which tags you would like to filter on. By using metadata.tags
in the Send API, inbox messages will be tagged with the same information and can be retrieved and displayed as a view. Tags accepts and array and a view can be filtered by a multiple types.
{
"message": {
"template": "JFGC0K5X554AWXM38JPFFXBNFRDW",
"profile": {
"user_id": "claude"
},
"data": {
"refund_amount": "$12.34"
},
"metadata": {
"tags": ["refund"]
}
}
}
React Inbox |
|
---|---|
Components Inbox |
|
Inbox Hooks, window.fetchMessages() and GraphQL for custom filtered views
If you are building your own user interface with our APIs, we support custom views in there as well. Here are a few examples.
@trycourier/client-graphql |
|
---|---|
Components APIs |
|
Hooks example
const MessageList = () => {
let {fetchMessages, messages} = useInbox()
let handleClick = () => {
fetchMessages({ params:{tags: ['order','refund']}})
}
return <div >
<button onClick={handleClick}>get transaction messages</button>
<ul>
{messages.map(m=><li key={m.id}>{m.title}</li>)}
</ul>
</div>
}
Custom Tags, Bookmarks, Saved Messages
Courier Inbox allows you to add then remove tags that weren't part of the metadata.tags
which is useful for building a custom "Save Message" or "Bookmark" feature. You can add and remove tags then use the same filtering logic as above to filter the inbox by a tag.
Hooks Example
const {addTag, removeTag, fetchMessages} = useInbox()
const saveTag = (message_id: string, tag: string) => {
addTag(message_i, 'save')
}
const unsaveTag = (message_id: string, tag: string) => {
removeTag(message_i, 'save')
}
const toggleSave = (message: IInboxMessagePreview) => {
const save_tag = 'save'
if (message.tags?.includes(save_tag))
removeTag(message.id, save_tag)
} else {
addTag(message.id, save_tag)
}
}
fetchMessages({ params:{tags: ['save']}})
Adding View to the template designer
This is under a feature flag currently, please reach out to Courier support or your account team to turn on.
While designing a template, you may want to select which view you would like this appear in an inbox. You can enter a comma separated list of tags and those will automatically be put into the metadata.tags
field when sending to the user. This allows them to be filtered in a view on the inbox using one of those tags.