Customization
This document describes how to customize components of Channel React Native SDK.
Channel button
Position of Channel button
Change the position of the Channel button using channelButtonOption
. Pass the value to the boot
.
let settings = {
"pluginKey": YOUR_PLUGIN_KEY,
"channelButtonOption": {
"xMargin": 16,
"yMargin": 16,
"position": POSITION, // 'left', 'right'
}
}
ChannelIO.boot(settings).then((result) => {
//boot completed
})
Custom Channel button
To change the appearance of the Channel button, create a custom view:
- To prevent the default Channel button from being shown, call
ChannelIO.hideChannelButton()
. - Place your button view on a preferred position and call
ChannelIO.showMessenger()
when a user clicks the view.
Display unread alerts
Custom Channel button does not show unread alert counts. Use onBadgeChanged
listener to get notified when an alert count changes and show the number to the user.
ChannelIO.onBadgeChanged((count) => {
//do something with count
});
In-app Popup
1. Receive in-app popup data
Use onPopupDataReceived to receive popup data. See PopupData for details.
ChannelIO.onPopupDataReceived((popupData) => { });
2. Custom in-app popup appearance
To change the appearance of an in-app popup, you should create a custom view.
- The default in-app popup should not be shown. Set
BootConfig#hidePopup
totrue
. boot
with theBootConfig
configured.- Use
onPopupDataReceived
to show a popup with appropriate data and timing.
Event tracking
To track the action of a user, call track
. For example, the following snippet tracks when a user checks out from your service.
ChannelIO.track(
"CheckOut",
{
"sampleID": 1234,
"userName": "Jason"
}
);
Updated 5 months ago