Skip to main content

How to build a custom widget

How to build your own custom widget in WTO

James Harber avatar
Written by James Harber
Updated over 2 weeks ago

In order to create a new custom widget, you can navigate to the UI screen via the nav.


You will need to fill in the three code boxes and press save.

Please refer to the example code in the boxes in the "Create New Widget" tab for guidance.

JSON Config requires valid JSON. It should contain an array of "sections".

Each section has a title and an array of inputs.

Each input has a label, type, value and id.

Dropdown type inputs also have an array of options.

All properties are required and ids should be unique for each different input. Currently, text, colour and dropdown inputs have been made available for custom widget development.


The Add Widget Script will have access to the information entered by the user based on the input ids set above. E.G. if you have a text input with id "my-text", you can access the value via widget["my-text"].

This box should contain the JavaScript that will run on the webpage which should be wrapped in function(widget) as in the default example code.


The Remove Widget Script is necessary for the visual editor remove widget button to work, and should tidy up any changes made by the Add Widget Script, e.g. remove elements, event listeners etc.

Did this answer your question?