The Channel Developers

Welcome to the Channel Developers. You'll find comprehensive guides and documentation to help you start working with Channel-docs as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Installation

General case

To use Channel Plugin SDK in javascript, insert below script into <body> tag in your html. It will first load up Channel Plugin SDK, then process all necessary steps in order to get Channel ready to use. The only required field to use our SDK is pluginKey. All other properties such as hideChannelButtonOnBoot , zIndex, language and profile is optional.

📘

Please set memberId when you are integrating for registered users.

We distinguish anonymous users and registered users based on memberId.

❗️

Do not recommend to use a predictable value for memberId

Because memberId is a unique value that we use to identify users, we do not recommend to use predictable values such as numerical combination, email address, user name and etc. It may cause privacy and security issues. We recommend to use higher than 256 bits hash value.

Static Page

<!-- 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" //please fill with your plugin key
  });
</script>
<!-- End Channel Plugin -->

Static page (user integration)

<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", //please fill with your plugin key
    "memberId": "YOUR_USER_ID", //fill with user id
    "profile": {
      "name": "YOUR_USER_NAME", //fill with user name
      "mobileNumber": "YOUR_USER_MOBILE_NUMBER", //fill with user phone number
      "CUSTOM_VALUE_1": "VALUE_1", //any other custom meta data
      "CUSTOM_VALUE_2": "VALUE_2"
    }
  });
</script>

Single Page application

If your web service is a SPA, or you want to control Channel as a service class, check this example below.

🚧

Use Channel Plugin Web SDK on client-side only.

The Installation code and SDK should be executed on the client-side only.
It cannot be pre-rendered on the server-side.

class ChannelService {
  constructor() {
    this.loadScript();
  }

  loadScript() {
    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);
    }
  }

  boot(settings) {
    window.ChannelIO('boot', settings);
  }

  shutdown() {
    window.ChannelIO('shutdown');
  }
}

export default new ChannelService();

You can use ChannelService as below

// Boot Channel as an anonymous user
ChannelService.boot({
  "pluginKey": "YOUR_PLUGIN_KEY" //please fill with your plugin key
});

// Boot Channel as a registered user
ChannelService.boot({
  "pluginKey": "YOUR_PLUGIN_KEY", //please fill with your plugin key
  "profile": {
    "name": "YOUR_USER_NAME", //fill with user name
    "mobileNumber": "YOUR_USER_MOBILE_NUMBER", //fill with user phone number
    "CUSTOM_VALUE_1": "VALUE_1", //any other custom meta data
    "CUSTOM_VALUE_2": "VALUE_2"
  }
});

// Shutdown Channel
ChannelService.shutdown();

If you want to know more about plugin settings and profile integration, please check out Boot Option.

🚧

Conversation from an anonymous user to a registered user will not be interlinked

Anonymous user conversations and registered user conversations are not interlinked because they are difficult to logically combine. Please contact the development team if you need to have interworking.

Updated about a month ago

Installation


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.