Skip to content

Files

Latest commit

 

History

History

live-stream

Folders and files

NameName
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.

  1. Update Channelize live stream file URL in your index.html file.
<script src="./dist/liveStream.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 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