Quickstart
This section contains how you can embed Channelize.io powered real-time messaging to your web applications. There are 3 different ways to embed it:
Using JavaScript SDK - If you want to build a chat interface from the scratch.
Using JavaScript UI Kit - If you want to achieve personalized chat interface with less development efforts.
Using Pre-built UI - If you want a fully functional ready-to-go solution with minimal development efforts.
Using JavaScript SDK
JavaScript SDK is a way to add Channelize.io powered real-time messaging by creating a chat interface of your choice from scratch. Find below the steps to Install and Initialize the JavaScript SDK:
Step 1: Install the SDK
Install the Javascript SDK by just adding the below code snippet to the application:
<script src='https://cdn.channelize.io/sdk/4.4.2/browser.js'></script>
Or you can also download the SDK from the URL in the above code snippet and add it to the HTML file.
Step 2: Initialize the SDK
Pass the public key of the Channelize.io application. Initialization is required only once when your application is loaded for the first time. Initializing the JavaScript SDK at the top of your application JavaScript file is recommended.
Get your Channnelize.io Application Public Key from the Channelize dashboard under My Account > Application Settings.
var channelize = new Channelize.client({publicKey: YOUR_PUBLIC_KEY});
Using JavaScript UI Kit
The JavaScript UI Kit is built keeping the developers in mind and aims to considerably reduce the development efforts required to add the personalized chat feature in your web application. The following are the various screens provided by the UI Kit:
- Recent Conversations Screen - Using this screen you can showcase a list of recent conversations in a paginated manner.
- Contacts Screen - Using this screen, you can display a list of users in the application, including both online and offline within a paginated manner.
- Conversation / Messages Screen - Using this screen, you can display a fully functional chat screen in a paginated manner with the option to define CTAs on messages, date separators and much more.
UI Kit is open-source and it allows you to achieve customizations by either making changes in the values of the predefined variables or through code-level changes.
Find below the steps to add widget/docked layout chat interface:
Step 1: Add Chat widget
Add the Channelize.io Chat widget div in the body tag of your web application.
<body>
<div id="ch_widget"></div>
</body>
Step 2: Import Channelize.io widget file
Import the widget.Channelize.js file after body tag in your web application.
<script src="https://cdn.channelize.io/apps/web-widget/2.0.2/widget.Channelize.js"></script>
Step 3: Import Channelize JS SDK
Import the Channelize JS SDK after body tag in your web application.
<script src="https://cdn.channelize.io/sdk/4.4.2/browser.js"></script>
Step 4: Create a widget object
Create Channelize.io object and call the load function which will require your public key as an argument.
<script>
const channelizeWidget = new ChannelizeWidget('publicKey');
channelizeWidget.loadWithUserId('userId', 'accessToken'); // Replace with the User ID and Access Token of the user to login.
</script>
Download the Sample App built at the top of SDK from our GitHub repository to get an idea of what all use-cases you can achieve and start integration into your web application.
Using Pre-built UI
We have developed the Pre-built UI to provide developers a ready-to-go solution that can be embedded using a few lines of the code. Add the below code snippet to every page where you need the chat widget. Check our pre-built UI demo here.
The below pre-built UI code can be embedded in UI / JavaScript frameworks such as React, AngularJS, Vue.js, etc.
<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/2.0.0/channelize-prebuilt-ui.min.js";
fjs.parentNode.insertBefore(js, fjs);
window._chOptions = {
publicKey: 'publicKey',
accessToken: 'accessToken',
userId: 'userId',
// Define your custom Channelize.io Application URL(if you want). Below provided URL is the default, to get this updated for you contact us at info@channelize.io.
applicationURL: 'https://appv2.channelize.io',
settings: {
// Define 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: true,
// Allows to enable all end users search all other members inside the application irrespective of relationship b/w them.
allowUsersSearch: true,
// Set this to enable / disable video voice call
videoVoiceCall: true,
// Set this to show user meta data which includes user's additional information
showUserMetaData: true,
// Set the meta-data and its value based on which you want to filter the results shown in the Pre-built UI.
userQueryParams: {},
// Define the URL of the image you want to showcase on the chat widget bar. By default, it shows logged in user's Profile Photo.
defaultProfileImageUrl: '',
// Define z-Index of pre-built UI launcher and screens.
zIndex: 999,
// Define 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'
},
// Define 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 to enable message reactions functionality and define which all reactions you want to enable in your application.
reactions: {
enable: true,
types: {
"like": "👍",
"dislike": "👎"
}
},
// Make the chat interface unique by defining the color scheme of your choice.
themeSettings: {
"theme-color": '#2175f5',
"primary-text-color": '#4a505a',
"secondary-text-color": '#3a3c4c',
"tertiary-text-color": '#8b8b8b',
"headers-bg-color": '#ffffff',
"screens-bg-color": '#ffffff',
"screens-hover-color": '#0000000a',
// Define the font style of your choice
'font-family-url': 'https://fonts.googleapis.com/css?family=Roboto:300,400,500',
'font-family': 'Roboto'
}
},
// Invoke on successful loading of Channelize.io pre-built UI, the UI has connected with channelize.io server
onLoad: function(payload) {
// payload = {}
},
// Invoke on loading of totalUnreadMessageCount and will also return unread message count in payload
onLoadedData: 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:
window.channelizeUI.openChatBox(userId): This function is used to launch a conversation screen with the targeted user ID.window.channelizeUI.openMessenger(): This function is used to open the collapsed Channelize.io chat widget.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.window.channelizeUI.logout(deviceId): This function is used to logout the user from Channelize server. It takes deviceId as a param, which is the same id/browser_fingerprint as we used for push notifications. This function should be called when user get logged out in your website.