---
updatedAt: 2026-05-14T09:34:49.000Z
agentTools:
  projectIndex: https://docs.wert.io/llms.txt
---

# Widget display methods

After creating and configuring the widget, you can use a few methods to control the widget's display.

Please make sure you use the latest version of [SDK](https://www.npmjs.com/package/@wert-io/widget-initializer) (7.x.x).

<br />

You can use the following widget class methods:

| Method               | Description                                                                                                                                     |
| :------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------- |
| open                 | Mount the widget in the DOM and make it visible.                                                                                                |
| close                | Close the widget modal.                                                                                                                         |
| updateTheme          | Switch the widget's theme without reloading it.                                                                                                 |
| addEventListeners    | Add event listeners. You can find more info on the event listeners in the [listeners object page](https://docs.wert.io/docs/listerners-object). |
| removeEventListeners | Remove event listeners.                                                                                                                         |

<br />

The `open()` method will **initialize the widget as an iFrame**.

```javascript
wertWidget.open();
```

<br />

You can **switch the widget's theme** without reloading it; please note this method should be called only after the widget is fully loaded:

```javascript
wertWidget.updateTheme({
  theme: 'dark', // Use 'undefined' for the default light theme. 
  brand_color: 'red' // Can be in any suitable format (string, HEX, rgb etc.)
});
```

<br />

You can **listen to widget events**:

```javascript
wertWidget.addEventListeners({
  position: data => console.log('step:', data.step),
});
```

<br />

Here are the options to **remove event listeners**:

```javascript
wertWidget.removeEventListeners('rate-update');
//or

wertWidget.removeEventListeners([ 'rate-update', 'payment-status' ]);
//or

wertWidget.removeEventListeners();
```