Customization

The widget builder gives you full control over the look and layout of every widget. This guide walks through each customization area.

Appearance

Click any element in the widget preview to select and edit it. Hover over the preview background to reveal the Widget pointer, which lets you edit the widget container itself.

!Widget appearance editor

Use the desktop/mobile preview toggle to switch between views and adjust the design for each screen size.

!Desktop and mobile preview toggle

Layout and Columns

Widgets are built with rows and columns. Drag and drop elements to rearrange them within the layout. Use the Columns tab to adjust column structure and spacing.

!Layout and columns editor

Widget Elements

Open the Elements tab to see all available elements. Drag any element into your widget to add it.

Some elements are unique — form fields and social buttons, for example — and can only appear once per widget step.

!Widget elements panel

Form Fields

Add default or custom input fields to your widget. Use the Required switch to make any field mandatory.

!Form fields overview

You can also add dropdown menus and radio button groups for structured input.

!Dropdown and radio button fields

!Radio button field options

Agreement fields let you add checkboxes for terms, consent, or other confirmations.

!Agreement field

Images

Set background images on the widget or on individual elements. Use the built-in file editor to crop, resize, and rotate images.

!Background image settings

!Image file editor

The Divider option lets you add visual separators between sections.

!Divider element

!Image element options

Widget Steps

Widgets can have multiple steps, allowing you to guide visitors through a sequence.

Callout Screen

The Callout step presents visitors with a Yes/No choice before showing the main form.

!Callout screen setup

Thank You Screen

The Thank You step appears after form submission. Use it to deliver a coupon code, redirect to a link, or grant access to content.

!Thank You screen setup

Using Your Own HTML

Drag the HTML Code element into your widget to add custom HTML.

!HTML Code element

Using Your Own CSS

To apply custom CSS to specific elements, use the Extra Class Name field available on each element's settings.

!Extra Class Name field

To target the entire widget with CSS, use the widget's ID selector. You can find the widget ID in the URL when editing the widget — for example, #widget7461.

!Widget ID in URL

When writing custom CSS, use the !important rule to override default styles.

!Custom CSS example

Need more help?

If you've worked through this and still need a hand, contact support — we'll dig in with you.