Change header's custom style

The following example shows how to dynamically change a widget's header style upon clicking a button by using the HTML Canvas widget.

• Create a button element using HTML. Paste the following code on the HTML code editor tab:

<button id="color">Click here to change header styling</button>

• Add the logic to change the header's style upon clicking the button:

const button = document.querySelector("#color");
button.addEventListener("click", () => {
    const event = new CustomEvent("widget_changeHeaderColor", {
        detail:{
            "backgroundColor": "#00bcd4",
            "borderRadius": 7,
            "color": "#ffffff",
            "boxShadow": "3px 3px 5px 6px #cccccc",
            "fontWeight": "bold"
        }
    });
    document.dispatchEvent(event);
});

Save the widget's settings by clicking on the green check mark. The result is shown below: