> For the complete documentation index, see [llms.txt](https://doc.batch.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.batch.com/getting-started/features/customer-engagement-platform/content/composer.md). # 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](#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](/getting-started/features/customer-engagement-platform/message/personalization.md) 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: | Customization | Description | Value type | | ------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------- | | **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: | Customization | Description | Value type | | -------------------- | ----------------------------------------------------------------------------------------------------- | --------------------- | | **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: | Customization | Description | Value type | | ------------- | ---------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | | **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.

Fill display mode: left and right sides of the image are cropped

Fit display mode: image is fully visible, there are some empty
spaces at the top and bottom of the image

**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. | Customization | Description | Value type | | ------------- | ------------------------------------------------------------------------------------------------------ | --------------------- | | **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 {% hint style="info" %} **Note:** on In-App and Mobile Landing, the Fill space option of the Spacer block requires SDK version **3.1** or higher. {% endhint %} The Spacer block allows you to introduce customizable vertical space between content elements in your layout. | Customization | Description | Value type | | ------------- | ----------------------------------------------------- | ------------------- | | **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. | Setting | Description | Value type | | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------- | | **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: | Surface | Where dark mode is enabled | What the dark variant follows | | ------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------ | | 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. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://doc.batch.com/getting-started/features/customer-engagement-platform/content/composer.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.