Customizing launcher

You can fully customize launcher button instead of using default launcher provided by ChannelIO. Create your own button and set its css selector value to customLauncherSelector property. You can set multiple selectors separated by a comma (ex. ".custom-button1, .custom-button2"). For more information about css selectors, check this. You also need to set hideChannelButtonOnBoot property to true.

<!-- Channel Plugin Scripts -->
<script>
  (function() {
    var w = window;
    if (w.ChannelIO) {
      return (window.console.error || window.console.log || function(){})('ChannelIO script included twice.');
    }
    var ch = function() {
      ch.c(arguments);
    };
    ch.q = [];
    ch.c = function(args) {
      ch.q.push(args);
    };
    w.ChannelIO = ch;
    function l() {
      if (w.ChannelIOInitialized) {
        return;
      }
      w.ChannelIOInitialized = true;
      var s = document.createElement('script');
      s.type = 'text/javascript';
      s.async = true;
      s.src = 'https://cdn.channel.io/plugin/ch-plugin-web.js';
      s.charset = 'UTF-8';
      var x = document.getElementsByTagName('script')[0];
      x.parentNode.insertBefore(s, x);
    }
    if (document.readyState === 'complete') {
      l();
    } else if (window.attachEvent) {
      window.attachEvent('onload', l);
    } else {
      window.addEventListener('DOMContentLoaded', l, false);
      window.addEventListener('load', l, false);
    }
  })();
  ChannelIO('boot', {
    "pluginKey": "YOUR_PLUGIN_KEY",
    "customLauncherSelector": ".custom-button-1, #custom-button-2",
    "hideChannelButtonOnBoot": true
  });
<!-- End Channel Plugin -->
 
<button class="custom-button-1">Open</button>
<a id="custom-button-2">Open</a>