In-app message editor blocks

Editor blocks are the various blocks available in the Drag-And-Drop Editor under the Build section. This section includes a series of tiles that represent the different kinds of content you can use in your message.

To use them, drag an editor block inside a column. It will auto-adjust to the column width. Each editor block has its own settings, such as granular control on padding. The right-side panel automatically switches to a property panel for the selected content element.

Types

The following table describes how you can use each editor block type.

Name	Description
Title	Enters a title text into the message
Paragraph	Enters a paragraph text into the message
Image	Inserts an image from the media library
Button	Adds a standard button. Properties for this block allow for editing, setting links, and logging analytics.
Spacer	Adds space or padding between other blocks.
Custom Code (early access)	Inserts raw HTML, CSS, and JS.

Properties

Details for each editor block’s properties are provided in the following tables.

Title and Paragraph

Name	Description
Font Family	This is the font style for your text
Font Weight	Determines the thickness of your text
Font Size	Determines the size of your text
Color	Modifies the color of the text
Align	Moves the text to be aligned left, center, right, or justified
Line Height	Modifies the distance between lines of text
Letter spacing	Modifies the distance in between each character

Image

Name	Description
Image Width	Modifies the width of the image and the chosen unit of measurement
Align	Moves the image to be left, center or right-oriented
URL	The hosted address for your image
Alternate text	The written copy that appears in place of an image if the image fails to load. Screen readers announce alt text to explain images, so use plain language to provide key information about an image

Button

Name	Description
Corner Radius	Determines how round you would like the corners
On-click Behavior	Determines the action when clicking the button and sets the appropriate link protocol
URL	Dynamic based on the selected On-click behavior

Spacer

Name	Description
Background color	Modifies the background color of the spacer
Height	Modifies the height of the spacer. You can also modify this by using the resize handles on the spacer.

Custom Code

Name	Description
Custom Code	Allows you to add, edit, or delete HTML, CSS, and JavaScript for an in-app message.