Skip to content
This Sample JavaScript chat app is built using Channelize.io JavaScript SDK.
JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Update docs Jan 22, 2020
README.md
index.html update directory structure Jan 20, 2020
package.json update directory structure Jan 20, 2020
server.js update directory structure Jan 20, 2020
webpack.config.js

README.md

Channelize JavaScript Widget UI kit

This JavaScript Sample app is built using our JavaScript SDK, this will help you add a chat widget / docked layout to your website which can be customized to build chat exactly how you want, and unbelievably quickly. It enables achieving a beautiful chat app interface for all use-cases like live chat, online consultation & tutoring, team collaboration, messaging, customer support and gaming chat.

See in Action here.

Getting Started

Follow the below steps to add the Channelize chat widget / docked layout to your website.

Step 1: Add widget

Add the Channelize widget div in the body tag of your website.

<body>
    <div id="ch_widget"></div>
</body>
Step 2: Import Channelize widget file

Import the widget.Channelize.js file after body tag in your website.

<script src="https://cdn.channelize.io/apps/web-widget/1.0.0/widget.Channelize.js"></script>
Step 3: Import Channelize JS-SDK

Import the Channelize JS-SDK after body tag in your website.

<script src="https://cdn.channelize.io/apps/web-widget/1.0.0/channelize-websdk-min.js"></script>
Step 4: Create 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('PUBLIC_KEY');
    channelizeWidget.load();
</script>

Customizing the widget

Pre-requisites: Have Node v8.x+ installed.

  1. Update Channelize widget file URL in your index.html file.
<script src="./dist/widget.Channelize.js"></script>
  1. Install required npm packages.
sudo npm install
  1. Build your changes.
sudo npm run build
  1. Start sample app.
npm start
For UI Customizations :
  • Customize the UI of chat widget / docked layout as per your choice by changing the values of predefined variables in ./web-widget/src/scss/variables.scss file or by making changes in the code of the elements/content.
For Function Customizations :
  • Add your own functions or make code-level changes.

Advanced

Load for logged-in user

Load the Channelize for an already logged-in user, you can use loadWithUserId() method instead of load() method. loadWithUserId() method takes two arguments user-id and access token. you can get access token in the response of login api call.

...

    <script>
        const channelizeWidget = new ChannelizeWidget('PUBLIC_KEY');
        channelizeWidget.loadWithUserId('userId', 'accessToken');
    </script>
</html>

Load Recent Conversations Screen

Load the recent conversations screen using loadRecentConversation() method. It takes two arguments user-id and access token.

...

    <script>
        const channelizeWidget = new ChannelizeWidget('PUBLIC_KEY');
        channelizeWidget.loadRecentConversation('userId', 'accessToken');
    </script>
</html>

Load Conversation Window

Load conversation window using loadConversationWindow() method. It requires two arguments otherMemberId and conversationId.

...

    <script>
        const channelizeWidget = new ChannelizeWidget('PUBLIC_KEY');
        channelizeWidget.loadConversationWindow('otherMemberId', 'conversationId');
    </script>
</html>

File Structure of Channelize Sample App

    |-- dist
        |-- widget.Channelize.js              - Channelize Widget Bundle file
    |-- node_modules
        |-- ...                               - (node packages)
    |-- src
        |-- js
            |-- components  
                |-- conversation-window.js    - conversation screen class
                |-- login.js                  - login class
                |-- recent-conversation.js    - recent conversation class
                |-- search.js                 - search class
            |-- adapter.js                    - Channelize JS SDK functions
            |-- constants.js                  - const variables
            |-- utility.js                    - utility functions
            |-- widget.js                     - widget main functions
        |-- scss
            |-- main.scss                     - main style class
        |-- variables.scss                    - css variables
    |-- index.html                            - sample file
    |-- package.json                          - npm package
    |-- README.md                             - description file
    |-- server.js                             - server file
    |-- webpack.config.js                     - webpack setting
You can’t perform that action at this time.