Composer
The composer is the drag-and-drop editor you use to build content in Batch. The same editor powers two surfaces:
In-App messages and Mobile Landings, displayed inside your mobile app.
Landing pages, standalone web pages hosted by Batch.
This page documents what the two surfaces share: how the editor behaves, which blocks are available, and the settings of each block. Everything that depends on the surface is documented on its own page. Message formats, close options and button actions belong to In-App & Mobile Landing. Page settings, form fields and button actions belong to Landing Pages & Forms.
How the composer works
You build your content by dragging blocks from the block list into the content area.
The width of the content area depends on the surface. An In-App message adapts to the device screen and to the format you selected. A landing page adapts to the available screen size, up to a maximum of 960px.
Available blocks
The following blocks are available on every surface: Text, Button, Image, Divider, Spacer and Columns.
Two more blocks collect data into a Batch Profile and are available on landing pages only: Field and Choice. Refer to form blocks.
Text
The Text block allows you to include textual content. On In-App messages and Mobile Landings, it supports personalization to dynamically insert profile specific information. Refer to personalization for more details. Landing pages do not support personalization: a visitor is only identified when they submit the form, so there is no profile data to insert while the page is displayed.
The following visual customization options are available for the Text block:
Margin
Configures the spacing around the text block, independently for top, bottom, left, and right sides.
0/XXS/XS/S/M/L/XL/XXL
Text alignment
Controls the horizontal alignment of the text within the block.
left/center/right
Color
Sets the color of the text.
Color
Font size
Sets the size of the text using predefined scale options.
XS/S/M/L/XL
Font decoration
Applies visual styles to the text. Multiple decorations can be selected simultaneously.
bold/italic/underline/strikethrough
Button
The Button block allows you to include interactive buttons in your layout.
Each button should contain text. The customization options for this text (font size, color, decoration) are inherited from the Text block and applied directly to the button label.
Buttons must also have an action associated with them, defining what happens when the user interacts with the button. The list of available actions depends on the surface: refer to button actions for In-App messages, and to button actions for landing pages.
The following visual customization options are available for the Button container itself:
Margin
Configures the spacing around the button block, independently for top, bottom, left, and right sides.
0/XXS/XS/S/M/L/XL/XXL
Padding
Configures the internal spacing between the button text content and its border.
0/XXS/XS/S/M/L/XL/XXL
Width
Sets the width of the button relative to its container.
Percentage
Button alignment
Controls the horizontal alignment of the button block within its parent container.
left, center, right
Button color
Sets the background color of the button, including opacity.
Color
Radius
Controls the roundness of the button corners.
Pixels
Border
Sets the thickness of the border around the button. Optional.
Pixels
Border Color
Sets the color of the border around the button, including opacity. Optional.
Color
Image
The Image block allows you to display images within your layout.
Images can be provided by uploading an image file directly or by referencing an image URL. Supported image formats are PNG and JPEG. Uploaded image files must not exceed 4MB in size.
An image can also carry an action, triggered when the user clicks it. On In-App and Mobile Landing, an image can carry the same actions as a button: refer to button actions. On a landing page, an image can redirect the visitor to a URL.
The following visual customization options are available for the Image block:
Margin
Configures the spacing around the image block, independently for top, bottom, left, and right sides.
0/XXS/XS/S/M/L/XL/XXL
Height
Sets the height of the image block. Explained below.
either auto, fill space or a custom number of pixels
Sizing
Controls how the image scales to fit within the block dimensions.
fill or fit
Radius
Controls the roundness of the image block corners.
Pixels
Height setting
The Height of the image block can be set to auto, fill space or a custom pixel value. When set to auto, the height is automatically determined based on the intrinsic aspect ratio of the image and the available width of the block container, ensuring the image is displayed without distortion. The custom option allows you to specify a fixed height in pixels.
The fill space option is available exclusively for Fullscreen In-App experiences. When you choose this, the image expands vertically to occupy all available space, dynamically adjusting to the device screen dimensions. If you have multiple images set to fill space, they each evenly share the remaining vertical space. Check how your images display across various screen sizes when using this setting, as images may not appear if the available screen space is insufficient.
Accessibility description
You can provide an accessibility description (alt text) for an image. This description should only be filled in if the image conveys information essential for understanding the content. This text is used by screen readers and other assistive technologies.
Image selection guidelines
Choosing the right images is key for an effective display on all devices. The wide variety of screens means a perfectly identical display everywhere is impossible. Follow these tips to optimize your images.
File specifications
Formats: use standard web formats, PNG or JPG.
Size: ensure images are lightweight for quick display, and do not exceed 4MB.
Minimum dimensions: aim for a minimum width of 640px to ensure good resolution.
Display modes (sizing)
You control the height of the Image block with the Height setting. The Sizing setting then controls how your image adapts to this block size. This setting only applies when the Height is set to a custom pixel value, not to auto.
Fill: the image scales proportionally to fill the entire block. This may crop parts of the image if aspect ratios do not match. A square file with a width of 1200px is a safe choice.
Fit: the image scales proportionally to be entirely visible within the block. Nothing is cut off. This may leave empty space on the sides if aspect ratios do not match.
Design recommendations
Put key information in Text and Button blocks. Do not put crucial messages only in the image. Text and buttons managed outside the image adapt better to various screens.
Image composition: avoid placing text or important elements near image edges to prevent cropping in Fill mode. Center the most important element in your image.
Dimensions and aspect ratio: there is no single ideal size. Landscape format images (2:1 or 3:1 ratios) work well for Fullscreen and Modal In-App formats, and for landing page headers. Portrait formats suit designs where the image is the main focus.
Divider
The Divider block allows you to insert a horizontal rule to visually separate content elements within your layout.
Margin
Configures the spacing around the divider block, independently for top, bottom, left, and right sides.
0/XXS/XS/S/M/L/XL/XXL
Width
Sets the width of the divider line relative to its container.
Percentage
Alignment
Controls the horizontal alignment of the divider line within its container.
left, center, right
Thickness
Sets the visual thickness of the divider line using predefined scale options.
XS/S/M/L/XL
Color
Sets the color of the divider line, including opacity.
Color
Spacer
The Spacer block allows you to introduce customizable vertical space between content elements in your layout.
Height
Sets the height of the spacer block. Explained below.
Pixels / Fill space
Height setting
Configures the vertical space of the spacer block. You can set a custom number of pixels. For Fullscreen In-App layouts, the Fill space option also allows the spacer to occupy all remaining vertical space, distributed evenly if multiple spacers are present.
Columns
The Columns block acts as an invisible container that allows you to arrange other blocks horizontally in multiple columns, supporting up to 5 columns. You can place any Text, Button, Image, Field or Choice block inside a Columns block.
Columns
Sets the number of vertical divisions within the block.
2 to 5
Sizing
Defines how the available horizontal space is distributed among the columns. Can be set to auto (equal distribution) or custom percentages, which must total 100%.
auto / custom sizing (in percentages)
Spacing
Sets the horizontal space between individual columns.
Pixels
Padding
Configures the internal spacing between the content and the column edges.
0/XXS/XS/S/M/L/XL/XXL
Content alignment
Controls the vertical alignment of blocks placed inside each column.
top, middle, bottom
Form blocks
Field and Choice are the two blocks that collect data. Field is a text input, Choice is a set of checkboxes or radio buttons. Adding one of them turns the page into a form, and the value the visitor enters is written to a Batch Profile on submission.
Because they only exist on landing pages, both blocks are documented in full, settings included, in Landing Pages & Forms.
Dark mode
The composer supports a dark variant of your content, which follows the device or browser setting of the recipient. When dark mode is enabled, you define separate color values for the light theme and for the dark theme, and you preview each mode directly in the composer.
Where you enable dark mode, and what the dark variant follows, differ per surface:
In-App and Mobile Landing
On the message itself, in the additional options of the composer.
The dark mode setting of the device.
Landing pages
In the Dark mode page setting, in the settings panel.
The dark mode setting of the browser or of the device.
Color picking
When configuring color options within the composer, click the color swatch next to a setting to open the color picker. This tool allows you to visually select a color, refine it using a spectrum slider, and choose from a list of recently used colors. The color code, in Hex format, is displayed and can also be directly entered or copied and pasted.
Last updated