Change the header's custom style

This example shows how to dynamically change a widget's header style when a user clicks a button in the HTML Canvas widget.

• Create a button element in the HTML tab. Paste in the following code:

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

• Add the logic to change the header style when the button is clicked:

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 settings by clicking the green check mark. The result is shown below: