Comment on page

Live example web widget

We've created an example of how you can initialize and destroy the chat widget through your own Javascript code.
<title>Chatlayer Events Example</title>
<meta charset="UTF-8" />
<button onclick="initChatlayer()">Initialize Chatlayer</button>
<button onclick="destroyChatlayer()">Destroy Chatlayer</button>
<br />
<br />
<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:
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 = null;
const openChatlayer = () => {
if (!chatlayerInstance) {
console.log("Please initialize Chatlayer first!");
const closeChatlayer = () => {
if (!chatlayerInstance) {
console.log("Please initialize Chatlayer first!");
<!-- Note the absence of the onload prop on the following script tag. -->
<!-- To automatically initialize the webwidget, you would add the prop: -->
<!-- onload="initChatlayer()" -->
JSON builder plugin configuration:
View a live version of this code here.
As you can see from the example above, you can initialize the widget, open/close it, as well as destroy it from your own code. The example shows you how to use the JSON Builder plugin to trigger a destroy event for the chat widget.