---
# System prepended metadata

title: Widget JS API Description

---

# 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
![](https://i.imgur.com/xKhvzwy.png)
```
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
![](https://i.imgur.com/kv2B6PU.png)
```
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
`