Name		Name	Last commit message	Last commit date
parent directory ..
src		src
CHANGELOG.md		CHANGELOG.md
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.io JavaScript Live Stream Chat UI Kit

This JavaScript Sample app is built using our JavaScript SDK, this will help you add a live stream 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 live stream layout to your website.

Step 1: Add Live Stream

Add the Channelize live stream div in the body tag of your website.

<body>
    <div id="ch_live_stream"></div>
</body>

Step 2: Import Channelize live stream file

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

<script src="https://cdn.channelize.io/apps/live-stream/2.1.0/liveStream.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/sdk/4.3.0/browser.js"></script>

Step 4: Create live stream object

Create Channelize.io object and call the load function which will require your public key as an argument.

<script>
    const channelizeLiveStream = new ChannelizeLiveStream('PUBLIC_KEY');
    channelizeLiveStream.load();
</script>

Customizing the live stream

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

Update Channelize live stream file URL in your index.html file.

<script src="./dist/liveStream.Channelize.js"></script>

Install required npm packages.

sudo npm install

Build your changes.

sudo npm run build

Start sample app.

npm start

For UI Customizations :

Customize the UI of chat live stream layout as per your choice by changing the values of predefined variables in ./live-stream/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.

File Structure of Channelize Sample App

    |-- dist
        |-- liveStream.Channelize.js          - Channelize Live Stream Bundle file
    |-- node_modules
        |-- ...                               - (node packages)
    |-- src
        |-- js
            |-- components  
                |-- conversation.js           - conversation screen class
                |-- login.js                  - login class
                |-- threads.js                - threads screen class
            |-- adapter.js                    - Channelize JS SDK functions
            |-- constants.js                  - const variables
            |-- utility.js                    - utility functions
            |-- liveStream.js                 - live stream 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

Channelize-JavaScript-Chat-SDK-Sample/live-stream at master · ChannelizeIO/Channelize-JavaScript-Chat-SDK-Sample · GitHub

Expand file tree

Breadcrumbs

live-stream

Directory actions

More options