Channel button customization

You can customize the channel button instead of using the default channel button provided by JavaScript SDK.

1. Create HTML elements to use as channel button.

<!-- example 1 -->
<button class="custom-button-1">chat</button>

<!-- example 2 -->
<button id="custom-button-2">chat</button>

2. Set customLauncherSelector to CSS selector for the HTML elements.

📘

You can pass multiple selectors using comma(,).

For more details, see CSS Selector.

3. Set hideChannelButtonOnBoot to true to hide the default channel button.

See the example code below.

ChannelIO('boot', {
  "pluginKey": "YOUR_PLUGIN_KEY",
  "customLauncherSelector": ".custom-button-1, #custom-button-2",
  "hideChannelButtonOnBoot": true
});

Unlike the default channel button, the customized channel button doesn’t show an unread message alert. To handle this, you have to create an HTML element to show the alert. You can get an unread message count by onBadgeChanged.