Templates are pre-designed widgets with a ready layout and structure. They help you launch faster while keeping full control over design, content, and behavior. This tutorial shows how to find templates in the widget library and customize one using Claspo’s drag-and-drop editor.
1. Choose a template in a library
Open the widget library and select a template that matches your goal. Templates come with predefined spacing, typography, and element placement.
Use filters to speed things up — for example, combine Use case, Features, and Layout (such as Grow Email List, Timer, and Pop-up) to surface templates that best fit your needs.
2. Customize the design and content in the editor
Use the drag-and-drop editor to adjust the template to your needs. You can simply drag elements on the canvas to rearrange components, change their order, and place them exactly where you want.
Also, you can easily switch between pop-up, floating box, and content-blocking layouts in the editor.
Right panel: Style and settings
When you click an element (or the widget itself), all available settings appear in the right-hand panel.
In the Style tab you can:
edit text, buttons, images, and fields;
change colors, fonts, sizes, and shapes;
upload your own images or use the built-in media library.
The General tab contains functional settings. Here you can configure element-specific logic.
For example:
For input fields such as Email, First name, or Text input, you can edit the placeholder text, manage field validation (enabled by default), adjust other settings depending on the field type.
For a Button, set the Action on click by choosing one of the available options (Submit form, Open widget page, Open URL, Launch another widget, Close current widget).
Left panel: Add components
From here, you can:
insert columns and adjust the widget structure.
add components such as buttons, fields, games, etc.
This allows you not only to restyle a template, but to fully adapt it to your use case.
Bottom panel: Pages
You can add extra pages to extend the widget flow — for example, to collect additional data after the initial action. A common use case is offering a higher discount in exchange for a phone number after a visitor has already submitted their email.
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. Customize them the same way as the main page.
Important
Success, Existing, and Error pages cannot be removed from widgets that include them by default.
If you need a widget without these pages, choose a different widget type during setup (for example, an Inform users widget instead of a sign-up form). You can learn more in Widget types.
All Claspo widgets are responsive by default. To double-check the mobile experience — or hide non-essential elements like images or social icons — you can switch to Mobile view at the top of the editor and make adjustments without affecting the desktop version.
3. Configure display rules
After finishing design and content edits in the editor, click Save to proceed. Then, define when and where the widget should appear. You can control triggers such as time delay, scroll depth, or page targeting to match user behavior and avoid interrupting visitors too early. See Display rules for the full list of available options.
4. Connect integrations
If your widget collects data, set up integrations on the next step. After setting up the display rules, link the widget to ESP or CRM to send collected data. For platform-specific setup instructions, see Integrations.
If you need full control over structure and layout, see How to create a widget from scratch.