ConvertSite
Elements

Dialog

The Dialog element shows content over the page in a centered pop-up or a slide-in panel, with an overlay behind it. Use it for sign-up prompts, announcements, and confirmations. You add it in the Site and Embed editors under Components, in the Layouts group; the Document editor does not include it. For a panel that opens next to a visible Base instead of over the page, use an Expandable box instead.

Add a Dialog

Add the Dialog element from the Components tab of the builder.

  1. Open Components and choose the Layouts group.

  2. Click Dialog to add it to the page, or drag it where you want it.

Add the Dialog's content to its panel: text, forms, images, and other elements. A Dialog cannot be nested inside another Dialog.

Position the panel

The Placement setting chooses where the Dialog appears:

  • Center: a centered pop-up.

  • Bottom left or Bottom right: a panel in a bottom corner.

  • Sheet left, Sheet right, or Sheet bottom: a panel that slides in from that edge.

The placement also sets the Dialog's built-in alignment and sizing.

Choose a transition

The Transition setting controls how the Dialog appears. The options are None, Auto, Fade, Scale up, Pop, Slide in from bottom, Slide in from left, and Slide in from right. Auto uses Scale up for non-sheet placements and the matching slide direction for sheet placements.

Any transition except None reveals Transition time, which accepts 0 to 1000 ms and defaults to Auto.

Open and close the Dialog with a click action

The Toggle dialog action on a Button or Link opens the Dialog, and closes it again on the next activation.

  1. Select the Button or Link that will open the Dialog.

  2. In the inspector, scroll to its click action group and click Add an action.

  3. Pick Toggle dialog from the picker, or type in the Search action field to find it.

  4. In the action's configuration panel, use the Dialog selector to choose the Dialog. Its placeholder reads Select a Dialog.

Activating another Dialog closes the one that is open, and an automatic open is ignored while another Dialog is active.

Open the Dialog automatically

The Automatic open setting defaults to None. Its options are None, After delay, After inactivity, and On exit intent.

  • After delay opens the Dialog after a wait. Delay defaults to 10 seconds and accepts at least 1 second. The timer pauses while the page is hidden and resumes with the remaining time.

  • After inactivity opens the Dialog when the visitor has not interacted for the Delay time. Mouse movement, clicks, keyboard input, and scrolling reset the timer, and it restarts when the page becomes visible again.

  • On exit intent opens the Dialog when the visitor's mouse pointer leaves the page through the top. This trigger is available for Sites, not Embeds, and is disabled while your site is framed, except in Preview.

  • Repeat appears for After delay, After inactivity, and On exit intent, and is off by default.

Open the Dialog when a visitor scrolls to a section

The Show on scroll setting opens the Dialog when a Section reaches a chosen point in the visitor's view.

  1. In Sections, pick the Section to watch.

  2. Set Location in view to Top, Center, or Bottom of the screen.

The Dialog opens when that Section reaches the chosen location. With Repeat on, it can open again after the Section leaves the view and re-enters it. When no other sections are available to pick, the section picker shows No other sections available.

How visitors close the Dialog

Click overlay to close is on by default. While it is on, visitors close the Dialog by clicking the overlay, pressing Escape, or, in a sheet placement, with a swipe on a touch device. If an input inside the Dialog has focus, Escape first removes the focus from the input.

Turn Click overlay to close off to disable these ways of closing. To give visitors a close button instead, add a Button or Link inside the Dialog with a Toggle dialog action that targets that same Dialog.

Style the Dialog

You style two parts: the wrapper, the area behind the panel, and the panel itself. The quick styles are Max width, Overlay, Blur, Wrapper padding, Background, Panel padding, Border radius, and Box shadow.

By default the overlay is translucent black with no blur, and the panel is white with 24px padding and a max width of 800px.

Use the Dialog state in formulas

The Dialog exposes a generated Visibility reference that formulas can read. It returns 1 while the Dialog is opening or open, and 0 while it is closing or closed. The reference only reports the state; it does not open or close the Dialog.

Was this helpful?
Was this helpful?