Popup Design Settings
Popup Design Settings allow you to control the appearance, size, position, and visibility of a popup. Use these settings to make sure your popup displays correctly on both desktop and mobile devices.
To learn more about working with the Design Editor, see Design Editor Overview.
To access the settings, select the popup on the canvas and open Custom settings for this step.
Desktop and Mobile Visibility
Use the Visibility settings to control where the popup appears.
- Desktop — displays the popup on desktop devices.
- Mobile — displays the popup on mobile devices.
Enable or disable each option depending on where you want the popup to appear.
Tip: Preview your popup on both desktop and mobile to make sure the layout works correctly on each device.
For more information about configuring individual elements for different devices, see Working with Components.
Display Delay
The Delay (sec) setting controls how long the system waits before displaying the popup.
Enter the desired delay in seconds.
Example: Setting the delay to 8 means the popup appears 8 seconds after the campaign step is triggered.
Display timing can also be configured as part of your campaign workflow. For more information, see Triggers and Building Workflows.
Border Radius
The Radius setting controls how rounded the popup's corners are.
0px— square corners.- Higher values — more rounded corners.
You can use the Per side option to configure the border radius individually for different sides when needed.
For more information about borders and other visual styling options, see Background and Visual Styling.
Border Width and Style
Use the Borders settings to customize the popup's border.
Width
Set the border width in pixels.
A value of 0px removes the visible border.
Style
Choose the border style from the available options.
Color
Use the Color setting to select the border color.
The Per side option allows you to apply different border settings to individual sides of the popup.
For more information about configuring borders, see Background and Visual Styling.
Drop Shadow
The Drop Shadow settings add a shadow around the popup to help separate it from the page.
You can choose a shadow style, including Custom, and adjust settings such as:
- Color — sets the shadow color.
- Opacity — controls how transparent the shadow is.
- Blur — controls how soft the shadow appears.
- Spread — controls how far the shadow extends.
- X — adjusts the horizontal shadow position.
- Y — adjusts the vertical shadow position.
The preview area shows how the selected shadow will appear.
For additional styling options, see Background and Visual Styling.
Popup Width and Height
The Size settings control the dimensions of the popup.
Enter values for:
- W — popup width.
- H — popup height.
You can also use the available sizing options to determine how the popup adapts to its container and content.
Full Width
Enable Full Width to make the popup use the full available width.
Use this option when the popup should stretch across the available horizontal space.
Hug Width
Enable Hug Width to make the popup width adapt to its content.
This is useful when you want the popup to remain only as wide as necessary for its contents.
Full Height
Enable Full Height to make the popup use the full available height.
Hug Height
Enable Hug Height to make the popup height adapt to its content.
Fit Content
Enable Fit Content to allow the popup to adjust its size based on the content inside it.
Tip: Use fixed width and height values when you need precise dimensions. Use the responsive sizing options when you want the popup to adapt automatically to its content or available space.
For more information about organizing and sizing campaign elements, see Managing Rows and Layout.
Padding
Padding controls the amount of space between the popup's edges and its content.
The settings include:
- V — controls vertical padding.
- H — controls horizontal padding.
Increasing the padding creates more space around the content, while reducing it creates a more compact popup.
You can combine padding settings with the layout options described in Managing Rows and Layout to create a balanced campaign layout.
Position
The Position control determines where the popup appears within the available screen area.
Use the position grid to select an anchor point:
- Top-left
- Top-center
- Top-right
- Center-left
- Center
- Center-right
- Bottom-left
- Bottom-center
- Bottom-right
Select the position that best fits your campaign design.
For example, choose Center to place the popup in the middle of the screen or Bottom-right to position it near the lower-right corner.
For additional positioning options, see the Additional Popup Settings section below.
Additional Popup Settings
The popup settings also include additional controls for more advanced positioning and appearance:
- Rotation — rotates the popup to the selected angle.
- H. Offset — adjusts the popup's horizontal position.
- V. Offset — adjusts the popup's vertical position.
- Opening effect — controls how the popup appears when displayed.
- Z-index — controls the popup's stacking order relative to other page elements.
These options can be used when you need more precise control over how the popup appears on the website.
Tip: Start with the basic size, position, padding, and visibility settings. Use offsets, rotation, and advanced options only when your design requires additional adjustments.
If you are configuring the content inside the popup, see Working with Content Blocks for information about adding and customizing elements.
If your popup contains multiple steps, see Configuring Campaign Steps to learn how to configure each step.
Once your popup design is ready, see Saving and Publishing a Campaign to learn how to save your changes and make the campaign live.