# Widget JS API Description
## Widget events
|№|Name of event|Description| Returned data|Status|
|-|-------------|--------------|------|-----|
|1|message|Message incomes event||[✔]
|2|minimized|Widget minimized event||[✔]
|3|session-start|Session started event||[✔]
|4|open|Widget opened event||[✔]
|5|load|Widget loaded event||[✔]
|6|hide|Widget hidden event||[✔]
|7|close|Widget closed event||[✔]
|8|mute|Widget muted event||[❌]
|9|session-end|Session ended event||[✔]
### Example how to use
<code>
<pre>
const unsubs = ['load'].map(e => ({ [e]: widget.addEventListener(e, () => {
console.log('WIDGET LOADED EVENT')
})})); // where widget - is RLC Widget object, load - is name of event
</pre>
</code>
## 1. Message
Tracking/logging
```
['message'].map(e => ({ [e]: widget.addEventListener(e, () => {
console.log('[API]message');
})}));
```
## 2. Minimize Widget
Tracking/logging
```
['minimized'].map(e => ({ [e]: widget.addEventListener(e, () => {
console.log('[API]minimized');
})}));
```
Fire Event
```
widget.minimize() // Not ready
```
## 3. Session Start
Tracking/logging
```
['session-start'].map(e => ({ [e]: widget.addEventListener(e, () => {
console.log('[API]session-start');
})}));
```
## 4. Open Widget
Tracking/logging
```
['open'].map(e => ({ [e]: widget.addEventListener(e, () => {
console.log('[API]open');
})}));
```
Fire Event
```
widget.open()
```
### For testing it on UAT
```
['message'].map(e => ({ [e]: widget.addEventListener(e, () => {
console.log('[API]message');
})}));
['minimized'].map(e => ({ [e]: widget.addEventListener(e, () => {
console.log('[API]minimized');
})}));
['session-start'].map(e => ({ [e]: widget.addEventListener(e, () => {
console.log('[API]session-start');
})}));
['open'].map(e => ({ [e]: widget.addEventListener(e, () => {
console.log('[API]open');
})}));
['load'].map(e => ({ [e]: widget.addEventListener(e, () => {
console.log('[API]load');
})}));
['hide'].map(e => ({ [e]: widget.addEventListener(e, () => {
console.log('[API]hide');
})}));
['close'].map(e => ({ [e]: widget.addEventListener(e, () => {
console.log('[API]close');
})}));
❌['mute'].map(e => ({ [e]:
widget.addEventListener(e, () => {
console.log('[API]mute');
})}));
```
## API Calls
|№|URL |Description|Query Parameters| Returned data|
|-|-------------|--------------|---|------|
|1|GET: /rake-live-chat/:hash/last-visit/timestamp|Get last visit|clientId|createdAt: Date|
**Example**:
https://rakesystem-uat.rake.ai/rake-live-chat/wwc_524494_1558044354824/last-visit/timestamp?clientId=6cca795d-fd1b-4d22-97b7-ca827ddffcfc1572943354863/localhost:3500
|2|GET: /rake-live-chat/:hash/sessions/count|Get sesssion count|clientId|count: Number|
**Example**:
https://rakesystem-uat.rake.ai/rake-live-chat/wwc_524494_1558044354824/sessions/count?clientId=319911b0-cec5-489f-91f7-b376bb81199b1578923982640/localhost:3500
|3|GET: /rake-live-chat/:hash/sessions/active|Get sessionId|clientId|sessionId:
**Example**:
https://rakesystem-uat.rake.ai/rake-live-chat/wwc_524494_1558044354824/sessions/active?clientId=6cca795d-fd1b-4d22-97b7-ca827ddffcfc1572943354863/localhost:3500
### Set sender data
Description:
After load widget we send information about sender. If sender not have entity record yet, we create it; If he had, then update with information what provided in argemunets.
Arguments:
* data
* firstName - type string
* lastName - type string
* phoneNumber - type string, have validation:
* must started from '+'
* contain only numbers
* email - type string, have validation:
* must be email
* cb - result of API call prototype: (err,data)
Example:
```
const widget = new RakeLiveChatWidget(hash);
widget.addEventListener('load', () => {
widget.setSenderData(
{ firstName: 'Mykola' },
( err,data ) => err?console.error(err): console.log(data)
);
})
```
### Close session [✔]
Description:
Close active session
Arguments:
* cb - result of API call prototype: (err,data)
Example:
```
const widget = new RakeLiveChatWidget(hash);
widget.addEventListener('session-start', () => {
widget.closeSession(
( err,data ) => err?console.error(err): console.log(data)
);
})
```
### Get count of sessions [✔]
Description:
Return count of sessions for this user
Arguments:
* cb - result of API call prototype: (err,data)
> data: { count }
Example:
```
const widget = new RakeLiveChatWidget(hash);
widget.addEventListener('load', () => {
widget.getCountOfSessions(
( err,data ) => err?console.error(err): console.log(data)
);
})
```
### Get last visit timestamp [❌]
Description:
Return timstamp in UTC format
Arguments:
* cb - result of API call prototype: (err,data)
> data: { timestamp }
Example:
```
const widget = new RakeLiveChatWidget(hash);
widget.addEventListener('load', () => {
widget.getLastVisitTimestamp(
( err,data ) => err?console.error(err): console.log(data)
);
})
```
### Set sound mode [✔]
Arguments:
* value - type boolean
Example:
```
const widget = new RakeLiveChatWidget(hash);
widget.addEventListener('load', () => {
widget.setSound(value: boolean);
})
```
### Set custom variable [✔]
Description:
Web-site can add some custom variables to widget, this values must be sended with user activity requests and saved to DB in activity array inside activity object
Arguments:
* key - type string
* value - type any
Example:
```
const widget = new RakeLiveChatWidget(hash);
widget.addEventListener('load', () => {
widget.set('ExampleKey', 'ExampleValue');
})
```
### Check if business is closed
Method name: isBusinessOpen

