Widget elements
Widget elements are the building blocks you drag into a widget step in the Personizely editor: text, buttons, forms, coupon codes, countdown timers, product recommendations, a wheel of fortune and more. Each element has its own settings, and the interactive ones can run an action (such as going to the next step) and automations (such as tracking a conversion or adding the visitor to a Klaviyo list).
Available on: all platforms. Products and Cart progress need Shopify (including Hydrogen) or Wix; unique discount codes and coupon auto-apply need Shopify (including Hydrogen).
All elements
Element | Use it for | Action | Automations run on | Platforms |
|---|---|---|---|---|
Titles, with a semantic heading level (H1–H6) | No | No | All | |
Paragraphs, captions and dynamic text | No | No | All | |
Pictures, GIFs, clickable banners | Yes | Click (once an action is set) | All | |
Calls to action, "No thanks" links, step navigation | Yes | Click | All | |
One-question polls saved to a visitor field | Yes | Submit | All | |
Email/SMS capture and lead forms | Yes | Submit | All | |
Vertical space between elements | No | No | All | |
A horizontal line | No | No | All | |
Links to your social profiles | No | No | All | |
YouTube, Vimeo, Dailymotion or MP4/WebM videos | No | No | All | |
An embedded Google Map of a place | No | No | All | |
Countdown to a deadline or for a fixed interval | Yes | Countdown reaches zero | All | |
Custom markup | No | No | All | |
Discount codes, copied on click, unique codes and auto-apply on Shopify | No | No | All (unique codes and auto-apply: Shopify) | |
Cross-sells, upsells, recommendations | Yes (Add, Replace, Pre-order CTAs) | CTA click | Shopify, Wix | |
Free shipping bars | No | Cart reaches the threshold | Shopify, Wix | |
Spin-to-win games | Per segment (outcome) | Spin, per landed segment | All | |
Grouping elements into rows and columns | No | No | All |
The elements that support automations are Button, Image, Survey, Form, Timer, Products, Cart progress and Wheel of Fortune. Every other element is display-only.
Actions and automations
- Action is what the element does for the visitor: No action, Open URL, Close widget, Go to step, or Spin the wheel (offered only when a Wheel of Fortune is on the same step). You can add Conditional actions that pick a different action based on visitor fields. See Actions.
- Automations are side effects that run at the same moment: tracking a conversion, sending a webhook or alert, adding the visitor to an email list, applying a Shopify discount, running a campaign, and so on. See Automations.
When you add a Button, Survey, Products or Form element, Personizely adds the Track widget conversion automation to it automatically. Removing it shows a warning, because without it the widget can't record conversions or attribute revenue to that element. See Track widget conversion.
Settings every element has
Each element's Style tab ends with two shared sections:
Option | What it does | Values / default |
|---|---|---|
Device: Show on | Shows the element only on phones, only on larger screens, or everywhere | Mobile, Desktop, All devices (default) |
Animation: Type | How the element enters when its step appears | None (default), Fade in, Slide up, Slide down, Slide left, Slide right, Zoom in |
Animation: Duration | Length of the entrance animation | 0.1–2 s |
Animation: Delay | Wait before the animation starts | 0–5 s |
"Mobile" means screens up to 480 px wide. Edits you make while the editor is in mobile view apply only to screens of that size. See Mobile behavior.
The rest of the Style tab (typography, background, border, size, layout, spacing, position, and hover, focus and active states) is shared across elements and described in Styling.
Behavior details and limitations
- Components. Complex elements are made of components you can select and style separately, for example a form's Label, Input and Submit, or a timer's Value, Unit and Separator. Components marked as optional can be turned off.
- Clicks are recorded only when they do something. A Button or Image click is sent as a widget click only when its action isn't No action, Close widget or Spin the wheel, or when it has automations. This keeps "No thanks" buttons out of your click counts.
- Dynamic text works in any text. You can use {visitor.firstName or 'there'} style placeholders in headlines, text, button labels, link URLs and image URLs. See Dynamic text.
- Widgets inherit some of your site's CSS. Widgets render directly in your page, so theme styles such as global font or link rules can affect elements. Use the widget's custom CSS to override them. See Widget settings.
- Some elements can stop a widget from showing. A Products element hides the whole widget when fewer products are found than it has product slots. See Products.