Configure Scene content

This information is for the Content step when creating a Scene.

Configuration workflow

The following is the general workflow for configuring Scene content:

1. Select the gear icon () in the left sidebar to configure settings that apply to the entire Scene. Follow the steps in Settings below.

2. Select the file icon in the left sidebar to configure each screen. Follow the steps in Screens below.

   

3. After completing configuration, select Done. You will then see a collapsed view of the screens. Select the arrows to page through each screen. Select Expand to see the screens side by side. The preview tools there are the same as when configuring content.

Preview tools

The device preview updates as you type and make selections. Use the tools in the header to adjust the preview.

Available tools:

Creating custom content layouts

Configure Scene content and save it as a reusable layout for new Scenes. When creating a new Scene, you can select from your custom layouts then edit for the current campaign. 250 layouts maximum.

1. Go to Content and select Scene Layouts.
2. Select Create layout.
3. Enter a name and description. Layout names do not have to be unique, so make sure to add a description.
4. Select Save.
5. Configure Screens and Settings.
6. Select Save layout.

You can also save any Scene’s content as a layout. You can even create a Scene using a default layout, edit the content, then save it as a custom layout. While editing the content of a Scene:

1. Select Save as layout.
2. Enter a name and description. Layout names do not have to be unique, so make sure to add a description.
3. Select Save.
4. If you do not need to send the current Scene, select the down arrow icon () next to Exit, then select Delete. Otherwise, complete content configuration.

To manage your custom layouts, go to Content and select Scene Layouts. Your last modified layout is listed first. You can search by layout name or description.

Options:

Settings

In the Content step of a Scene, select the gear icon () in the left sidebar to configure the following:

1. If Story mode is enabled, make sure to design screens for small device dimensions to eliminate the appearance of a non-functional scroll bar.

Screens

In the Content step of a Scene, select the file icon in the left sidebar to configure for each screen:

• Background color and media
• Content elements: Button, Button Group, Container, List, Media, NPS, Question, Text
• Setting a tag when the screen displays

To add a screen, select Add screen. You can reorder screens in the left sidebar. Select and hold the three dots icon () for a screen, then drag and drop to a new position. To duplicate or delete, select the three dots icon (), then select Duplicate or Delete. You cannot delete the only screen in a Scene.

Background color and media

When configuring each screen, the right side sidebar displays options to set background color and media.

The background color set here overrides the default project setting. Opacity determines the color transparency level. Select a Color SetA named pair of hexadecimal color values supporting device Light and Dark modes. Color sets can be selected for any color field in a scene and when configuring the default appearance of Scenes and In-App Automations. Dark mode is supported for Scenes only. or enter a hexadecimal color value, and then set the opacity percentage.

Background media supports images and video. Background video displays in portrait mode, starts automatically, and plays in a loop. (Orientation and behavior are different for video used in the Media element.) Video requires: iOS SDK 17+Android SDK 17+

To add background media, select the add icon () to enable, then set:

Set tag on display

To set a tag when the screen displays, enable Set a tag, enter the tag you want to set, then select from the list of returned tags or select Create new tag.

Set a screen action

You can set a behavior that occurs when a user taps/clicks the screen. The same options are available as when configuring actions for buttons, text, and images: Scene behavior, setting or removing a tag, and opting a user in to or out of a Subscription ListAn audience list of users who are opted in to messaging about a specific topic. Users can manage their opt-in status per list using a Preference Center.. An event name for the action is required.

Tap/click events are reported using the In-app button tap event in the format button-tap-<event name>. For example, if you enter Cat socks55 for any action, the event name in reporting will be button-tap-Cat socks55. Event names also support HandlebarsHandlebars is Airship’s templating language for personalization. Handlebars expressions use double curly braces wrapped around a content template, ranging from a simple variable, e.g., {{first_name}}, to complex evaluations of personalization data..

Enable Add an action, then follow the steps in Actions for in-app experiences. Also refer to the table of supported actions for screens.

Content elements

To add content elements, select the add icon (), then select one of:

• Button
• Button Group
• Container
• List
• Media
• NPS
• Question
• Text

See Configuring content elements below.

To make changes, hover over an element and select the edit icon (), the duplicate icon (), or the delete icon (). To go directly to editing an element, double-click its name in the left sidebar.

To reorder content elements within a screen or container, select and hold the drag handle icon () for an element, then drag and drop to a new position.

You can also reorder and move elements within a screen or container in the left sidebar. Toggle the caret icon () to expand and collapse the lists of each screen’s content elements and elements inside containers. Select and hold an element name and drag and drop to a new position.

For the Container element only:

• Navigation — In addition to selecting elements in the left sidebar, you can use the breadcrumbs above a screen’s content elements to navigate between containers and back to the root screen. For example, when editing a container nested in another container, the breadcrumbs appear as Screen > Container > Container.

• Fix at bottom on scroll — From the root screen, hover over a Container element and select the pin icon to keep the container visible at the bottom of the screen when the user scrolls. When pinning multiple containers, they appear in the order set when unpinned. To change their order, first unpin them, drag to a new order, then pin again.

  