```
const widget = new RakeLiveChatWidget(hash);
widget.addEventListener('load', () => {
widget.isBusinessOpen(
( err,data ) => err?console.error(err): console.log(data)
);
})
```
<!-- | | workspace exists | workspace not exists
| ------------------- | -----------------| --------------------
| inContact exists | always return true | always return true
| inContact not exists| we get information from rake user app | always return true -->
<!-- > inContact exists/not exists -- we will send request to rake user app for getting information is AvailableBeeopenEngachments
> -->
### Check available agents count
Method name: getAvailableAgentsCount

```
const widget = new RakeLiveChatWidget(hash);
widget.addEventListener('load', () => {
widget.getAvailableAgents(
( err,data ) => err?console.error(err): console.log(data)
);
})
```
<!-- | | workspace exists | workspace not exists
| ------------------- | -----------------| --------------------
| inContact exists | always return count: 1 | always return count: 1
| inContact not exists| we get information from rake user app | always return count: 0 -->
<!-- > inContact exists/not exists -- we will send request to rake user app for getting information is AvailableBeeopenEngachments
> -->
## Use Case Examples
### 1 Button that opens widget
Webmaster wants to create a call to action button on their site that says "Learn More". When a visitor clicks that button, it opens the widget and starts a session. (ideally send a message like: "Hi, I'm interested in this thing.")
### 2 Track events like:
- Chat Session started
- Message sent
The end goal is understanding that a chat session occured in the same web session as a purchase or other "conversion" event, whatever that may be.
### 3 Check if Agents are available and Business is open, then show or hide widget:
- On load, set widget as hidden
- Call JS API methods with conditions
- e.g.
- if 'getAvailableAgentsCount' >0, AND
- 'isBusinessOpen', is "true", THEN
- widget(show), ELSE
- END If
`