Skip to content

Commit 8bc0a8b

Browse files
chetan-b-bigstepchetan-b-bigstep
committed
Update docs
1 parent 0c709b8 commit 8bc0a8b

File tree

2 files changed

+32
-50
lines changed

2 files changed

+32
-50
lines changed

‎README.md

+31-49
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,21 @@
11
# Channelize JavaScript Widget UI kit
22

3-
This contains the customization capabilities you can achieve by using our JavaScript Sample App created using our [JavaScript SDK](https://docs.channelize.io/javascript-sdk-introduction-overview). This Sample App allows you to add a customized chat widget / docked layout on your website.
3+
This JavaScript Sample app is built using our [JavaScript SDK](https://docs.channelize.io/javascript-sdk-introduction-overview), 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.
44

5-
### Features : ###
6-
- Highly customization
7-
- Easy to implement
8-
- Ready to use
9-
- Multiple use cases
105

11-
#### You can also check out our demo [here](https://demo.channelize.io).
6+
#### See in Action [here](https://demo.channelize.io).
127

138
## Getting Started
149

15-
Follow the below steps to add Channelize widget / docked layout on your website.
10+
Follow the below steps to add the Channelize chat widget / docked layout to your website.
1611

1712
##### Step 1: Add widget #####
1813

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

2116
```html
2217
<body>
23-
<div id="ch_widget"></div>
18+
<div id="ch_widget"></div>
2419
</body>
2520
```
2621

@@ -42,12 +37,12 @@ Import the [`Channelize JS-SDK`](https://docs.channelize.io/javascript-sdk-intro
4237

4338
##### Step 4: Create widget object #####
4439

45-
Create widget object and call the load function which will require your public key as an argument.
40+
Create Channelize.io object and call the load function which will require your public key as an argument.
4641

4742
```javascript
4843
<script>
49-
const channelizeWidget = new ChannelizeWidget('PUBLIC_KEY');
50-
channelizeWidget.load();
44+
const channelizeWidget = new ChannelizeWidget('PUBLIC_KEY');
45+
channelizeWidget.load();
5146
</script>
5247
```
5348

@@ -62,12 +57,12 @@ Create widget object and call the load function which will require your public k
6257

6358
2. Install required npm packages.
6459
```bash
65-
npm install
60+
sudo npm install
6661
```
6762

6863
3. Build your changes.
6964
```bash
70-
npm run build
65+
sudo npm run build
7166
```
7267
7368
4. Start sample app.
@@ -77,69 +72,56 @@ npm start
7772

7873
###### For UI Customizations : ######
7974

80-
- Customize the UI of 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.
75+
- 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.
8176

8277

8378
###### For Function Customizations : ######
8479

85-
- Add your functions or make code-level changes.
80+
- Add your own functions or make code-level changes.
8681

8782

8883
## Advanced
8984

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.
85+
### Load for logged-in user
86+
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.
9287

9388
```html
9489
...
9590

96-
<script>
97-
const channelizeWidget = new ChannelizeWidget('PUBLIC_KEY');
98-
channelizeWidget.load();
99-
</script>
91+
<script>
92+
const channelizeWidget = new ChannelizeWidget('PUBLIC_KEY');
93+
channelizeWidget.loadWithUserId('userId', 'accessToken');
94+
</script>
10095
</html>
10196
```
10297

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.
98+
### Load Recent Conversations Screen
99+
Load the recent conversations screen using `loadRecentConversation()` method. It takes two arguments user-id and access token.
105100

106101
```html
107102
...
108103

109-
<script>
110-
const channelizeWidget = new ChannelizeWidget('PUBLIC_KEY');
111-
channelizeWidget.loadWithConnect('userId', 'accessToken');
112-
</script>
104+
<script>
105+
const channelizeWidget = new ChannelizeWidget('PUBLIC_KEY');
106+
channelizeWidget.loadRecentConversation('userId', 'accessToken');
107+
</script>
113108
</html>
114109
```
115110

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.
111+
### Load Conversation Window
112+
Load conversation window using `loadConversationWindow()` method. It requires two arguments otherMemberId and conversationId.
118113

119114
```html
120115
...
121116

122-
<script>
123-
const channelizeWidget = new ChannelizeWidget('PUBLIC_KEY');
124-
channelizeWidget.loadRecentConversation('userId', 'accessToken');
125-
</script>
117+
<script>
118+
const channelizeWidget = new ChannelizeWidget('PUBLIC_KEY');
119+
channelizeWidget.loadConversationWindow('otherMemberId', 'conversationId');
120+
</script>
126121
</html>
127122
```
128123

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 :
124+
## File Structure of Channelize Sample App
143125
```
144126
|-- dist
145127
|-- widget.Channelize.js - Channelize Widget Bundle file
@@ -164,4 +146,4 @@ If you want to load conversation window, then you can use `loadConversationWindo
164146
|-- README.md - description file
165147
|-- server.js - server file
166148
|-- webpack.config.js - webpack setting
167-
```
149+
```

‎src/js/widget.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ class ChannelizeWidget {
5353
}
5454

5555
// Connect and load channelize
56-
loadWithConnect(userId, accessToken) {
56+
loadWithUserId(userId, accessToken) {
5757
this.connect(userId, accessToken, (err, res) => {
5858
if(err) return console.error(err);
5959

0 commit comments

Comments
 (0)