10. Template Editor Script

Do you have some spare time to give your widget an extra touch by writing some JavaScript? Although this is not mandatory for a functional widget, it can enhance the professionalism of your widget and, in some cases, improve the user experience (UX) in the Template Editor by providing visual feedback to the user.

Updating the Information Card Widget

Let's update our "Information Card" widget with a Template Editor script.

1. Select the "Template Editor Script" tab.

2. Copy and paste the following code:

3. Don't forget to save!

const placeholderElement = utility.createPlaceholderElement(placeholders.Contents.name);

const cardElement = utility.createElement("div");
cardElement.style.backgroundColor = "#d1ecf1";
cardElement.style.border = "1px solid #aadce5";
cardElement.style.borderRadius = "4px";
cardElement.style.padding = "8px";
cardElement.append(placeholderElement);

return cardElement;

This code should look quite familiar to a JavaScript veteran. Notice that we use utility.createElement instead of document.createElement to create our HTMLElement. This is because we only provide a subset of the JavaScript API, just enough to create a preview. We will go into more detail about this in later chapters.

If you still have the template open where this widget was placed, you should already see the changes from the default look to our custom preview. If not, open the template to see the updated appearance.