1. Create a new widget
Go to Widgets and click New widget. In the window that opens, select Start from scratch.
Select the use case (collect user data, inform users, or verify age) and layout type that match your goal (pop-up, floating box, floating bar, built-in, content blocking widget).
The use case defines what the widget does, while the layout controls how it appears on the page. If you’re not sure which layout to choose, see Widget layouts for guidance.
In Configure appearance, choose the widget structure and required components. Here you can:
select a structure preset (with or without an image, and its placement);
choose which components to include. For example, for collecting user data you might add title, text, name, email, and phone fields, while informer widgets typically use title, text, promo code, and a button.
Click Continue in builder to open the editor.
Important
The selected use case also defines which pages (such as Success, Existing, or Error) are included in the widget. These pages cannot be removed. If you don’t need them, go back and choose a different use case before continuing.
2. Design and add content in the editor
Click any element on the canvas to open its settings in the right panel. Use the Add component panel to add new elements.
For example, to add an image:
Click the Image component.
In the right panel, click Change.
Choose one of the following options:
upload your own image (PNG, JPEG, SVG, GIF, WebP, or AVIF, up to 3 MB);
select an image or icon from the built-in image library;
add an image via an external link.
You can also:
set a custom background;
adjust button shapes, colors, and styles;
configure fields;
add, remove, or rearrange components.
The General tab contains functional settings for the selected element. Here you can configure how a component behaves and how users interact with it.
For example, for the Phone field you can:
set the default country code;
define priority and allowed country codes to control which regions users can select;
manage field validation (enabled by default) to ensure correct input.
Available options vary depending on the selected component.
Important
The list of available components depends on the selected use case:
Inform users — supports text, images, containers, and buttons. Form fields and data-collection components are not available.
Collect user data — supports all components and form fields available in the editor.
Verify age — supports text, images, containers, and buttons.
You can add extra pages to extend the widget flow and control what users see at different stages. For example, you might collect an email on the first page and then offer a higher discount on an additional page in exchange for a phone number.
To add a new page, click + Page in the bottom panel. The editor will duplicate the page you’re currently on.
Some widgets include additional pages (for example, Signup, Success, Existing, Error). Use the page tabs at the bottom of the editor or scroll down to switch between pages and customize each one the same way as the main page.
You can also edit the mobile version separately. Switch between Desktop and Mobile views using the buttons at the top of the editor to fine-tune the layout and spacing for each device.
3. Configure display rules
Save your changes in the editor, then move on to the next step to define when and where the widget should appear. In the Triggering section, you can set triggers and targeting options — such as time delay, scroll depth, or specific pages — to control how the widget is shown.
See Display rules for the full list of available triggers and targeting options.
4. Connect integrations
If your widget collects user data, save your changes in the editor and proceed to the next step to connect integrations. In the Integrations section, you can link the widget to your marketing tools so submitted data is automatically sent to the right destination. See Integrations for platform-specific setup guides.
If you want to speed up the setup process, consider starting with a ready-made template instead — see Create a widget from a template.