2020-04-25 17:48:00 +00:00
---
2020-07-26 06:48:54 +00:00
path: '/docs/website-sdk'
title: 'Sending Information into Chatwoot'
2020-04-25 17:48:00 +00:00
---
2020-07-26 06:48:54 +00:00
Additional information about a contact is always useful. The Chatwoot Website SDK ensures that you can send additional information that you have about the user.
2020-04-25 17:48:00 +00:00
2020-07-26 06:48:54 +00:00
If you have installed our code on your website, the SDK would expose `window.$chatwoot` object.
2020-04-25 17:48:00 +00:00
2020-07-26 06:48:54 +00:00
In order to make sure that the SDK has been loaded completely, please make sure that you listen to `chatwoot:ready` event as follows:
2020-07-25 16:24:58 +00:00
```js
2020-07-26 06:48:54 +00:00
window.addEventListener('chatwoot:ready', function () {
2020-07-25 16:24:58 +00:00
// Use window.$chatwoot here
// ...
2020-07-26 06:48:54 +00:00
});
2020-07-25 16:24:58 +00:00
```
2020-07-26 06:48:54 +00:00
To hide the bubble, you can use the setting mentioned below. **Note** : If you use this, then you have to trigger the widget by yourself.
2020-04-25 17:48:00 +00:00
```js
window.chatwootSettings = {
hideMessageBubble: false,
position: 'left', // This can be left or right
2020-05-17 10:45:53 +00:00
locale: 'en', // Language to be set
2020-08-09 10:37:32 +00:00
type: 'standard', // [standard, expanded_bubble]
2020-07-26 06:48:54 +00:00
};
2020-04-25 17:48:00 +00:00
```
2020-08-09 10:37:32 +00:00
Chatwoot support 2 designs for for the widget
1. Standard (default)
![Standard-bubble ](./images/sdk/standard-bubble.gif )
2. Expanded bubble
![Expanded-bubble ](./images/sdk/expanded-bubble.gif )
2020-08-19 16:54:02 +00:00
If you are using expanded bubble, you can customize the text used in the bubble by setting `launcherText` parameter on chatwootSettings as described below.
```js
window.chatwootSettings = {
type: 'expanded_bubble',
launcherText: 'Chat with us'
}
```
2020-04-25 17:48:00 +00:00
### To trigger widget without displaying bubble
```js
2020-07-26 06:48:54 +00:00
window.$chatwoot.toggle();
2020-04-25 17:48:00 +00:00
```
### To set the user in the widget
```js
window.$chatwoot.setUser('identifier_key', {
email: 'email@example.com',
name: 'name',
avatar_url: '',
2020-07-26 06:48:54 +00:00
});
2020-04-25 17:48:00 +00:00
```
2020-07-26 06:48:54 +00:00
`setUser` accepts an identifier which can be a `user_id` in your database or any unique parameter which represents a user. You can pass email, name, avatar_url as params. Support for additional parameters is in progress.
2020-04-25 17:48:00 +00:00
2020-07-26 06:48:54 +00:00
Make sure that you reset the session when the user logs out of your app.
2020-04-25 17:48:00 +00:00
2020-05-17 10:45:53 +00:00
### To set language manually
```js
2020-07-26 06:48:54 +00:00
window.$chatwoot.setLocale('en');
2020-05-17 10:45:53 +00:00
```
2020-07-26 06:48:54 +00:00
To set the language manually, use the `setLocale` function.
2020-05-17 10:45:53 +00:00
2020-04-25 17:48:00 +00:00
### To set labels on the conversation
2020-07-26 06:48:54 +00:00
Please note that the labels will be set on a conversation if the user has not started a conversation. In that case, the following items will not have any effect:
2020-04-25 17:48:00 +00:00
```js
2020-07-26 06:48:54 +00:00
window.$chatwoot.addLabel('support-ticket');
2020-04-25 17:48:00 +00:00
2020-07-26 06:48:54 +00:00
window.$chatwoot.removeLabel('support-ticket');
2020-04-25 17:48:00 +00:00
```
2020-07-26 06:48:54 +00:00
### To refresh the session (use this while you logout the user from your app)
2020-04-25 17:48:00 +00:00
```js
2020-07-26 06:48:54 +00:00
window.$chatwoot.reset();
2020-04-25 17:48:00 +00:00
```