Skip to content

Commit d1e2d3d

Browse files
author
Nathan Zylbersztejn
authored
Version bump
1 parent 54fabd1 commit d1e2d3d

File tree

1 file changed

+36
-26
lines changed

1 file changed

+36
-26
lines changed

README.md

Lines changed: 36 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,24 @@
33
A simple webchat widget to connect with a chatbot. Forked from [react-chat-widget](https://github.com/Wolox/react-chat-widget)
44
## Features
55

6-
- Plain text message UI
7-
- Snippet style for links (only as responses for now)
6+
- Text Messages
87
- Quick Replies
9-
- Compatible with Messenger Platform API
8+
- Images and Videos
9+
- Snippet style for links (only as responses for now)
10+
- Markdown support
11+
- Easy to import in a script tag or as a React Component
12+
- Persistent sessions
1013

1114
![demonstration](./assets/chat-demonstration.gif)
1215

13-
## Usage
16+
## Setup
1417

15-
#### As a script
18+
### In a `<script> tag
1619

1720
In your `<body/>`:
1821
```javascript
1922
<div id="webchat"/>
20-
<script src="https://storage.googleapis.com/mrbot-cdn/webchat-0.4.1.js"></script>
23+
<script src="https://storage.googleapis.com/mrbot-cdn/webchat-0.5.0.js"></script>
2124
<script>
2225
WebChat.default.init({
2326
selector: "#webchat",
@@ -50,15 +53,7 @@ About images: `width` and `height` define the size in pixels that images in mess
5053
It is recommended to use a particular version (i.e. "webchat-<version>.js") however the file "webchat-latest.js"
5154
is also available and is updated continuously with the latest version.
5255

53-
#### Session Persistence
54-
55-
`storage` specifies the location where the the conversation and state of the WebChat is stored in the browser's storage.
56-
57-
`storage: "session"` defines the state to be stored in the session storage. The session storage persists on reload of the page, and is cleared after the browser or tab is closed, or when `sessionStorage.clear()`is called.
58-
59-
`storage: "local"` defines the state to be stored in the local stoage. The local storage persists after the the browser is closed, and is cleared when the cookies of the browser are cleared, or when `localStorage.clear()`is called.
60-
61-
#### As a React component
56+
### As a React component
6257

6358
Install the package from GitHub by running:
6459
```bash
@@ -98,9 +93,14 @@ function CustomWidget = () => {
9893
- Make sure to have the prop `embedded`
9994
set to `true` if you don't want to see the launcher.
10095

101-
## In your backend.
96+
### Backend
97+
98+
#### Rasa Core
99+
100+
Use the SocketIOInput channel: See [instructions in the Rasa Core documentation](https://rasa.com/docs/core/connectors/#socketio-connector)
102101

103-
Your backend should expose a socket with [socket.io](http://socket.io)
102+
#### Others
103+
Your backend must expose a socket with [socket.io](http://socket.io)
104104

105105
### Receiving messages from the chat
106106

@@ -112,13 +112,13 @@ Your backend should expose a socket with [socket.io](http://socket.io)
112112

113113
### Sending messages from the backend to the chat widget
114114

115-
#### sending plain text
115+
##### sending plain text
116116

117117
```python
118-
emit('bot_uttered', {"text": "hello"}, room=socket_id)
118+
emit('bot_uttered', {"text": "hello"}, room=session_id)
119119
```
120120

121-
#### sending quick replies
121+
##### sending quick replies
122122

123123
```python
124124
message = {
@@ -130,7 +130,7 @@ message = {
130130
emit('bot_uttered', message, room=socket_id)
131131
```
132132

133-
#### sending a link Snippet
133+
##### sending a link Snippet
134134

135135
Admittedly a bit far fetched, thinking that Snippets would evolve to carousels
136136
of generic templates :)
@@ -157,7 +157,7 @@ message = {
157157
emit('bot_uttered', message, room=socket_id)
158158
```
159159

160-
#### sending a Video Message
160+
##### sending a Video Message
161161

162162
```python
163163
message = {
@@ -172,7 +172,7 @@ message = {
172172
emit('bot_uttered', message, room=socket_id)
173173
```
174174

175-
#### sending an Image Message
175+
##### sending an Image Message
176176

177177
```python
178178
message = {
@@ -186,9 +186,19 @@ message = {
186186
}
187187
emit('bot_uttered', message, room=socket_id)
188188
```
189-
#### Using with Rasa
190-
The chat widget can communicate with any backend, but there is a [Rasa core channel
191-
available here](https://github.com/mrbot-ai/rasa-addons/)
189+
190+
191+
## Usage
192+
193+
### Session Persistence
194+
195+
`storage` specifies the location where the the conversation and state of the WebChat is stored in the browser's storage.
196+
197+
`storage: "session"` defines the state to be stored in the session storage. The session storage persists on reload of the page, and is cleared after the browser or tab is closed, or when `sessionStorage.clear()`is called.
198+
199+
`storage: "local"` defines the state to be stored in the local stoage. The local storage persists after the the browser is closed, and is cleared when the cookies of the browser are cleared, or when `localStorage.clear()`is called.
200+
201+
192202

193203
## API
194204

0 commit comments

Comments
 (0)