Markdown styling

Markdown  is a markup language for formatting text. Scenes support basic Markdown, including bold, italics, strikethrough, and links. Use Markdown in text fields in any content element.

^{1. Links are not underlined and have the default link color of the platform where they are displayed. Web pages use blue unless overridden by CSS. iOS uses the app’s accent color. Android uses the theme’s linkTextColor.}

Design properties

When configuring content elements, you can edit their design properties in the right sidebar.

• For each button, first select a button style defined for your project, then edit properties.
• For Email, List, NPS, Question, and Text, first select a text style defined for your project, then edit properties.
  • For Question, properties for the question and answers are in separate sections.
  • For NPS, properties for the question, labels, scale unselected state, and scale selected state are in separate sections. The preview does not show the selected state, so you should verify its appearance on a device.

Additionally, you can set margins and size for all elements and determine how media fits for background media and List items.

See the Design property field reference below.

Media library

If your Airship plan includes CDN support, you can upload media or select from previously uploaded media when setting background media or List and Media content.

1. Select Upload, then Insert Media.
2. Select Choose file and select a file to upload or select from previous uploads.
   • The default sort order is most recent upload first.
   • You can search by file name or keyword.
   • A file preview appears after upload or selection. Select the play icon () to preview audio and video files.
3. (Optional) Add or edit keywords for the file to help organize your uploads.
   • Enter a term in the search field below the preview and select from results, or select Add keyword: [term].
   • Select the clear icon () to remove a keyword.
4. Select Insert selected media.

See also Media library. Contact Support  if you are interested in enabling CDN media hosting.

Configuring content elements

Follow the steps below when adding content elements to a screen.

Button or Button Group

Add a single button or up to five buttons in a group. When using multiple buttons in a screen, add single buttons if you want to place content between them, and use a button group to keep buttons together.

After configuring the first button in a group, select Add button for more. One Button Group is allowed per screen.

Set for each button:

Set for the Button Group element:

Container

Create a container for other content elements. Containers support nesting, so you can do things like place images side by side. Containers do not support NPS. See also Fix at bottom on scroll in the Content elements section on this page.

Immediately after selecting Container, select an element to add to that container. Use the breadcrumbs above the content elements to navigate between nested containers and back to the root screen.

To set the background color or add background media, select the add icon () to enable, then follow the same steps used for the screen background.

Additional settings for containers:

Email

Add an email address collection field. You must also configure a button or image using the Submit Responses action. Addresses are validated when entered and must include a top-level domain extension, such as .com, .edu, or .org. Use a Text element to add a title for the field.

Set for the Email element:

List

Add a bulleted list where the bullet is an image you provide. After configuring the first list item, select Add another for more.

Set for each list item:

Media

Add an image or video. 10 media elements maximum per screen.

Set for the Media element:

NPS

Net Promoter Score (NPS) is a survey type based on the net promoter score  metric, which measures how likely it is that your users would recommend your brand or product to a friend or colleague. This can be used to measure their overall sentiment about your brand or product (known as relational NPS) or about a specific experience or transaction, such as booking a flight (known as transactional NPS). The survey format is a question with answer scale 0-10.

Scenes support a single NPS survey, and you must configure a button or image using the Submit Responses action. NPS is not supported in Story mode.

Set for the NPS element:

Question

Scenes support up to 10 questions, and you must configure a button or image using the Submit Responses action. Questions are not supported in Story mode.

Set for the Question element:

To configure Store as Attribute:

1. Toggle to enable.
2. Search for and select an Attribute.
3. Enter a value next to each answer. The value must match the Attribute type (text or number). If empty, the response is not stored as an Attribute. You cannot use the same Attribute in multiple questions in a single Scene.

Text

Add up to 15 Text elements per screen.

Set for the Text element:

Design property field reference

Refer to these descriptions and configuration details when editing design properties.

Text properties for the Button, Button group, Email, List, NPS, Question, and Text elements:

Properties for each button, text or email input field, and for the selected and unselected states of the NPS scale, excluding text properties:

Additional properties:

Alignment impact

The alignment of content elements will not always be apparent in a screen’s layout. The impact on the screen layout depends on the elements added and the size settings for both the elements and the screen or Container.

For example, since a Container’s default height is Auto, aligning content elements vertically will not change the layout because the Container will always be the same height as the content. Similarly, if you have a Media element in a Container and the media fills 100% of the Container width, setting the media’s horizontal alignment will not change the layout.

Media scaling

When setting Size for Media, images scale as follows:

• If Width is 100% and Height is Auto, the image scales to fit the width of the viewable area.
• If the image is shorter than the viewable area, the image scales to fill the height of the area.
• If the image is taller than the viewable area, the image scales to fill the width of the area.

When an image is scaled to fit the width of a viewable area, the vertical Position setting determines if the image will be placed at the top, center, or bottom of the area. When an image is scaled to fit the height of a viewable area, the horizontal Position setting aligns the image to the left, center, or right of the area.