Widget display options
Display options are the settings that apply to a widget as a whole rather than to one element: where it appears, how it animates, how visitors close it, its size and surface, when it runs, and any custom CSS or JavaScript. This page lists every widget-level option and where to find it.
Where the options are
Where | What you set there |
|---|---|
Builder → select the widget under Structure → Settings tab | Position, behavior, animation, Close on Esc, Ergonomic, placement |
Builder → widget → Style tab | Background, border, radius, shadow, size, overflow, margin |
Builder → Structure → Close button / Backdrop | The close button and the popup backdrop |
Builder → Global style | Heading and text fonts and colors for this widget |
Builder → Custom code | CSS and JavaScript for this widget variation |
Widget page | Status and schedule, triggers, rules, close triggers, goals |
Options in the builder belong to the variation you're editing, so in a widget A/B test each variation can have its own. Triggers and close triggers are also per variation. Rules, goals and the schedule are shared by all variations.
Settings tab
Option | Widget types | What it does | Values / default |
|---|---|---|---|
Position | Callout | Corner or edge the callout is anchored to | 8 positions. See Callouts |
Position | Bar | Top or bottom of the page | Top, Bottom |
Behavior | Top bar | How the bar shares space with the page | Fixed, Static, Fixed and on top. See Bars |
Animation | Popup, callout, bar | How the widget opens and closes | Popups and callouts: Fade, Slide (4 directions), Bounce vertical or horizontal, Zoom in, Zoom out. Bars: Fade, Slide down or Slide up |
Duration | Popup, callout, bar | Animation length | 0.1–2 s. Defaults: 0.6 s popups and callouts, 0.25 s bars, 0.2 s bounce |
Close on Esc | Popup, callout, bar | Esc closes the widget | On |
Ergonomic | Popup | Docks the popup to the bottom of screens up to 480 px wide | On |
Placement | Embedded | Embed code or a placeholder | Embeddable code. See Embedded widgets |
Style tab
Option | What it does | Values / default |
|---|---|---|
Background | Color, gradient or image, with size, repeat and position for images | From your branding |
Border, Border radius, Shadow | The widget's outline, corners and shadow | From your branding. Bars and embedded widgets start without shadow |
Width / Height | Widget size | Popup 600 px, callout 390 px, bar and embedded full width; height auto. Units px, %, vw or auto |
Overflow | Content larger than the widget | Visible, Hidden, Auto |
Margin | Space between the widget and the screen edges (or surrounding content, for embedded widgets) | 0–100 px. Popup 10 px, callout 20 px |
For element-level styling, see Style.
Close button
Popups, callouts and bars have a close button. Select Close button under Structure to edit it, or use its switch there to remove it.
Option | What it does | Values / default |
|---|---|---|
Side | Which top corner the button sits in | Left, Right |
Align | Bars only: vertical position | Top, Middle |
Offset | Distance from the corner | px, minimum -100 (negative values move it outside the widget) |
Label | Text announced by screen readers | Text |
Size | Width and height of the button | px |
Icon color | Color of the × icon | Color |
Background, border, radius, shadow, opacity, scale | The button's surface | Per state: default, hover, focus, active |
On screens up to 480 px wide, the close button is placed 8 px from the corner, whatever the offset, so it stays tappable.
Removing the close button and turning off Close on Esc leaves visitors with no way to close a popup except your own buttons. Only do this for flows that must be completed, such as an age gate.
Backdrop
Popups only. Select Backdrop under Structure to turn it on or off and to set what a click on it does (No action or Close widget), its background, opacity and blur. See Popups.
Global style
Global style in the builder's left toolbar sets the Heading font, Heading color, Text font and Text color for this widget. New widgets take these from your branding; changing them here affects only this widget.
Custom code
Custom code in the builder's left toolbar has a CSS tab and a JavaScript tab, per variation.
- CSS is added to the page while the widget is visible and removed when it closes. Use it to override styles your theme applies to the widget, or for effects the builder doesn't offer.
- JavaScript runs each time the widget is shown, after it's inserted into the page. It receives the same variables as the Execute JavaScript code automation: el (the widget's root element), variationId, type, visitor, close(), changeStep(stepId) and the cookie helpers.
// Close the widget when the visitor clicks a custom link inside it
el.querySelector('.no-thanks').addEventListener('click', (e) => {
e.preventDefault()
close()
})- Errors in your JavaScript don't break the page or the widget; they're only reported in the console with ?ply_debug=1.
- Custom JavaScript needs a Content Security Policy that allows it, and doesn't run when the Webflow integration is connected.
- <script> tags inside an HTML element don't run. Use this JavaScript tab instead.
Schedule and status
On the widget page, the status button starts, pauses, resumes, stops or Schedules the widget with a start and end date. The widget only shows between those dates, compared with the visitor's device clock. See Widgets overview.
Behavior details and limitations
- Animation durations also time the close. The widget is removed from the page when its closing animation ends.
- Changing a bar's position resets its animation to Slide down (top) or Slide up (bottom).
- Custom CSS isn't scoped automatically. Prefix selectors with the widget's root (for example .ply-widget[data-widget="5521"] .my-class) so they don't affect your site.
- Custom JavaScript runs on every show, including when the visitor reopens the widget from its teaser. Guard one-time setup with a flag if needed.