Button element
The Button element is a clickable call to action in a widget. On click it runs an action, such as opening a URL, closing the widget, going to another step or spinning a wheel of fortune, and any automations you've attached, such as tracking a conversion or applying a Shopify discount.
Available on: all platforms.
How it works
- The visitor clicks the button.
- If the click does something measurable (see Click tracking), Personizely records a widget click.
- The automations run, and then the action. If conditional actions are set, the first one whose conditions match the visitor replaces the default action.
New buttons get the Track widget conversion automation automatically, so a click counts as a conversion of the widget. Remove it from secondary buttons such as "No thanks". See Track widget conversion.
Configuration
Interaction tab:
Option | What it does | Values / default |
|---|---|---|
Action | What the click does | No action, Open URL, Close widget, Go to step, Spin the wheel (only when a Wheel of Fortune is on the same step) |
URL | Page to open (Open URL) | Any URL; supports dynamic text |
New tab | Opens the URL in a new tab | Off by default |
Step | Step to show (Go to step) | Any step of this widget |
Conditional actions | Alternative actions chosen by visitor fields | Optional, see below |
Automation | Side effects of the click | Track widget conversion added by default. See Automations |
Style tab: typography, background, border, radius, shadow, opacity, scale, size, layout, spacing, position, with separate hover, focus and active states. Then Device and Animation.
The button label is edited directly in the editor and supports dynamic text.
Conditional actions
Conditional actions are checked in the order shown; the first one whose conditions all match replaces the default Action. See Actions for how conditions work. For example: if the custom field Customer type is Wholesale, open /pages/wholesale; otherwise open /collections/sale.
Click tracking
A click is recorded as a widget click (and counted in the widget's Clicks metric) only when it does something measurable: the action is Open URL or Go to step, or the button has at least one automation. A button with No action, Close widget or Spin the wheel and no automations doesn't record a click. A spin records its own spin event instead.
Behavior details and limitations
- Open URL in a new tab closes the widget. The new tab opens and the widget closes in the original tab. In the same tab, the visitor simply navigates away.
- Dynamic text in URLs. https://example.com/?email={visitor.email} inserts the visitor's email into the link. Spaces and accented characters in values are encoded, but characters that have a meaning in URLs, such as &, + and #, aren't escaped.
- Go to step remembers the step. The next time this visitor sees the widget, it opens on the step they reached, until they convert or close it. See Steps.
- Spin the wheel appears only with a wheel on the same step. If you move the wheel to another step, change the button's action.
- Theme CSS can affect buttons. Some themes style every button or a on the page. Override it with the widget's custom CSS if the button looks different on your site.
Examples
- Two-button popup: "Yes, send my code" with Go to step → "Code" step and Track widget conversion; "No thanks" with Close widget and no automations.
- Discount on click (Shopify): a button with Close widget and the Apply discount automation, so the code is in the cart before the visitor reaches checkout. See Shopify automations.
- Personalized link: Open URL set to /collections/{visitor.customField[4] or 'all'}.