# Advanced Closer widget integration

The basic method for starting the widget by calling the **closer.init** method with the orgId parameter can be extended with additional attributes:

**apiKey** - enables opening the widget from the client's apiKey, thanks to which we can restore his session. The value is UUID, e.g. "00000000-0000-0000-0000-000000000000"

```javascript
closer.init({
    orgId: "00000000-0000-0000-0000-000000000000",
    apiKey: "00000000-0000-0000-0000-000000000000"
});
```

**initializeBeforeRender (optional)** - **false** by default. Enables running initialization process (that involves backend communication) before rendering the widget. Possible use case: check user session before opening the widget, if auth process fails, init the new session with [forcing new user](https://support.closer.app/guide/getting-deeper/force-new-user-everytime-in-widget) inside [**onUserAuthorizationFailed()** ](https://support.closer.app/guide/getting-deeper/user-authorization-callbacks)callback. This should prevent from showing message that the session has expired and make more smooth UX for returning user.

```javascript
closer.init({
    orgId: "00000000-0000-0000-0000-000000000000",
    initializeBeforeRender: true
});
```

**onOpen** - triggers the function given as an attribute every time the widget is opened.

```javascript
closer.init({
    orgId: "00000000-0000-0000-0000-000000000000",
    onOpen: () => { console.log("widget opened") }
});
```

**onClose** - triggers the function given as an attribute each time the widget is closed.

```javascript
closer.init({
    orgId: "00000000-0000-0000-0000-000000000000",
    onClose: () => { console.log("widget closed") }
});
```

**onMessageSent** - triggers the function given as an attribute every time the client sends a message.

```javascript
closer.init({
    orgId: "00000000-0000-0000-0000-000000000000",
    onMessageSent: () => { console.log("client sent message") }
});
```

**onMessageReceived** - triggers the function given as an attribute every time the client receives a message.

```javascript
closer.init({
    orgId: "00000000-0000-0000-0000-000000000000",
    onMessageReceived: () => { console.log("client received message") }
});
```

**getLoginHintToken (optional)** - triggers the function given as an attribute when client authorization with oauth is needed. Function must return `Promise<string>`.

```javascript
closer.init({
    orgId: "00000000-0000-0000-0000-000000000000",
    getLoginHintToken: () => Promise.resolve("myLoginHintToken")
});
```

**onTagsChanged (optional)** - triggers the function given as an attribute every time conversation tags changed. As a parameter function gets `ReadOnlyArray<string>`&#x20;

```javascript
closer.init({
    orgId: "00000000-0000-0000-0000-000000000000",
    onTagsChanged: (tags) => console.log("conversation tags changed to", tags)
});
```

**onLektaContext (context)** - triggers the function given as an attribute every time Lekta Bot sets "onLektaContext" field inside closer context namespace.&#x20;

```javascript
closer.init({
    orgId: "00000000-0000-0000-0000-000000000000",
    onLektaContext: (context) => console.log("got context from Lekta Bot:", context)
});
```

So assuming Lekta context:&#x20;

```
{
	"some_other_stuff": {},
	"closer": {
		"onLektaContext": {
			"relogin": true,
			"arr": [],
			"foo": "bar"
		}
	}
}
```

as a parameter function gets:

```
{
	"relogin": true,
	"arr": [],
	"foo": "bar"
}
```

**onConversationStatusChanged ({status})** - triggered every time the conversation status is changed

```javascript
closer.init({
    orgId: "00000000-0000-0000-0000-000000000000",
    onConversationStatusChanged: ({status}) => console.log(`status: ${status}`)
});
```

`status` can be one of:&#x20;

* `waiting` - when the conversation is waiting to be assigned (usually after transfer). Note: new conversations that are not assigned do **not** emit this event, as in this case `waiting` status is default one and there is no state transition.
* `inProgress` - when the conversation gets assigned
* `solved` - when the conversation gets closed according to [Close conversations](https://support.closer.app/getting-deeper/manage-your-teams-workload#close-conversations)
* `unsolved`- when the conversation gets closed according to [Close conversations](https://support.closer.app/getting-deeper/manage-your-teams-workload#close-conversations)

**onMaintenanceModeEnabled (message)** - triggered when maintenance mode enabled and widget chat window visibility changes&#x20;

```javascript
closer.init({
    orgId: "00000000-0000-0000-0000-000000000000",
    onMaintenanceModeEnabled: (message) => console.log(`Maintenance enabled: ${message}`)
});
```

* `message` **-** same message that is presented on widget if current date time falls within the maintenance window.

**enableLog (optional)** -  `boolean`(default: false) Setting it to true will enable gathering frontend logs on the backend side, which is crucial for analysing widget integration issues. In order to effectively organise the debugging process it is highly recommended to contact Closer IT Team by email: <support@closer.app>.

```javascript
closer.init({
    orgId: "00000000-0000-0000-0000-000000000000",
    enableLog: true
});
```

**disableAutoOpen (optional)** -  `boolean`(default: false) Setting it to true will initialise the widget in closed state unconditionally, even if the widget has been previously opened in the current browser context.

```javascript
closer.init({
    orgId: "00000000-0000-0000-0000-000000000000",
    disableAutoOpen: true
});
```

**showButton (optional)** -  `boolean`(default: true) Setting it to false will hide the widget button. If widget was initialized & opened in the browser context, this flag will be overwritten.

```javascript
closer.init({
    orgId: "00000000-0000-0000-0000-000000000000",
    showButton: false
});
```

Use the **closer.deinit** method to log off the client securely. It accepts no arguments. It removes the client's data from the browser and removes the widget from the DOM of **all tabs on the same origin**. After calling this method, we can use closer.init again.

```javascript
closer.deinit();
```