<title>Chatlayer Events Example</title>
<button onclick="initChatlayer()">Initialize Chatlayer</button>
<button onclick="destroyChatlayer()">Destroy Chatlayer</button>
<button onclick="openChatlayer()">Open Chatlayer Widget</button>
<button onclick="closeChatlayer()">Close Chatlayer Widget</button>
* This example showcases the destruction of a Chatlayer webwidget
* by triggering the JSON builder plugin in the flow.
* The JSON builder action dialog was set up as follows:
* https://minio.dev.chatlayer.ai/public/JSONBuilder.png
let chatlayerInstance = null;
const initChatlayer = () => {
if (chatlayerInstance) return;
console.log("Initializing the Chatlayer widget ...");
chatlayerInstance = chatlayer({ lang: "en" });
// Event types are "event", "open" and "close"
chatlayerInstance.on("open", event => {
chatlayerInstance.on("close", event => {
chatlayerInstance.on("event", event => {
// Note the content of event here: the "action" key with value "destroy"
// originates directly from the configured JSON Builder action.
const isChatlayerDestroyEvent = event.action === "destroy";
if (isChatlayerDestroyEvent) {
const destroyChatlayer = () => {
if (!chatlayerInstance) return;
console.log("Destroying the Chatlayer widget ...");
// To destroy the widget, it has to be opened first
chatlayerInstance.open();
chatlayerInstance.destroy();
chatlayerInstance = null;
const openChatlayer = () => {
if (!chatlayerInstance) {
console.log("Please initialize Chatlayer first!");
chatlayerInstance.open();
const closeChatlayer = () => {
if (!chatlayerInstance) {
console.log("Please initialize Chatlayer first!");
chatlayerInstance.close();
<!-- Note the absence of the onload prop on the following script tag. -->
<!-- To automatically initialize the webwidget, you would add the prop: -->
<!-- onload="initChatlayer()" -->
src="https://chatbox.staging.chatlayer.ai/sdk/5ecbcf1514c3dc4942f05f96"