Installation

This section contains how you can embed Channelize.io powered real-time messaging to your web applications using our JavaScript SDK or Pre-built UI.

Install and Initialize the SDK

1. Install the JavaScript SDK

The easiest way to install Channelize.io Javascript SDK is to just include the following in your code:

<script src='https://cdn.channelize.io/sdk/4.0.0/channelize-websdk-min.js'></script>

You can also download the SDK from the given URL and add it to your HTML file.

2. Intialize the JavaScript SDK

To initialize SDK you need to pass the Public Key, which you can get from the Channelize dashboard under My Account > Application Settings. Initialization is required only once when your application is loaded for the first time. We recommend that you initialize the JavaScript SDK at the top of your JavaScript file. Here is how you can do that:

var channelize = new Channelize.client({publicKey: YOUR_PUBLIC_KEY});

Install the Pre-built UI

We have developed a Pre-built Web UI to provide developers an easy to use readymade customizable UI which can be embedded using just a few lines of the code. Check our pre-built UI demo here.

You have to add below the chat widget code in your JavaScript code. Make sure you attach this code to every page where you need the chat widget.

<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://cdn.channelize.io/ui/1.0.0/channelize-prebuilt-ui.min.js";
fjs.parentNode.insertBefore(js, fjs);
window._chOptions = {
      publicKey: 'publicKey',
      accessToken: 'accessToken',
      // Allows changing the theme color.
      color: 'color',
      userId: 'userId',
      // Allows to enable all end users search all other members inside the application irrespective of relationship b/w them.
      allowUsersSearch: true,
      settings: {
            
            // Allows defining z-Index of pre-built UI launcher and screens.
            zIndex: 999,
            
            // Allows defining which all tabs you want in the pre-built UI. Moreover you can set which one would be the default tab.
            tabs: {
                  recent: true,
                  contacts: true,
                  groups: true,
                  calls: true,
                  default: 'recent'
            },
            
            // Allows defining which all options you want to show in header on the pre-built UI main window.
            headerIcons: {
                  search: true,
                  startNew: {
                        newConversation: true,
                        newGroup: true
                  },
                  more: {
                        settings: true,
                        blockedContacts: true
                  }
            },          
     
          // Allows defining the default state of pre-built UI launcher i.e Hidden or Visible. 
          // Set this false if you want to hide launcher on load of webpage and also want to show a cross icon with it to hide the launcher later on.
          displayLauncher: false
      },     
     
      // Invoke on successful loading of Channelize.io pre-built UI and will also return unread message count in payload. 
      onLoad: function(payload) {           // payload =   {totalUnreadMessageCount: 'number'}      },      
     
      // Return message object when there is a new message received.
      onMessageReceived: function(message) {
      },     
      
      // Return updated unread messages count for the user and read messages count.     
      onMessageRead: function(updatedTotalUnreadMsgCount, readMessageCount) {
      }
};
}(document, "script", "channelize-jssdk"));
</script>

The above code will load chat widget in your web page and set Channelize.io UI property in a window JavaScript variable. With this variable you can call below functions:

1. window.channelizeUI.openChatBox(userId): This function is used to launch a conversation screen with the targeted user ID.
2. window.channelizeUI.openMessenger(): This function is used to open the collapsed Channelize.io chat widget.
3. window.channelizeUI.share(): This function is used to open a list of contacts with the option to share a message with single or multiple users.