Channel button

1. Moving Channel Button

You have the option to adjust the position of the Channel button via the ChannelButtonOption.
After making changes to this option, apply it to the property value of [BootConfig](doc:react-native-models#bootconfig). For example:

let settings = {
  "pluginKey": YOUR_PLUGIN_KEY,
  "channelButtonOption": {
    "xMargin": 16,
    "yMargin": 16,
    "position": POSITION,  // 'left', 'right'
  }
}

ChannelIO.boot(settings).then((result) => {
  //boot completed
})

2. Custom Channel button

To change the appearance of the Channel button, create a custom view and follow the instructions below:

1. Make sure to hide the default Channel button by calling ChannelIO.hideChannelButton.
2. Once you've created your button and positioned it as desired, link the ChannelIO.showMessenger to the button's touch event.

3. Display the number of unread messages

We recommend using onBadgeChanged to display the number of unread messages. If you choose to customize the Channel button, the number of unread messages will not be visible by default.

ChannelIO.onBadgeChanged((count) => {
  //do something with count
});

Customizing In-app Popup

By default, the SDK delivers the following in-app pop-up notifications to your app, which is applicable when the user uses the app online.

1. Retrieve in-app popup data

Utilize onPopupDataReceived to receive popup data. Refer PopupData for more details.

ChannelIO.onPopupDataReceived((popupData) => { });

2. Custom in-app popup appearance

To modify the appearance of an in-app popup, you need to create a custom view.

1. Make sure the default in-app push view remains hidden by settings BootConfig#hidePopup to true.
2. Perform a newboot using the above BootConfig.
3. Use onPopupDataReceived to display the customView on the desired screen at the appropriate time.

Event tracking

To track the user actions, use the track method. For instance, the following code snippet tracks when a user checks out from your service.

ChannelIO.track(
  "CheckOut", 
  {
    "sampleID": 1234,
    "userName": "Jason" 
  }
);