Customizing the Channel Button

Instead of utilizing the default Channel button provided by the JavaScript SDK, you have the option to customize your own channel button.

1. Creating a Custom Button:

<!-- Example 1: Using a class selector -->
<button class="custom-button-1">chat</button>

<!-- Example 2: Using an ID selector -->
<button id="custom-button-2">chat</button>

2. Using Custom Launcher Selector:

Assign the customLauncherSelector to your custom HTML element's CSS selector.

📘

Note: It's possible to target multiple selectors by separating them with a comma (,).

Refer to CSS Selector for detailed information.

3. Hiding the Default Channel Button:

Set hideChannelButtonOnBoot to true. This will hide the default channel button at startup.

Here's an example configuration:

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

Note that when you use a customized channel button, it does not display an unread message alert by default. To implement this feature, create a separate HTML element to show the alert. You can obtain the count of unread messages through the onBadgeChanged.