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", {
            "backgroundColor": "#00bcd4",
            "borderRadius": 7,
            "color": "#ffffff",
            "boxShadow": "3px 3px 5px 6px #cccccc",
            "fontWeight": "bold"

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

Last updated