Skip to content

Commit 49563c0

Browse files
chetan-b-bigstepchetan-b-bigstep
committed
Add web-widget sample code
1 parent d6bd6b2 commit 49563c0

File tree

15 files changed

+3709
-0
lines changed

15 files changed

+3709
-0
lines changed

‎web-widget/README.md‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
# Channelize JavaScript Widget UI kit
2+
This is a ready to use UI kit of Channelize chat application.
3+
It uses [Channelize JS-SDK](https://docs.channelize.io/javascript-sdk-introduction-overview) internally to provide end to end chat support. It provide highly customization in UI as well as functions.
4+
5+
### Features : ###
6+
- Highly customization
7+
- Easy to implement
8+
- Ready to use
9+
- Multiple use cases
10+
11+
##### You can also check out our demo [here](https://demo.channelize.io).
12+
13+
## Getting Started
14+
15+
##### Step 1: Add widget #####
16+
17+
You must add the channelize widget div in the body tag of your website.
18+
19+
```html
20+
<body>
21+
<div id="ch_widget"></div>
22+
</body>
23+
```
24+
25+
##### Step 2: Import Channelize widget file #####
26+
27+
Import the `widget.Channelize.js` file after body tag.
28+
29+
```javascript
30+
<script src="https://cdn.channelize.io/apps/web-widget/1.0.0/widget.Channelize.js"></script>
31+
```
32+
33+
##### Step 3: Import Channelize JS-SDK #####
34+
35+
Import the [`Channelize JS-SDK`](https://docs.channelize.io/javascript-sdk-introduction-overview) after body tag in your website.
36+
37+
```javascript
38+
<script src="https://cdn.channelize.io/apps/web-widget/1.0.0/channelize-websdk-min.js"></script>
39+
```
40+
41+
##### Step 4: Create widget object #####
42+
43+
Create widget object and call the load function which takes public key as an argument.
44+
45+
```javascript
46+
<script>
47+
const channelizeWidget = new ChannelizeWidget('PUBLIC_KEY');
48+
channelizeWidget.load();
49+
</script>
50+
```
51+
52+
## Customizing the widget
53+
You can also customize the widget according to your website. We also provide some predefine variables for UI customization, along with this you can also change UI of any content in the code.
54+
You can create your JS functions and add those in any event listener or function for advanced customization.
55+
56+
> Require Node v8.x+ installed.
57+
58+
1. Update Channelize widget file URL in index.html file.
59+
```javascript
60+
<script src="./dist/widget.Channelize.js"></script>
61+
```
62+
63+
2. Install required npm packages.
64+
```bash
65+
npm install
66+
```
67+
68+
3. Build your changes.
69+
```bash
70+
npm run build
71+
```
72+
73+
4. Start sample app.
74+
```bash
75+
npm start
76+
```
77+
78+
###### UI Customization : ######
79+
80+
1. We have defined some variables to modify colours and position of main UI contents. So you can change those values in ./web-widget/src/scss/variables.scss file.
81+
82+
2. You can also update the UI of any content by changing in their code.
83+
84+
###### Function Customization : ######
85+
86+
1. You can add your functions or can make code level changes in functions.
87+
88+
89+
## Advanced
90+
### Change the application :
91+
If you want to change your current application, you just need to change the `PUBLIC_KEY` in `index.html` file.
92+
93+
```html
94+
...
95+
96+
<script>
97+
const channelizeWidget = new ChannelizeWidget('PUBLIC_KEY');
98+
channelizeWidget.load();
99+
</script>
100+
</html>
101+
```
102+
103+
### Load with already connected user :
104+
If you want to load the Channelize for already connected user, you can use loadWithConnect() method instead of load() method. loadWithConnect() method takes two arguments user-id and access token. you can get access token in the response of login api call.
105+
106+
```html
107+
...
108+
109+
<script>
110+
const channelizeWidget = new ChannelizeWidget('PUBLIC_KEY');
111+
channelizeWidget.loadWithConnect('userId', 'accessToken');
112+
</script>
113+
</html>
114+
```
115+
116+
### Load Recent Conversation Screen :
117+
If you want to open only recent conversation, you can use `loadRecentConversation()` method. It takes two arguments user-id and access token.
118+
119+
```html
120+
...
121+
122+
<script>
123+
const channelizeWidget = new ChannelizeWidget('PUBLIC_KEY');
124+
channelizeWidget.loadRecentConversation('userId', 'accessToken');
125+
</script>
126+
</html>
127+
```
128+
129+
### Load Conversation Window :
130+
If you want to load conversation window, then you can use `loadConversationWindow()` method. It takes two arguments otherMemberId and conversationId.
131+
132+
```html
133+
...
134+
135+
<script>
136+
const channelizeWidget = new ChannelizeWidget('PUBLIC_KEY');
137+
channelizeWidget.loadConversationWindow('otherMemberId', 'conversationId');
138+
</script>
139+
</html>
140+
```
141+
142+
## File Structure of Channelize Sample App :
143+
```
144+
|-- dist
145+
|-- widget.Channelize.js - Channelize Widget Bundle file
146+
|-- node_modules
147+
|-- ... - (node packages)
148+
|-- src
149+
|-- js
150+
|-- components
151+
|-- conversation-window.js - conversation screen class
152+
|-- login.js - login class
153+
|-- recent-conversation.js - recent conversation class
154+
|-- search.js - search class
155+
|-- adapter.js - channelize JS SDK functions
156+
|-- constants.js - const variables
157+
|-- utility.js - utility functions
158+
|-- widget.js - widget main functions
159+
|-- scss
160+
|-- main.scss - main style class
161+
|-- variables.scss - css variables
162+
|-- index.html - sample file
163+
|-- package.json - npm package
164+
|-- README.md - description file
165+
|-- server.js - server file
166+
|-- webpack.config.js - webpack setting
167+
```

‎web-widget/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang='en'>
3+
<head>
4+
<meta charset='UTF-8'>
5+
<title>Channelize Widget Sample</title>
6+
</head>
7+
<body>
8+
<div id="ch_widget"></div>
9+
</body>
10+
11+
<script src="https://cdn.channelize.io/apps/web-widget/1.0.0/channelize-websdk-min.js"></script>
12+
<script src="https://cdn.channelize.io/apps/web-widget/1.0.0/widget.Channelize.js"></script>
13+
14+
<script>
15+
const channelizeWidget = new ChannelizeWidget('XxqzbOpFjQDAvch8');
16+
channelizeWidget.load();
17+
</script>
18+
</html>

‎web-widget/package.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "js-web-widget",
3+
"version": "1.0.0",
4+
"description": "Channelize Web Widget Sample App",
5+
"main": "index.js",
6+
"scripts": {
7+
"build": "./node_modules/.bin/webpack --mode production",
8+
"start": "node server.js"
9+
},
10+
"author": "Channelize",
11+
"license": "ISC",
12+
"devDependencies": {
13+
"@babel/core": "^7.7.4",
14+
"@babel/preset-env": "^7.7.4",
15+
"babel-loader": "^8.0.6",
16+
"webpack": "^4.41.2",
17+
"webpack-cli": "^3.3.10",
18+
"css-loader": "^3.4.0",
19+
"express": "^4.17.1",
20+
"node-sass": "^4.13.0",
21+
"sass-loader": "^8.0.0",
22+
"style-loader": "^1.1.2"
23+
}
24+
}

‎web-widget/server.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const express = require('express');
2+
const app = express();
3+
4+
const PORT = 9000;
5+
6+
app.use(express.static('dist'));
7+
app.use(express.static('./'));
8+
9+
app.get('/', function(req, res) {
10+
res.sendfile('index.html');
11+
});
12+
13+
app.listen(PORT);
14+
console.log(`SERVER RUNNING on 127.0.0.1:${PORT}`);

0 commit comments

Comments
 (0)