Summary
Every message is made up of containers, sections, and blocks.
Containers define overall size, placement, and background.
Sections let you visually structure content and apply some local styling.
Blocks are your actual message content (text, OTA price comparison, Call To Action button, etc).
The Three Building Blocks of Every Message
1. Container (Think: Message Wrapper)
The container is the outer frame that holds your message content. It sets the overall design foundation, including:
Size and orientation (horizontal/vertical)
Padding and margins
Background color/image
Placement on the page (e.g. center bottom)
Dismiss/collapse behavior
There's only 1 container for each message.
2. Sections (Think: Layout Rows or Columns)
Sections are areas you can add inside a container to:
Apply a separate background or layout (independent of the container)
Organize your content logically (e.g., headline, image, button)
Allow more granular padding and alignment control
You can add multiple sections to a message. Each one can have its own layout and design rules.
Tip: Sections are arranged as rows or columns. This is defined by the your container's "Stack" setting. Then content within each container can be stacked in the same way.
3. Blocks (Think: Content Units)
Blocks are the individual pieces of content you place in your message. This includes:
Text
Images or GIFs
OTA Price Comparison (Price Check)
Call To Action Buttons
Countdown Timers
Email Capture (coming soon)
You can place blocks directly into a container or inside a section, depending on how much design control you need.
Tip: Blocks behave differently depending on whether they’re placed directly in a container or within a section. For more styling control, use sections.
Pro Tips
Use sections to avoid styling conflicts between content blocks.
For layered design (e.g., image over a background), use a container + section combo.
Naming conventions: Containers = outer frame, Sections = areas arranged as rows or columns, Blocks = actual content.
Use the Advanced Settings toggle to access more style controls per element.
FAQs / Troubleshooting
Question: Why is my background color not showing correctly?
Answer: Check if a section is layered over your container and has its own background color.
Q: Can I resize a block individually?
A: Only within the bounds of its section or container. Use padding and alignment settings for precision.
Q: Can I reuse sections across messages?
A: Not yet, but saving message templates (coming soon) will make this easier.