# Javascript API

**Open, Close and Toggle widget**

```javascript
LiveCaller.$emit('ui.widget.open');
LiveCaller.$emit('ui.widget.close');
LiveCaller.$emit('ui.widget.toggle'); 
```

**Emit event to close the currently active conversation**

```javascript
LiveCaller.$emit('ui.conversation.close');
```

example of a button, when clicked it will toggle Livecaller's widget frame

```css
<script>
  document.getElementById('your button id').addEventListener('click', function (e) {
    e.preventDefault()LiveCaller.$emit('ui.widget.toggle')})
</script>
```

**Listen to the widget opening or closing events**

```css
LiveCaller.$on('ui.widget.open', () => {});
LiveCaller.$on('ui.widget.close', () => {});
```

**Change language**

{% hint style="info" %}
change **en** to your native language 2 letter iso code: <https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2>
{% endhint %}

Change language before the widget load

```css
LiveCaller.config.merge({app: {locale: 'en'}});
```

Update language inside the loaded widget

```css
LiveCaller.$emit('app.locale.update', 'en');
```

#### JWT authentication

{% hint style="info" %}
For authentication and profile editing is used JWT verification algorithm HS256.

Read more about JWT here: <https://jwt.io/>

Token lifetime is 15 minutes\
Necessary payload information:\
sub - unique id of the customer in your system\
iat   - token generation timestamp ( UNIX timestamp seconds)
{% endhint %}

*JWT Header example:*

```css
{
  "alg": "HS256",
  "typ": "JWT"
}
```

*Edit Customer JWT Payload example:*

```css
{
  "sub": "12ba81b2-c1fe-479b-8b4a-09fecb02a3d6",
  "name": "John Doe",
  "email": "user@example.com",
  "mobile": "995000123456",
  "iat": 1565610612
}
```

**User authorization**

```javascript
LiveCaller.$emit('user.login', 'JWT Token Here');
```

**User profile update**

```javascript
 LiveCaller.$emit('user.update', 'JWT Token Here');
```

**User Logout**

```javascript
LiveCaller.$emit('user.logout');
```

**Listen for incoming messages and for conversaion closure**

```javascript
LiveCaller.$on('conversation.message.received', (message) => {
    console.log('Message content:', message.content);
});

LiveCaller.$on('ConversationWasClosed', (conversation) => {
    console.log('Conversation closed:', conversation);
});
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.livecaller.io/livecaller/widget-api/javascript-api.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.