Design an element

Designing an element sets how it looks and where it sits on the screen. You make these changes in the Content section of the Widget Studio, where each element is listed in the Elements list.

​

Select and arrange elements

​

Select an element

Click an element to select it, or click its name in the Elements list.

​

Add, duplicate, edit, or delete an element

Hovering over an element in the Elements list displays secondary actions. Click the + icon to add an element below the selected element. Click the three-dots menu to edit, rename, duplicate, hide, or delete the element.

​

Duplicate an element

You can duplicate an element on the same screen, or duplicate an element from one screen to another.

​

Resize an element

You can resize your elements in the preview window (on the right). Position your cursor on an element’s edge, then click and drag to edit its dimensions. You can also modify these dimensions in the left panel.

​

Auto-resize text and heading

Select Auto-resize block to fit text on the General tab to adjust the element’s size so it expands or shrinks to fit the text.

​

Smart guides

Smart guides help you align and position elements both vertically and horizontally while editing your widget.

​

Constrain proportions

Once your element is resized, you can lock its dimensions. To constrain an element’s proportions:

1. Select an element in the left panel.
2. Hover over the element and click the padlock.

​

Move an element

Drag and drop an element in the preview to move it.

​

Rotate an element

To rotate an element, select it, and enter the desired rotation angle in the rotation parameter in the left panel.

​

Edit an element’s content

Click an element to access its settings. You can use AI to edit or generate your text. To add a link, highlight a word, group of words, or a whole block of text. You can also add emojis to your headings, text, and links.

​

Upload your own font

You can add your own font to your widget.

1. Click the T icon in the text editor, then click + Add a font.
   
2. In the font import settings, choose your Font Source:
   • From your website: Select this option if the font is already hosted on the same website as the widget.
   • Link to a font file: Provide the direct URL to the font file (for example .woff, .woff2, .ttf, or .otf).
   • Embed code: Insert the CSS code to import the font using @import or @font-face (from services like Google Fonts or Adobe Fonts). When pasting Google Fonts, only copy the code from @import to </style>.
3. Specify the Font family.
4. Click Preview & Add to instantly see how the font will look with your text.

You can also adjust the preview text and toggle italic display. You can select one or several font weights. Click Add to confirm. Once saved, your font appears in the Font family dropdown. You can apply the font to any text element and preview it in real time.

​

Use custom colors

With the eyedropper in the color picker panel, you can pick any color on the screen and use it in an element.

​

Set an element’s states

When you select an element, two tabs appear at the top of the editing menu: General and States. Select the States tab to find additional properties that let you edit the element’s states (Hover, Active, Disabled). For example, you can set a different font, background color, or border for an element’s hover state. When you click the General tab, your widget’s preview switches to the element’s default state. You can choose the element’s default state in the General tab.

​

Edit the HTML of a text element

Use the HTML code editor to change the markup of a text element, such as the strong tags around part of a message. To edit the HTML of a text element:

1. Select a text element.
2. In the Text content toolbar, click the three-dots menu, then click Code.
3. Edit the HTML in the code editor.