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"

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 inside onUserAuthorizationFailed() callback. This should prevent from showing message that the session has expired and make more smooth UX for returning user.

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

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

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.

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.

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.

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>.

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>

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.

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

So assuming Lekta context:

{
	"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

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

status can be one of:

  • 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

  • unsolved- when the conversation gets closed according to Close conversations

onMaintenanceModeEnabled (message) - triggered when maintenance mode enabled and widget chat window visibility changes

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.

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.

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.

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.

closer.deinit();

Last updated