Summary
The Container is the outer layer of your message and controls overall position, size, and styling. Think of it as 'behind' everything else.
Styling settings are found in the Layout tab > Container section. You can then
Click on the dropdowns (Layout, Styles and Border) for more options.
You can also select the container by clicking the message's outer frame
You can also resize the container by dragging its blue border handles.
Size can be set manually or automatically based on content.
Placement settings can be found in the Settings tab
When to Use It
Use Container settings when you want to:
Adjust the size or shape of your message box
Set global background color, padding, and layout
Use the Settings tab when you want to:
Select the type of container (Collapsible, Dismissible, or Inline)
Control where your message appears on the screen
Select supported devices (Desktop, Mobile or both)
Manage language settings
How It Works
The Container wraps your entire message and sets the outer styling and layout. You'll know it's selected when you see the Container label at the top of your message.
The container controls:
Position on the page.
Width, height, and padding (manual or auto-sizing)
Stack direction of elements in the Container (horizontal or vertical)
Background color, opacity, and border
Alignment of content directly placed in the container (not in a Section)
Dismissible vs. collapsible options
Dismissible means a guest can close the message completely so it no longer appears.
Collapsible means a guest can minimize the message into a smaller bar that can be reopened.
Collapsed state styling for collapsible messages
Step-by-Step Instructions
1. Select the Container
Click on the outer edge of your message or use the layers panel to select the container. Look for the Container tag to confirm.
You can click and drag any of the blue handles around the border of the Container to manually resize it. The new dimensions will be reflected in the Size fields under the Styles tab.
Alternatively, you can set width and height to auto, which makes the container adjust automatically to fit your content. However, if you find that the message looks too large when both are set to auto, try switching one or both dimensions back to px for more precise control.
2. The layout tab
The Layout panel shows how your message is structured — including how containers, sections, and blocks are nested. When you click on Container you can edit the following:
Settings include:
Type: Choose whether the container is dismissible (can be closed) or collapsible (expand/collapse)
Size: Define width and height manually in pixels, or set to auto
Layout: Choose vertical or horizontal stacking of inner content. Vertical stacking creates a taller, portrait-style layout. Horizontal stacking places content side-by-side for a wider, landscape layout.
Alignment: Sets how content placed directly in the Container is aligned (left, center, right, top, middle, bottom). This can is superseded by alignment settings inside individual Sections.
Padding & Gap: Adjust space inside the container and between stacked elements
Background color: Use a solid color or brand-aligned hex code
Opacity: Adjust transparency of the background
Corner radius: Round the edges of your message container
Border: Add or remove border, change color and thickness
4. Open the Settings Tab
The Settings tab controls where the message sits on the page:
Type of message: Collaspible, Dismissable, or Inline
Widget Position Grid: Click to choose a corner or center alignment (e.g. bottom-right)
Distance from Edge: Fine-tune how far from page edges the message sits
Z-index: Adjust stacking order on the page (higher values bring it to the front)
Type of message: If you select Collapsible, you can then edit the Expanded and Collapsed versions by clicking back on the container in the Layout tab or by clicking on the outer frame of the message.
If the container is collapsible, you’ll also see a Collapsed state section where you can:
Toggle whether the direct price appears
Set collapsed font, text color, and background
Adjust opacity independently from the expanded view
Tip: By default, the z-index is set high enough (usually around 999) so your message overlays everything. You only need to change this if you know exactly what you want to show above or below your message. If you’re unsure, it’s best to leave the default in place.
5. Save Your Changes
Be sure to Save your changes before exiting the Campaign Builder.
Pro Tips
Start with a template, then tweak the container to suit your layout needs
When testing placement, use the preview function to ensure it doesn't interfere with other page elements
Use auto size when content length varies or you want a more adaptive layout
FAQs / Troubleshooting
Q: Why won’t my background color show?
A: A section inside the container might have its own background set, which can cover the container background.
Q: Can I use percentage values for width/height?
A: No. You can only set dimensions in px (pixels) or choose auto to let the container size itself automatically to fit your content.
Q: Can I resize the message by dragging?
A: Yes. Select the container and drag any of the blue dots around its edge. The updated dimensions will appear in the Styles panel.
Q: What happens if both container and section alignment are set?
A: The section alignment takes priority. This means any content inside that section will follow the section alignment, not the container alignment