Skip to content

Files

Latest commit

 

History

History

web-widget

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
README.md
README.md
 
 
index.html
index.html
 
 
package.json
package.json
 
 
server.js
server.js
 
 
webpack.config.js
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/2.0.1/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/2.0.0/channelize-websdk.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