Customization
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>
Updated over 1 year ago