Radiate.js
You can make use of Radiate.js to create different interactions between your web and the web chat.
init
Initialize the web chat plugin with the provided parameters
Radiate.init(CHANNEL_ID, CHANNEL_TOKEN, options)
Parameters
| Name | Type | Description |
|---|---|---|
| CHANNEL_ID | string | Can be found in the Stella channel |
| CHANNEL_TOKEN | string | Can be found in the Stella channel |
| options | object | optional |
Options
| Name | Type | Description |
|---|---|---|
| notReadyIconUrl | string | Image URL to customise the icon shown when there is network connction issue with our web chat server |
| notReadyText | string | Custom text when there is network connction issue with our web chat server |
| locale | string | Set the initial locale of the user, this should be one of your locale group name on Stella |
| greetings | string | Custome text displayed next to the icon before the icon is clicked |
| defaultOpen | boolean | Control if the messenger frame should be opened when web chat successfully initilized. Default is false |
| ref | string | For passing custom data with the GET_STARTED payload when user click the Get Started Button and talk to the chat bot for the first time |
Example
Radiate.init("CHANNEL_ID", "CHANNEL_TOKEN", {
notReadyIconUrl: "https://s3-ap-southeast-1.amazonaws.com/daydaybot-sanuker/sanuker-bot/sanuker-logo-only-s.png",
notReadyText: "Working hard now...",
locale: "english",
greetings: "Chat with us!",
defaultOpen: true
})
subscribe
You could use subscribe to listen to certain web chat events.
Radiate.subscribe(EVENT_NAME, callback)
Parameters
| Name | Type | Description |
|---|---|---|
| EVENT_NAME | string | Can be one of the following values: WEB_ACTION, READY, OPEN_WEBCHAT, CLOSE_WEBCHAT |
| callback | function | Callback function with the event object as a parameter |
WEB_ACTION
The WEB_ACTION event is sent when the chatbot sent out the WEB_ACTION response.
event properties
| Name | Type | Description |
|---|---|---|
| event | string | WEB_ACTION |
| data | object | all the custom properties that you defined in your Stella response |
| from | string | Bot ID, in web chat, this is usually the channel ID |
| to | string | User ID |
| timestamp | number | Time of update (epoch time in milliseconds) |
READY
The READY event will be sent when the initialization of the webchat plugin has completed.
event properties
| Name | Type | Description |
|---|---|---|
| event | string | READY |
OPEN_WEBCHAT
The OPEN_WEBCHAT event will be sent when the messenger frame has been opened.
event properties
| Name | Type | Description |
|---|---|---|
| event | string | OPEN_WEBCHAT |
CLOSE_WEBCHAT
The CLOSE_WEBCHAT event will be sent when the messenger frame has been closed.
event properties
| Name | Type | Description |
|---|---|---|
| event | string | CLOSE_WEBCHAT |
sendEvent
When the user does any actions on your web, you can make use of sendEvent to interact with the web chat plugin, like opening or closing the web chat or send events to Stella to trigger a chatbot flow.
Radiate.sendEvent(EVENT_NAME, data, options)
Parameters
| Name | Type | Description |
|---|---|---|
| EVENT_NAME | string | Can be one of the following values: WEB_EVENT, OPEN_WEBCHAT, CLOSE_WEBCHAT |
| data | string / object | optional |
| options | object | optional |
WEB_EVENT
WEB_EVENT can be used to send custom data to Stella to trigger a chatbot conversation.
Example
Radiate.sendEvent("WEB_EVENT", {
payload: "SOME_PAYLOAD",
selectedOption: "OPTION_A"
}, {
openMessenger: true
})
Parameters
| Name | Type | Description |
|---|---|---|
| data | string / object | Custom defined JSON data to send to Stella |
| options | object | optional |
Options
| Name | Type | Description |
|---|---|---|
| openMessenger | boolean | To control whether the messenger frame should be opened upon sending the event. Default is false |
OPEN_WEBCHAT
Event for opening the messenger frame.
Example
Radiate.sendEvent("OPEN_WEBCHAT")
CLOSE_WEBCHAT
Event for closing the messenger frame.
Example
Radiate.sendEvent("CLOSE_WEBCHAT")