# Native Experience editor

Use the Native Experience editor to build Scenes in the Scene composer.

<!-- PAGE: Native Experience editor, PATH: https://www.airship.com/docs/guides/messaging/editors/native/about/ -->

# Native Experience editor

> Use the Native Experience editor to add content to your Scene and determine appearance and behaviors.
The Native Experience editor is the built-in editor when [creating a Scene](https://www.airship.com/docs/guides/messaging/in-app-experiences/scenes/create/). It supports configuring appearance, behavior, and [Branching](https://www.airship.com/docs/reference/glossary/#branching).

## Configuration workflow

The following is the general workflow for configuring the Content step of a Scene:

1. Select the gear icon () in the left sidebar to configure behavioral settings that apply to the entire Scene. Follow the steps in [Scene behaviors](https://www.airship.com/docs/guides/messaging/editors/native/behaviors/).

1. Select the file icon () in the left sidebar to configure the appearance of your screens. Follow the steps in [Root appearance](https://www.airship.com/docs/guides/messaging/editors/native/root/) for settings that apply to all screens. For your screen content, you can choose any option:
   * [Provide custom HTML](#provide-custom-html)
   * Manually [Configure screens](https://www.airship.com/docs/guides/messaging/editors/native/screens/)
   * [Create AI-generated screens](#create-ai-generated-screens)
   ![Configuring screens in a Scene](https://www.airship.com/docs/images/scene-layout-grid_hu_f0b13f27fb574377.webp)
   
   *Configuring screens in a Scene*

1. (Optional) Select the branching icon () to create a custom user path through the screens. See [Scene branching](https://www.airship.com/docs/guides/messaging/editors/native/branching/).

1. (Optional) Select the accessibility audit icon () in the left sidebar to review and address accessibility issues in your Scene. See [Accessibility agent](#accessibility-agent).

1. 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](#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.

![Preview tools in the Scene composer](https://www.airship.com/docs/images/scene-preview-tools_hu_c44da9246b5abdd2.webp)

*Preview tools in the Scene composer*

Available tools:

| Tool | Description | Steps |
| --- | --- | --- |
| **App/Web format** | This tool displays the Scene as it will appear in an app or website. The buttons only appear when both App and Web are enabled. See [Audience](https://www.airship.com/docs/guides/messaging/in-app-experiences/scenes/create/#audience) in _Create a Scene_. | Select the grid icon for App or the globe icon for Web. |
| **Orientation** | This tool shows how the Scene will appear when the device or monitor is rotated. | Toggle the orientation icon. |
| **Light/Dark mode** | This tool shows the appearance of elements with an assigned [Color Set](https://www.airship.com/docs/reference/glossary/#color_set). Light Mode values appear in Dark Mode preview if no Dark Mode value was entered for a color set. | Toggle the selector. |
| **Text scaling** | This tool shows how the content will appear on devices using text size accessibility features. Scale between 70% and 200% of the current text size. | Select the text scale tool and set a scale. |
| **Device/Screen size** | This tool provides a more accurate representation of how your content will appear on a specific screen size. | Select a device or screen size. |
| **Interactive mode** | This tool enables testing the interactive elements of your Scene with all configuration panels hidden. You can swipe between screens or select buttons or other elements configured with Next or Previous actions. When [Story](https://www.airship.com/docs/reference/glossary/#story) mode is enabled, select the play icon (
) or pause icon (
) to test automatic screen transitions and background video playback. | Select the eye icon () to enter Interactive mode, then test your Scene. Select the reload icon to reset and return to the first screen. |
| **Preview Data** | For [personalized content](https://www.airship.com/docs/guides/personalization/about/), this tool displays the values for a selected user or your own JSON sample data. Otherwise, the preview displays the default values. See [Previewing personalized content](https://www.airship.com/docs/guides/personalization/previewing/). | Follow the steps in [Previewing personalized content](https://www.airship.com/docs/guides/personalization/previewing/). |

> **Tip:** For best results, always test your content on actual devices.


### Accessibility agent

[Agentic & Generative AI](https://www.airship.com/docs/guides/features/intelligence-ai/ai/)

![The accessibility agent showing an issue](https://www.airship.com/docs/images/accessibility-audit_hu_971902f2dae02559.webp)

*The accessibility agent showing an issue*

The accessibility agent automatically audits your content and identifies potential accessibility issues, such as insufficient color contrast, missing alternative text, and text size that falls below recommend minimums. Addressing these issues helps ensure your content is usable by the greatest number of audience members, including those with disabilities.

While editing screens, when an accessibility issue is found, a red dot appears on the accessibility audit icon () in the left sidebar. Select the icon to view the list of flagged issues. Each issue includes:
   * A description of the problem
   * The screen and element where it occurs
   * Guidance on how to address it
   * A button labeled with the recommended correction — *AI-powered corrections are labeled "Fix with AI"*

Select the button to apply the correction, and then verify each automatically applied fix to ensure it meets your needs and maintains your intended messaging.

You are responsible for reviewing all automatically applied fixes before launching your Scene. Automated fixes may not always align with your specific content requirements or brand guidelines. For comprehensive accessibility guidance and best practices, see [Accessibility in messaging](https://www.airship.com/docs/guides/messaging/accessibility-in-messaging/).

The following issues can be automatically fixed:

| Issue type | Description |
| --- | --- |
| **Insufficient color contrast** | These are color contrast ratio issues between content elements, such as indicator colors versus background colors. The agent presents issues for both light and dark modes. The fix adjusts colors to meet WCAG contrast ratio requirements. |
| **Text not marked as heading** | These are text items that visually appear to be headings, such as bold or larger font, but are not marked with a semantic H1-H6 tag. The fix applies an appropriate heading level based on the text's position and styling. |
| **No headings in screen** | This flags content if no Text elements are designated as headings (H1-H6). The fix suggests appropriate heading levels for Text elements that appear to be headings. |
| **Heading order** | This identifies and recommends fixes for out-of-order heading structure. The fix adjusts heading levels to create a logical hierarchy. |
| **Text size below minimum** | This is text that does not meet minimum readability recommendations. The fix adjusts the font size to meet accessibility standards. |
| **Images containing text** | This is any image that contains text, which screen readers cannot interpret. The fix adds or updates the alternative text field to describe the text within the image. |
| **Missing alternative text** | This is any image that lacks descriptive alternative text. The fix uses AI to generate descriptive alternative text for the image. |
| **Missing content descriptions or accessibility label associations on inputs** | These are input fields that lack content descriptions or accessibility label associations. The fix uses AI to generate content descriptions. For accessibility labels, the fix always generates a content description but does not suggest label relationships with text inputs. |
| **Missing content descriptions on buttons** | These are buttons that lack content descriptions. The fix uses AI to generate descriptive content descriptions for buttons. |

> **Note:** **Opting In to AI Functions**
> 
> If you opted out of AI usage, you must sign an updated contract to enable this feature. Contact your account manager for assistance.
> 
> **Compliance Considerations in Using AI Functions**
> 
> The Service incorporates AI functions, including Generative AI and Agentic AI.
> 
> Generative AI generates content such as Notification copy, images, and Journeys based on your prompts.
> 
> Agentic AI autonomously optimizes, personalizes, or executes cross-channel customer engagement actions, or analyzes audience and performance data, subject to the parameters and controls you set in the Service. These systems operate under human-defined parameters and do not initiate customer-facing actions without human interaction or pre-configured parameters. You are responsible for reviewing Generated Outputs for accuracy, appropriateness, and to ensure they do not violate third-party intellectual property or other rights. Airship does not publish Generated Outputs to end users without approval from the Customer.
> 
> In addition to the applicable terms of your agreement with Airship (e.g., Use of Service, Customer Responsibilities sections), you must comply with the [Airship Acceptable Use Policy](https://www.airship.com/legal/acceptable-use/), which provides additional details about appropriate conduct when using the Service.
> 
> The Service includes safety features to block harmful content, such as content that violates our Acceptable Use Policy. You may not attempt to bypass these protective measures or use content that violates your agreement with Airship.
> 
> About the AI models:
> 
> Airship utilizes Google Gemini and Imagen to generate copy and images for AI Scene screens. The content is created solely with Google's out-of-the-box models, and no customization or fine-tuning with Customer Data is applied. See [Responsible AI](https://cloud.google.com/responsible-ai?hl=en) in Google's *Google Cloud* documentation.

### Markdown styling

[Markdown](https://en.wikipedia.org/wiki/Markdown) is a markup language for formatting text. Scenes support basic Markdown. Use Markdown in text fields in any content element.

These styles [require minimum SDK versions](https://www.airship.com/docs/reference/messages/scene-sdk-minimums/#markdown-styling):

| Style | Syntax | Output |
|-------|--------|--------|
| **Bold** | `**Hello**` or `__Hello__` | **Hello** |
| **Italic** | `*Hello*` or `_Hello_` | *Hello* |
| **Strikethrough** | `~Hello~` | ~~Hello~~ |
| **Link**¹ | `[Hello](https://www.example.com/hello)` | [Hello](https://www.example.com/hello) |
| **Highlight** | `==Hello==` | <mark>Hello</mark> |
| **Subscript** | `H,{2},O` | H<sub>2</sub>O |
| **Superscript** | `x^^2^^` | x<sup>2</sup> |

<sup>1</sup> Links are not underlined and use the default link color for the platform: blue on web, unless overridden by CSS; the app's accent color on iOS; and the theme's `linkTextColor` on Android.

### Personalization

You can personalize Scene content using [Handlebars](https://www.airship.com/docs/reference/glossary/#handlebars) to display different text or media for each user. For example, you can display a question in different languages based on the user's locale Attribute. Common places to personalize include:

* Screen titles and descriptions
* Button labels
* Questions and NPS content
* Input field placeholders
* Media URLs

See [Personalization](https://www.airship.com/docs/guides/personalization/about/) for more information about using Handlebars in your content.

## Provide custom HTML

[iOS SDK 20.1+](/docs/docs/developer/sdk-integration/apple/ios-changelog/#20.1.0) [Android SDK 20.1+](/docs/docs/developer/sdk-integration/android/changelog/#20.1.0)

You can provide custom HTML for your Scenes instead of designing individual screens. After [selecting **Custom HTML** for your content](https://www.airship.com/docs/guides/messaging/in-app-experiences/scenes/create/#content), enter a publicly accessible URL. If your Airship plan includes CDN support, you also have the option to upload an HTML file.

Your HTML must be a single file containing all code. Any CSS, JavaScript, or images should be included inline or referenced via publicly accessible URLs.

Custom HTML Scenes have the following limitations:
* Native Scene features are not available, including [Branching](https://www.airship.com/docs/reference/glossary/#branching), [Story](https://www.airship.com/docs/reference/glossary/#story) mode, analytics tracking, or screen editing tools. All Scene logic, including multi-screen navigation, must be handled by your HTML and JavaScript.
* Outside of your code, the only onscreen element you can configure is the [Dismiss button](https://www.airship.com/docs/guides/messaging/editors/native/root/).
* Personalization is not supported.

## Create AI-generated screens

[Agentic & Generative AI](https://www.airship.com/docs/guides/features/intelligence-ai/ai/)

Use the Native Experience AI Agent to create and refine screens through a conversational chat interface. Generate individual screens or multi-screen experiences from a prompt or by uploading a mockup or wireframe. Modify your current screens by asking for edits or new content and images.

The agent supports the following capabilities:

* **Conversational editing and refinement** — Use natural language to iterate on designs. Request quick edits such as "Align the button to the left" or "Move my image below the heading," as well as more extensive edits and additions.
* **Brand and style integration** — Provide feedback to match the styles in your [brand guidelines](https://www.airship.com/docs/guides/messaging/features/brand-guidelines/), such as "Make the button use my 'Primary' button style" or "Change the background to 'Secondary'."
* **Design capabilities** — The agent handles button actions, borders, corner radius, and color matching to ensure accurate and functional output, giving you creative control when using AI to design Scenes.
* **Image generation** — Generate original images directly based on a prompt or the Scene's purpose.

Using the agent provides significant advantages, directly addressing common challenges in design and development:

* **Effortless recreation of complex designs** — AI streamlines the process of bringing intricate designs from static images or wireframes to life, aiding in accuracy and consistency.
* **Automated implementation** — AI handles the grunt work of configuring content elements, matching design layouts, styles, and interactive components.
* **Accelerated time to value** — By automating the screen generation process, AI drastically speeds up campaign development, enhancing agility and getting your projects to market faster.

You can use the agent when editing screens:

1. Select ** Native Experience AI Agent**.
1. Enter text describing your desired screen and/or select the upload icon () and choose a file. When uploading files:
   * Supported file formats: PNG, JPG, JPEG, GIF, and SVG.
   * The generated content attempts to recreate the uploaded file's content.
   * If the text and buttons in the files match the styles in your [brand guidelines](https://www.airship.com/docs/guides/messaging/features/brand-guidelines/), those styles will be applied. Otherwise, the system will try to match the hexadecimal color values from your file.
   * Explicit content is excluded.
1. Select the submit icon (
) to submit and generate the screen content.

After each generation completes, you can repeat these steps to continue editing. When you are finished using the agent, select the close icon (). Your chat history persists in the current editing session, so you can close and reopen the agent without losing your chat. Select the delete icon () to clear your chat history at any time.

When the content meets your needs, you can further refine the screens by [configuring the content elements](https://www.airship.com/docs/guides/messaging/editors/native/elements/).

> **Note:** **Opting In to AI Functions**
> 
> If you opted out of AI usage, you must sign an updated contract to enable this feature. Contact your account manager for assistance.
> 
> **Compliance Considerations in Using AI Functions**
> 
> The Service incorporates AI functions, including Generative AI and Agentic AI.
> 
> Generative AI generates content such as Notification copy, images, and Journeys based on your prompts.
> 
> Agentic AI autonomously optimizes, personalizes, or executes cross-channel customer engagement actions, or analyzes audience and performance data, subject to the parameters and controls you set in the Service. These systems operate under human-defined parameters and do not initiate customer-facing actions without human interaction or pre-configured parameters. You are responsible for reviewing Generated Outputs for accuracy, appropriateness, and to ensure they do not violate third-party intellectual property or other rights. Airship does not publish Generated Outputs to end users without approval from the Customer.
> 
> In addition to the applicable terms of your agreement with Airship (e.g., Use of Service, Customer Responsibilities sections), you must comply with the [Airship Acceptable Use Policy](https://www.airship.com/legal/acceptable-use/), which provides additional details about appropriate conduct when using the Service.
> 
> The Service includes safety features to block harmful content, such as content that violates our Acceptable Use Policy. You may not attempt to bypass these protective measures or use content that violates your agreement with Airship.
> 
> About the AI models:
> 
> Airship utilizes Google Gemini and Imagen to generate copy and images for AI Scene screens. The content is created solely with Google's out-of-the-box models, and no customization or fine-tuning with Customer Data is applied. See [Responsible AI](https://cloud.google.com/responsible-ai?hl=en) in Google's *Google Cloud* documentation.


<!-- /PAGE: Native Experience editor -->

<!-- PAGE: Scene behaviors, PATH: https://www.airship.com/docs/guides/messaging/editors/native/behaviors/ -->

# Scene behaviors

> Control how users navigate and dismiss a Scene, including swipe, story mode, and safe area settings.
These optional settings apply to the entire Scene and control how users interact with it. Configure them during the Content step when [creating a Scene](https://www.airship.com/docs/guides/messaging/in-app-experiences/scenes/create/) by selecting the gear icon () in the left sidebar.

## Close on shade tap

This setting controls whether users can close a non-fullscreen Scene by tapping the area surrounding it.

To enable the setting, check the box for **Close on shade tap**.

## Respect safe area

This setting controls whether Scene content stays within the safe area, the portion of the screen not covered by physical or UI elements like a status bar or notch. It is enabled by default.

To disable the setting, uncheck the box for **Respect safe area**. Content will extend to the full height and width of the device.

## Enable swipe

This setting controls whether users can swipe between screens in Scenes with multiple screens. It is enabled by default and cannot be enabled when Story mode is enabled.

To disable the setting, uncheck the box for **Enable swipe**. Users must interact with buttons to navigate between screens.

## Story mode

Story mode advances screens automatically without requiring swiping. For more about the feature, see [Story mode](https://www.airship.com/docs/guides/features/messaging/scenes/surveys-stories/#story-mode) in *About Scenes*.

Each screen displays for 1 to 60 seconds. When the last screen finishes, the Scene can end in one of three ways:

* **Loop** replays the Scene indefinitely
* **Display last screen** continues to display the last screen
* **Dismiss** closes the Scene

Story mode does not support scrolling, [questions](https://www.airship.com/docs/guides/messaging/editors/native/elements/#question), [NPS](https://www.airship.com/docs/guides/messaging/editors/native/elements/#nps), or [Branching](https://www.airship.com/docs/reference/glossary/#branching). The option is disabled when using custom HTML, if the Scene contains questions or NPS, or if branching is configured.

When Story mode is enabled, the [screen-level Play control for background video](https://www.airship.com/docs/guides/messaging/editors/native/screens/#video-controls) is not available. Instead, enable **Play control** when [setting the root appearance](https://www.airship.com/docs/guides/messaging/editors/native/root/) to pause or resume both Story progression and background video playback.

To enable the setting, select the add icon () for **Story mode**, then enter the number of seconds to display each screen and select an ending. To disable, select the remove icon (
).

> **Tip:** When Story mode is enabled, design screens for small device dimensions to eliminate the appearance of a non-functional scroll bar.


<!-- /PAGE: Scene behaviors -->

<!-- PAGE: Root appearance, PATH: https://www.airship.com/docs/guides/messaging/editors/native/root/ -->

# Root appearance

> Configure appearance settings that apply to all screens, including dimensions, borders, shade, dismiss button, indicators, and navigation controls.
These appearance settings apply to all screens. Configure them during the Content step when [creating a Scene](https://www.airship.com/docs/guides/messaging/in-app-experiences/scenes/create/) by selecting the file icon () in the left sidebar, and then selecting **Root** from the list of screens. Configure the settings in the right sidebar.

![Setting the root appearance for a Scene](https://www.airship.com/docs/images/scene-configure-root_hu_cb8085428b5d8a9e.webp)

*Setting the root appearance for a Scene*

First, select a [view style defined in your project settings](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/defaults/#scene-defaults).

To add or edit [conditional design overrides](https://www.airship.com/docs/guides/features/messaging/scenes/conditional-design-overrides/), select the external link icon (
) next to **View style** and follow step 5 in [Set fullscreen and modal view styles](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/defaults/#set-fullscreen-and-modal-view-styles) in *In-App Experience Defaults*. The settings will apply to the current message only.

Next, configure design properties:

| Setting | Description | Steps |
| --- | --- | --- |
| **Width and Height** | The width and height of the Scene in pixels or as a percentage of the screen size. | Enter a numeric value and select a value type of percentage or pixels. |
| **Border color and opacity** | The color and transparency level of the Scene border. Only apparent when Height and Width are set to less than 100%. | Select a [Color Set](https://www.airship.com/docs/reference/glossary/#color_set) or enter a hexadecimal color value, and then set the opacity percentage. |
| **Border size** | The size of the Scene border in pixels. Only apparent when Height and Width are set to less than 100%. | Enter a numeric value. |
| **Border radius** (Embedded Content view styles) | Governs rounding the Scene's corners. Only apparent when height and width are set to less than 100%. [iOS SDK 19.6+](/docs/docs/developer/sdk-integration/apple/ios-changelog/#19.6.0) [Android SDK 19.9+](/docs/docs/developer/sdk-integration/android/changelog/#19.9.0) | Enter an integer from 0 to 100. |
| **Border radius** (Modal and fullscreen view styles) | Governs rounding the Scene's corners. Only apparent when Height and Width are set to less than 100%. For Top-positioned views, this applies to the bottom corners only. For Bottom-positioned views, this applies to the top corners only. | Enter an integer from 0 to 100. |
| **Shade color and opacity** | Required for non-fullscreen Scenes. The color and transparency level of the device screen surrounding a non-fullscreen Scene. Overrides the default color. | Select a [Color Set](https://www.airship.com/docs/reference/glossary/#color_set) or enter a hexadecimal color value, and then set the opacity percentage. |
| **Dismiss button** | Optional. Determines the presence of the "X" button used to close the Scene. When enabled, you can override the default color. Opacity determines the color transparency level. | Select the add icon () to enable. Select a [Color Set](https://www.airship.com/docs/reference/glossary/#color_set) or enter a hexadecimal color value for the button color, and then set the opacity percentage. Select the remove icon (
) to disable. |
| **Indicators** | Optional, for Scenes with multiple screens only, enabled by default. Determines the presence of the dots indicating the number of screens. When enabled, you can override the default colors of the active and inactive screens. Opacity determines the color transparency level.<p>Indicators cannot be hidden when [Story mode](https://www.airship.com/docs/guides/messaging/editors/native/behaviors/#story-mode) is enabled, ensuring the appearance of the progress bar that indicates the number of screens and their remaining duration. The progress bar is displayed using the Inactive color only. The option is disabled when using custom HTML. | Select the add icon () to enable. Select a [Color Set](https://www.airship.com/docs/reference/glossary/#color_set) or enter a hexadecimal color value for Active and Inactive, and then set the opacity percentage. Select the remove icon (
) to disable. |
| **Navigation control** | Optional. Displays left and right arrows for navigating between screens. This also supports navigation using keyboards and assistive technology. [iOS SDK 20.1+](/docs/docs/developer/sdk-integration/apple/ios-changelog/#20.1.0) [Android SDK 20.1.1+](/docs/docs/developer/sdk-integration/android/changelog/#20.1.1) | Select the add icon () to enable. Select a [Color Set](https://www.airship.com/docs/reference/glossary/#color_set) or enter a hexadecimal color value for the Background and Icon colors, and then set the opacity percentage. Select Size and Alignment. Select the remove icon (
) to disable. |
| **Play control** | Optional. Displays a button to play or pause automatic screen transitions. If a screen contains background video, this control also pauses or resumes background video playback. It also adds support for control using keyboards and assistive technology. Available only when [Story mode](https://www.airship.com/docs/guides/messaging/editors/native/behaviors/#story-mode) is enabled. [iOS SDK 20.1+](/docs/docs/developer/sdk-integration/apple/ios-changelog/#20.1.0) [Android SDK 20.1.1+](/docs/docs/developer/sdk-integration/android/changelog/#20.1.1) | Select the add icon () to enable. Select a [Color Set](https://www.airship.com/docs/reference/glossary/#color_set) or enter a hexadecimal color value for the Background and Icon colors, and then set the opacity percentage. Select Size and Alignment. Select the remove icon (
) to disable. |
| **Direction** | Determines whether content elements within a screen are arranged vertically or stacked. Vertical arrangement enables scrolling. Stacking arranges elements on top of each other, front to back. The first added element is at the bottom of a stack (furthest back), and the last is on top (front). | Select a direction. To rearrange the order of stacked elements, select and hold the drag handle icon () for an element, then drag and drop to a new position. |
| **Margins** (Embedded Content view styles) | Determines the spacing between the Scene and its parent bounds. Only apparent when Height and Width are set to less than 100%. See information about parent bounds in [Set Embedded Content view styles](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/defaults/#set-embedded-content-view-styles) in *In-App Experience Defaults*. | Enter a numeric value for each margin. |
| **Margins** (Modal and fullscreen view styles)<sup>1</sup> | Determines the spacing between the Scene and the screen's edges. Only apparent when Height and Width are set to less than 100%.<p>Margins are applied in combination with the Position set for the view style. For example, for a modal Web Scene set to the bottom right position, set a margin to create a gap between the Scene and the window edges. To set a Position, see the [View styles field reference](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/defaults/#view-styles) in *Setting Scene defaults*. | Enter a numeric value for each margin. |

<sup>1. Setting both margins and a border in the same Scene requires minimum Android SDK 19.</sup>


<!-- /PAGE: Root appearance -->

<!-- PAGE: Configuring screens, PATH: https://www.airship.com/docs/guides/messaging/editors/native/screens/ -->

# Configuring screens

> Configure individual screens in the Native Experience editor, including background media, tags, actions, content elements, and AI-generated content.
Configure screens in the Content step when [creating a Scene](https://www.airship.com/docs/guides/messaging/in-app-experiences/scenes/create/) by selecting the file icon () in the left sidebar and then selecting one from the list. To add more, select ** Add screen** in the left sidebar. Scenes can have up to 20 screens.

For each, you can configure the following:

* [Set background color or media](#set-background-color-and-media) that appears behind the content elements.
* [Add content elements](#add-content-elements).
* [Set a tag](#set-a-tag) on the user when it displays.
* [Add an action](#add-an-action) that occurs when the user interacts with it.

![Configuring a new screen in a Scene](https://www.airship.com/docs/images/scene-screens_hu_9d2906369bcd705a.webp)

*Configuring a new screen in a Scene*

## Managing screens

Manage screens in the left sidebar:

| Option | Steps |
| --- | --- |
| **Rename** | Select and hold the three dots icon (
) for a screen, select **Rename**, enter a new name. |
| **Reorder** | Select and hold the three dots icon (
) for a screen, then drag and drop to a new position. |
| **Duplicate or delete** | Select the three dots icon (
) for a screen, then select **Duplicate** or **Delete**. You cannot delete the only screen in a Scene. |
 
## Set background color and media

![Screen background options](https://www.airship.com/docs/images/scene-background-color_hu_c20c273d7c1708bc.webp)

*Screen background options*

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

### Background color

The background color set here overrides the [default project setting](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/defaults/#scene-defaults).

To set a background color:

1. Select the add icon () for **Background color**.
1. Select a [Color Set](https://www.airship.com/docs/reference/glossary/#color_set) or enter a hexadecimal color value, and then set the opacity percentage.

### Background media

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](https://www.airship.com/docs/guides/messaging/editors/native/elements/#media).

To set background media:

1. Select the add icon () for **Background media**, then enter a URL of an image or video to use as the background. URLs must be HTTPS and accessible by your mobile audience.
   <p>If your Airship plan includes CDN support, you can also upload media or select from previously uploaded media. See <a href="https://www.airship.com/docs/guides/messaging/features/media/#insert-media-in-message-content">Insert media in message content</a> in <em>Media library</em>.</p>
1. Select a Fit: Crop, Center crop, or Center inside. If you select Crop, also set a Position. For details about these settings, see [Media properties](https://www.airship.com/docs/guides/messaging/editors/native/design-properties/#media-properties) in *Design properties*.

### Video controls

[iOS SDK 20.6.2+](/docs/docs/developer/sdk-integration/apple/ios-changelog/#20.6.2) [Android SDK 20.5+](/docs/docs/developer/sdk-integration/android/changelog/#20.5.0)

If using background video, you can add play/pause and mute/unmute buttons to the screen, set their placement, and style their appearance. The Play control is not available in [Story](https://www.airship.com/docs/reference/glossary/#story) mode. Instead, use the [Play control setting for the root appearance](https://www.airship.com/docs/guides/messaging/editors/native/root/).

To add video controls:

1. Select the add icon () for **Video control**. Both **Play control** and **Audio control** are added by default. You can select the remove icon () to hide either.
1. Set the controls' alignment within the screen, as well as the background color and opacity. For each enabled control, set the size, as well as the icon color and opacity. For details about these settings, see [Media properties](https://www.airship.com/docs/guides/messaging/editors/native/design-properties/#media-properties) in *Design properties*.

## Set a tag

![Setting a tag on screen display](https://www.airship.com/docs/images/scene-set-tag_hu_9c7ada687c5953cd.webp)

*Setting a tag on screen 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**.

## Add an action

[iOS SDK 18.12+](/docs/docs/developer/sdk-integration/apple/ios-changelog/#18.12.0) [Android SDK 18.4+](/docs/docs/developer/sdk-integration/android/changelog/#18.4.0)

![Configuring an action for a screen](https://www.airship.com/docs/images/scene-add-action_hu_f9cbee0a830afc65.webp)

*Configuring an action for a screen*

You can set a behavior that occurs when a user taps/clicks the screen. You can also:

* Set a Scene behavior
* Set or remove a tag
* Opt a user in to or out of a [Subscription List](https://www.airship.com/docs/reference/glossary/#subscription_list)
* Emit a [Custom Event](https://www.airship.com/docs/reference/glossary/#custom_event)

Tap/click events are reported using the [In-app button tap event](https://www.airship.com/docs/developer/rest-api/connect/schemas/events/#in-app-button-tap) in the format <code>button-tap-&lt;event name&gt;</code>. For example, if you enter <code>Cat socks55</code> for any action, the event name in reporting will be <code>button-tap-Cat socks55</code>. Event names also support [Handlebars](https://www.airship.com/docs/reference/glossary/#handlebars).

Enable **Add an action**, then follow the steps in [Actions for in-app experiences](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/button-actions/). Also refer to the table of [supported actions for screens](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/button-actions/#actions). An event name for the action is required.

## Add content elements

To add content elements, select the add icon (
) and make a selection. See [Configure content elements](https://www.airship.com/docs/guides/messaging/editors/native/elements/) for detailed steps.

![Add and manage content elements](https://www.airship.com/docs/images/scene-content-add_hu_6db4648151e288ba.webp)

*Add and manage content elements*

After adding content elements, you can manage them in the center panel and left sidebar:

| Option | Steps |
| --- | --- |
| **Edit, duplicate, or remove** | Hover over an element and select the edit (), copy (), or delete icon (). To go directly to editing an element, double-click its name in the left sidebar. |
| **Fix container at bottom on scroll** | 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. You cannot pin Containers nested inside other Containers. |
| **Reorder or move** | To reorder content elements within a screen, select and hold the drag handle icon () for an element, then drag and drop to a new position.<p>To 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. |

### Container navigation

To navigate between Containers and back to the root screen, you can select them in the left sidebar or use the breadcrumbs above a screen's content elements in the center panel. For example, when editing a container nested in another container, the breadcrumbs appear as `Screen > Container > Container`:

![Navigating Containers using breadcrumbs](https://www.airship.com/docs/images/scene-container-navigation_hu_16faacb44224e2e7.webp)

*Navigating Containers using breadcrumbs*

## Providing disclosures and other required information

It is important to state or link to necessary disclosures and other legal information within your communications to ensure regional regulation compliance and transparency with your users. For [SMS](https://www.airship.com/docs/guides/messaging/editors/native/elements/#sms), this includes disclosure of added SMS fees. For [Email](https://www.airship.com/docs/guides/messaging/editors/native/elements/#email), this may include disclosure requirements for email collection for marketing purposes.

While the exact placement is flexible, make sure the disclosure text and links are easily discoverable on the screen. Common and effective locations include next to an input field or prominently in the screen footer.

Use the [Text element](https://www.airship.com/docs/guides/messaging/editors/native/elements/#text) to add information that should appear on the current screen.

* To add a link for a selected portion of the text, use [Markdown styling](https://www.airship.com/docs/guides/messaging/editors/native/about/#markdown-styling).
* To make the entire text block function as a link, select **Add action** when configuring the Text element, choose **Web Page** or **Deep Link**, and enter the URL for the additional information. See the following in *Actions*:
   * [Web Page](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/button-actions/#web-page)
   * [Deep Link](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/button-actions/#deep-link)

> **Important:** When collecting phone numbers or email addresses using Scenes functionality, customers are responsible for ensuring compliance with all applicable regulations. This includes providing appropriate disclosures and obtaining necessary consent as required by law. Customers should include links to their SMS program terms and/or privacy policy as applicable to their specific use case and jurisdiction.



<!-- /PAGE: Configuring screens -->

<!-- PAGE: Configure content elements, PATH: https://www.airship.com/docs/guides/messaging/editors/native/elements/ -->

# Configure content elements

> Configure content elements for Scenes, including buttons, containers, media, text, questions, NPS, and input fields.
Configure content elements after [adding them to a screen](https://www.airship.com/docs/guides/messaging/editors/native/screens/#add-content-elements). For each element, configure its settings in the center panel and its [design properties](https://www.airship.com/docs/guides/messaging/editors/native/design-properties/) in the right sidebar.

![Configuring the Text content element and its design properties](https://www.airship.com/docs/images/scene-configure-content_hu_7e85b6ac40a20bc4.webp)

*Configuring the Text content element and its design properties*

## Button or Button Group

![Configuring the Button Group content element in a Scene](https://www.airship.com/docs/images/scene-button-group_hu_a4f3c13f26eab174.webp)

*Configuring the Button Group content element in a Scene*

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:

| Field or setting | Description | Steps |
| --- | --- | --- |
| **Text** | Required. The button label. | Enter text. |
| **Content description** | Optional. Text to be announced by assistive technology such as screen readers. It is announced after the button label text. | Enter text. |
| **Loading state text** | Optional, appears only for buttons using the [Validate Form](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/button-actions/#validate-form) or [Submit Responses](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/button-actions/#submit-responses) action. The text momentarily replaces the button label text while the action occurs. Example loading state text: "Processing", "Processing...", "Submitting now!". | Enter text. |
| **Action** | Required. The behavior that occurs when a user taps/clicks the button. You can also add or remove a [Tag](https://www.airship.com/docs/reference/glossary/#tag), emit a [Custom Event](https://www.airship.com/docs/reference/glossary/#custom_event), and/or opt a user into or out of a [Subscription List](https://www.airship.com/docs/reference/glossary/#subscription_list) when they tap the button. | Select and configure an action and options. Follow the steps in [Actions for in-app experiences](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/button-actions/). |
| **Action: Scene behavior** | Optional. Determines how the Scene behaves when a user taps the button: **No action**, **Next screen**, **Previous screen**, **Dismiss** (closes the Scene), or **Dismiss and cancel Repeat** (closes the Scene and overrides the [Repeat setting](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/optional-features/#repeat-this-message)). <p>Scene behavior is not available for the button actions Dismiss Message, Next, and Previous. The Preference Center and Deep Link button actions have Scene behavior options **Dismiss** and **Dismiss and cancel Repeat** only, with default behavior **Dismiss**. For all other button actions, all Scene behaviors are available, with default behavior **No action**. | Select a behavior. |
| **Action: Event name** | Optional. A specific event name for tracking link clicks/taps. By default, the total taps/clicks for all buttons and text configured with an action in a Scene are reported using the [In-app button tap event](https://www.airship.com/docs/developer/rest-api/connect/schemas/events/#in-app-button-tap) in the format `button-tap-<button_action>--<button label>`. <p>To differentiate the clicks for an individual button or text link, you can enter a specific name for the event. The entered name replaces `<button label>`. <p>For example, if you enter `Cat socks55` for the Submit Responses action, the event name in reporting will be `button-tap-submit_feedback--Cat socks55`. Event names also support [Handlebars](https://www.airship.com/docs/reference/glossary/#handlebars). | Enter text. |

Set for the Button Group element:

| Setting | Description | Steps |
| --- | --- | --- |
| **Layout** | Required if there are two buttons total. Determines if buttons appear separate, joined, or stacked. Three or more buttons are automatically stacked. | Select a layout. |

In the design properties, first select a [button style configured in your brand guidelines](https://www.airship.com/docs/guides/messaging/features/brand-guidelines/#text-button-and-input-styles), then configure properties:

* Background: Color, opacity
* Border: Color, opacity, size, radius
* Text: Font family, font size, color, opacity, emphasis
* Size: Width, height
* Alignment
* Margins

See [Design properties](https://www.airship.com/docs/guides/messaging/editors/native/design-properties/) for detail.

## Container

![Configuring the Container content element in a Scene](https://www.airship.com/docs/images/scene-container_hu_6d9fe65208789d0f.webp)

*Configuring the Container content element in a Scene*

Create a Container for other content elements.

By default, screen elements are stacked vertically, and you can drag them into your preferred order. When you place elements in a Container, you can arrange them vertically or horizontally. Containers also support nesting, so you can do things like place images side by side. 

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 fix a container at the bottom of a screen, see [Add content elements](https://www.airship.com/docs/guides/messaging/editors/native/screens/#add-content-elements). Containers do not support [NPS](#nps).

In the design properties, configure:

* Background color and media: Select the add icon () to enable, then follow the [same steps used for setting the screen background](https://www.airship.com/docs/guides/messaging/editors/native/screens/#set-background-color-and-media).
* Border: Color, opacity, size, radius
* Size: Width, height
* Alignment
* Direction
* Margins

See [Design properties](https://www.airship.com/docs/guides/messaging/editors/native/design-properties/) for detail.

## Custom View

![Configuring the Custom View content element in a Scene](https://www.airship.com/docs/images/scene-custom-view_hu_4f6daf53f1da6ea7.webp)

*Configuring the Custom View content element in a Scene*

Embed a [Custom View](https://www.airship.com/docs/reference/glossary/#custom_view) into a screen. Since the actual content of a native view is unknown by the device preview, the preview displays a placeholder.

Set for the Custom View element:

| Field or setting | Description | Steps |
| --- | --- | --- |
| **Name** | The view name as registered in your mobile app or website code. | Enter text. |
| **Content description** | Optional. Text to be announced by assistive technology such as screen readers. | Enter text. |
| **Properties** | Optional. Key-value pairs to pass to the device for reference by your app's code. Property values support [Handlebars](https://www.airship.com/docs/reference/glossary/#handlebars). | Enter a key-value pair. Select **Add another** to add more. |

In the design properties, configure:

* Size: Width, height
* Alignment
* Margins

See [Design properties](https://www.airship.com/docs/guides/messaging/editors/native/design-properties/) for detail.

## Email

**Email collection:** [iOS SDK 18.13+](/docs/docs/developer/sdk-integration/apple/ios-changelog/#18.13.0) [Android SDK 18.5+](/docs/docs/developer/sdk-integration/android/changelog/#18.5.0)<br>
**Email registration:** [iOS SDK 19.1+](/docs/docs/developer/sdk-integration/apple/ios-changelog/#19.1.0) [Android SDK 19.2+](/docs/docs/developer/sdk-integration/android/changelog/#19.2.0)

![Configuring the Email content element in a Scene](https://www.airship.com/docs/images/scene-email-content_hu_3ad14a17f342c512.webp)

*Configuring the Email content element in a Scene*

Add a field to register a submitted email address as a channel or only collect it as data. You must also configure a [Button](#button-or-button-group) or [Media](#media) (image only) using the [Submit Responses action](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/button-actions/#submit-responses).

Use a [Text element](#text) to add a title for the field and provide disclosures. See also [Providing disclosures and other required information](https://www.airship.com/docs/guides/messaging/editors/native/screens/#providing-disclosures-and-other-required-information).

* **Validation** — Email addresses are validated when the Submit Responses and Validate Form actions occur. For valid formats, see [Validate Form](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/button-actions/#validate-form) in *Actions for in-app experiences*.

* **Collection** — Collected email addresses are available in [Performance Analytics](https://www.airship.com/docs/reference/glossary/#pa).

* **Registration** — When registering an address as a channel, the address is associated with the [Contact](https://www.airship.com/docs/reference/glossary/#contact) viewing the Scene, and the channel is automatically opted in to both transactional and commercial messaging. Registration using this field is handled the same as other email registration methods. For example, they appear in [Contact Management](https://www.airship.com/docs/guides/audience/contact-management/) and emit the same [Real-Time Data Streaming](https://www.airship.com/docs/reference/glossary/#rtds) events.

   To require [Double Opt-In](https://www.airship.com/docs/reference/glossary/#double_opt_in) before the user is opted in to commercial messaging, enable the Double Opt-In option and create an [Automation](https://www.airship.com/docs/reference/glossary/#automation) or [Sequence](https://www.airship.com/docs/reference/glossary/#sequence) using the [Double Opt-In Trigger](https://www.airship.com/docs/reference/glossary/#double_opt_in_event_trigger) that sends users an email with an [opt-in link](https://www.airship.com/docs/guides/messaging/messages/content/email/email-double-opt-in-links/). No further setup is required, but users must complete the double opt-in process by following the link in your email. You may want to add text within the Scene that informs users of the opt-in type.

   For Double Opt-In, you can also set event property key-value pairs to differentiate opt-in sources and trigger messages depending on where users opted in. This is recommended so you can trigger a specific message. For example, in an app Scene, you could set a key-value pair to `source:app` and then create an Automation or Sequence using the Double Opt-in trigger where the event property `source` is equal to `app`. In a web Scene, you could instead use `source:website`, or you may want to use `source:store` or another meaningful ID.

   See [Commercial vs. Transactional Email](https://www.airship.com/docs/developer/api-integrations/email/commercial-transactional/) and [Double Opt-In](https://www.airship.com/docs/developer/api-integrations/email/getting-started/#double-opt-in) in the Email platform *Getting Started* documentation.

> **Important:** When collecting email addresses, record the collection or opt-in date for compliance purposes. Customers are responsible for providing their End Users with clear notice about how their email addresses will be used, in line with specific use cases and regulatory requirements in the Customer's jurisdiction.


Set for the Email element:

| Field or setting | Description | Steps |
| --- | --- | --- |
| **Placeholder** | Optional. This text appears in the field before a user selects the field. It should describe the expected input. For example, "Email address", "sabine@example.com", or "Please enter your work email address". | Enter text. |
| **Accessibility description** | Required. Text to be announced by assistive technology such as screen readers.<p>If you are using a Text element as the label for an Email, [SMS](#sms), or [Text Input](#text-input) field, associate that label to use it as the accessibility description. A screen reader will read out the label when the user is focused on the input field, making it easier for an assistive technology user to understand what data should be entered. Otherwise, enter a content description. <p>Selecting text requires: [iOS SDK 19.8+](/docs/docs/developer/sdk-integration/apple/ios-changelog/#19.8.0) [Android SDK 19.10+](/docs/docs/developer/sdk-integration/android/changelog/#19.10.0) | Associate a label or enter a content description. |
| **Reporting label** | Required. This text appears as the Survey Question for question type `email` in [Performance Analytics](https://www.airship.com/docs/reference/glossary/#pa). | Enter text. |
| **Submission type** | Required. Determines whether the email address will be only collected as data or also registered as a channel and opted in to transactional messaging. <p>For channel registration, you can also opt users in to commercial messaging. Enable **Double opt-in** to trigger an [Automation](https://www.airship.com/docs/reference/glossary/#automation) or [Sequence](https://www.airship.com/docs/reference/glossary/#sequence) using the [Double Opt-In Trigger](https://www.airship.com/docs/reference/glossary/#double_opt_in_event_trigger). Adding event property key-value pairs for Double opt-in is optional but recommended to trigger a specific Automation or Sequence. | Select a type. Enable **Double opt-in** if needed. To add event properties, enter a key-value pair and select **Add another** to add more. |
| **Required** | Optional. Makes entering an email address a requirement for making the Submit Responses button or image active. | Check the box to enable. |

In the design properties, first select an [input style configured in your brand guidelines](https://www.airship.com/docs/guides/messaging/features/brand-guidelines/#text-button-and-input-styles), then configure properties:

* Text: Font family, font size, placeholder color and opacity, input color and opacity, alignment, emphasis
* Background: Color, opacity
* Border: Color, opacity, size, radius
* Size: Width, height
* Alignment
* Margins

See [Design properties](https://www.airship.com/docs/guides/messaging/editors/native/design-properties/) for detail.

## List {#list-content}

![Configuring the List content element in a Scene](https://www.airship.com/docs/images/scene-list_hu_2c8f5a869270732a.webp)

*Configuring the List content element in a Scene*

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:

| Field or setting | Description | Steps |
| --- | --- | --- |
| **Media** | Required. The URL of an image to use as the bullet. URLs must be HTTPS and accessible by your mobile audience. <p>If your Airship plan includes CDN support, you can also upload media or select from previously uploaded media. See <a href="https://www.airship.com/docs/guides/messaging/features/media/#insert-media-in-message-content">Insert media in message content</a> in <em>Media library</em>.</p> | Enter a URL or use the Media library. |
| **Text** | Required. The text that follows the bullet. | Enter text. |
| **Alternative text** | Optional. Text to be announced by assistive technology such as screen readers. Alternative text, also known as alt text, is a textual description of an image or video that is used when a person cannot see or access the visual image to help them understand its meaning. | Enter text. |

In the design properties, first select a [text style configured in your brand guidelines](https://www.airship.com/docs/guides/messaging/features/brand-guidelines/#text-button-and-input-styles), then configure properties:

* Text: Font family, font size, font weight, line height, letter spacing, color, opacity, alignment, emphasis
* Fit
* Size: Width, height
* Alignment
* Margins

See [Design properties](https://www.airship.com/docs/guides/messaging/editors/native/design-properties/) for detail.

## Media

![Configuring the Media content element in a Scene](https://www.airship.com/docs/images/scene-media_hu_15ef64e923f92c71.webp)

*Configuring the Media content element in a Scene*

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

Set for the Media element:

| Field or setting | Description | Steps |
| --- | --- | --- |
| **URL or Upload** | Required. The URL of the image or video to display. URLs must be HTTPS and accessible by your mobile audience. <p>If your Airship plan includes CDN support, you can also upload media or select from previously uploaded media. See <a href="https://www.airship.com/docs/guides/messaging/features/media/#insert-media-in-message-content">Insert media in message content</a> in <em>Media library</em>.</p> <p>Video displays in landscape mode and does not start until a user selects the Play button. (Orientation and behavior are different for [background video](https://www.airship.com/docs/guides/messaging/editors/native/screens/#set-background-color-and-media).) Video is not supported in [Story mode](https://www.airship.com/docs/guides/messaging/editors/native/behaviors/). | Enter a URL or use the Media library. |
| **Alternative text** | Optional. Text to be announced by assistive technology such as screen readers. Alternative text, also known as alt text, is a textual description of an image or video that is used when a person cannot see or access the visual image to help them understand its meaning. | Enter text. |
| **Add action** | Optional. The behavior that occurs when a user taps/clicks the image. The option appears after providing a URL or upload. Not supported for video. You can also add or remove a [Tag](https://www.airship.com/docs/reference/glossary/#tag), emit a [Custom Event](https://www.airship.com/docs/reference/glossary/#custom_event), and/or opt a user into or out of a [Subscription List](https://www.airship.com/docs/reference/glossary/#subscription_list) when they tap the image. [iOS SDK 18.12+](/docs/docs/developer/sdk-integration/apple/ios-changelog/#18.12.0) [Android SDK 18.4+](/docs/docs/developer/sdk-integration/android/changelog/#18.4.0) | Select **Add action** and configure an action and options. Follow the steps in [Actions for in-app experiences](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/button-actions/). |
| **Action: Scene behavior** | Optional if an action is set. Determines how the Scene behaves when a user taps the image: **No action**, **Next screen**, **Previous screen**, **Dismiss** (closes the Scene), or **Dismiss and cancel Repeat** (closes the Scene and overrides the [Repeat setting](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/optional-features/#repeat-this-message)). <p>The Deep Link action has options **Dismiss** and **Dismiss and cancel Repeat** only, with default behavior **Dismiss**. For Web Page and Adaptive Link, all Scene behaviors are available, with default behavior **No action**. | Select a behavior. |
| **Action: Event name** | Required. A specific event name for tracking media clicks/taps. They are reported using the [In-app button tap event](https://www.airship.com/docs/developer/rest-api/connect/schemas/events/#in-app-button-tap) in the format `button-tap-<event name>`. <p>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 [Handlebars](https://www.airship.com/docs/reference/glossary/#handlebars). | Enter text. |

In the design properties, configure:

* Size: Width, height
* Alignment
* Fit
* Controls (For video only): Show video controls, Autoplay, Muted, Loop
* Margins

See [Design properties](https://www.airship.com/docs/guides/messaging/editors/native/design-properties/) for detail.

## NPS

![Configuring the NPS content element in a Scene](https://www.airship.com/docs/images/scene-nps_hu_8a560d8460aed8f.webp)

*Configuring the NPS content element in a Scene*

Add a Net Promoter Score (NPS) survey. This survey type is based on the [net promoter score](https://en.wikipedia.org/wiki/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. You must also configure a [Button](#button-or-button-group) or [Media](#media) (image only) using the [Submit Responses action](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/button-actions/#submit-responses). NPS is not supported in [Story mode](https://www.airship.com/docs/guides/messaging/editors/native/behaviors/).

The device preview only displays settings for the unselected state, so you should verify the appearance of the selected state by testing on an actual device.

Set for the NPS element:

| Field or setting | Description | Steps |
| --- | --- | --- |
| **Question** | Required. The question that should be answered by the user. The question text also functions as the content description, which is announced by assistive technology such as screen readers. | Enter text. |
| **Labels** | Required. A description of each end of the 0-10 scale. For example, "Not at all likely" and "Very likely." | Enter text. |
| **Required** | Optional. Makes answering the question a requirement for making the Submit Responses button or image active. | Check the box to enable. |

In the design properties, first select a [text style configured in your brand guidelines](https://www.airship.com/docs/guides/messaging/features/brand-guidelines/#text-button-and-input-styles), then configure properties:

* Question text: Font family, font size, font weight, line height, letter spacing, color, opacity, alignment, emphasis
* Label text: Font family, font size, font weight, line height, letter spacing, color, opacity, emphasis
* Scale — For Unselected and Selected states:
   * Text: Font family, font size, color, opacity, emphasis
   * Background: Color, opacity
   * Border: Color, opacity, size, radius
* Size: Width, height
* Alignment
* Margins

See [Design properties](https://www.airship.com/docs/guides/messaging/editors/native/design-properties/) for detail.

## Question

![Configuring the Question content element in a Scene](https://www.airship.com/docs/images/scene-question-single_hu_b662afef1d764d68.webp)

*Configuring the Question content element in a Scene*

Add a question with a field where users can enter their own answers, or add a single or multiple choice question with answers users can select.

Scenes support up to 10 questions. You must also configure a [Button](#button-or-button-group) or [Media](#media) (image only) using the [Submit Responses action](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/button-actions/#submit-responses). Questions are not supported in [Story mode](https://www.airship.com/docs/guides/messaging/editors/native/behaviors/).

Set for the Question element:

| Field or setting | Description | Steps |
| --- | --- | --- |
| **Question type** | Required. **Open** questions are followed by a text field where users can enter a response. **Single Choice** questions are followed by radio buttons for selecting one of multiple answers you provide. **Multiple Choice** questions are followed by check boxes for selecting one or more answers you provide. | Select a type. |
| **Question** | Required. The question that should be answered by the user. The question text also functions as the content description, which is announced by assistive technology such as screen readers. In [Performance Analytics](https://www.airship.com/docs/reference/glossary/#pa), it appears as the Survey Question. | Enter text. |
| **Required** | Optional. Makes answering the question a requirement for making the Submit Responses button or image active. | Check the box to enable. |
| **Answers** | Required for single and multiple choice questions. The options a user can select to answer the question. | Enter text. To reorder answers, hover over an answer, select and hold the drag handle icon (), then drag and drop to a new position. |
| **Store as Attribute** | Optional, for single choice questions only. Enables storing answers as text or number [Attributes](https://www.airship.com/docs/reference/glossary/#attributes). To use this feature, you must first [add the Attributes to your project](https://www.airship.com/docs/guides/audience/attributes/adding/). | See the steps following this table. |
| **Randomize order** | Optional for single and multiple choice questions. Presents the answers in random order when the Scene is viewed in the app. If you reordered the answers by dragging and dropping, that order is ignored when you enable randomized order. | Check the box to enable. |

To configure Store as Attribute:

1. Toggle to enable.
1. Search for and select an Attribute. 
1. 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.

The design properties for the question and answers are in separate sections. First select a [text or input style configured in your brand guidelines](https://www.airship.com/docs/guides/messaging/features/brand-guidelines/#text-button-and-input-styles), then configure:

* Question:
   * Text style
   * Text: Font family, font size, font weight, line height, letter spacing, color, opacity, alignment, emphasis
* Answer for single choice questions:
   * Text style
   * Text: Font family, font size, font weight, line height, letter spacing, color, opacity, alignment, emphasis
* Answer for multiple choice questions:
   * Text style
   * Text: Font family, font size, font weight, line height, letter spacing, color, opacity, alignment, emphasis
* Answer for open questions:
   * Input style
   * Text: Font family, font size, input color, opacity, alignment, emphasis
   * Background: Color, opacity
   * Border: Color, opacity, size, radius
* Size: Width, height
* Alignment
* Margins

See [Design properties](https://www.airship.com/docs/guides/messaging/editors/native/design-properties/) for detail.

## SMS

[iOS SDK 19.6+](/docs/docs/developer/sdk-integration/apple/ios-changelog/#19.6.0) [Android SDK 19.9+](/docs/docs/developer/sdk-integration/android/changelog/#19.9.0)

![Configuring the SMS content element in a Scene](https://www.airship.com/docs/images/scene-sms-content_hu_caca4f88f5f73493.webp)

*Configuring the SMS content element in a Scene*

Add a field to register a submitted phone number as a channel or only collect it as data. Channel registration requires selecting a [Sender ID](https://www.airship.com/docs/reference/glossary/#sender_id) to associate with the channels. Collection requires selecting which countries can submit phone numbers. The selected countries, or the country code associated with the sender ID, are listed in a dropdown menu and represented by the country’s flag. If more than one country is available for the field, the user must select one before entering their phone number.

You must also configure a [Button](#button-or-button-group) or [Media](#media) (image only) using the [Submit Responses action](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/button-actions/#submit-responses).

Use a [Text element](#text) to add a title for the field and provide disclosures. See also [Providing disclosures and other required information](https://www.airship.com/docs/guides/messaging/editors/native/screens/#providing-disclosures-and-other-required-information).

* **Validation** — Phone numbers are validated when the Submit Responses and Validate Form actions occur. For valid formats, see [Validate Form](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/button-actions/#validate-form) in *Actions for in-app experiences*.

* **Collection** — Collected phone numbers are available in [Performance Analytics](https://www.airship.com/docs/reference/glossary/#pa).

* **Registration** — Registering a phone number as a channel automatically triggers the [Double Opt-In](https://www.airship.com/docs/reference/glossary/#double_opt_in) process, and the phone number is associated with the [Contact](https://www.airship.com/docs/reference/glossary/#contact) viewing the Scene. See [Register SMS Users](https://www.airship.com/docs/developer/api-integrations/sms/getting-started/#register-sms-users) in *Getting Started* and [Double Opt-In](https://www.airship.com/docs/developer/api-integrations/sms/opt-in-out-handling/#double-opt-in) in *Opt-In/Out Handling* in the SMS platform documentation.

   Registration using this field is handled the same as other SMS registration methods. For example, they appear in [Contact Management](https://www.airship.com/docs/guides/audience/contact-management/) and emit the same [Real-Time Data Streaming](https://www.airship.com/docs/reference/glossary/#rtds) events.

> **Important:** When collecting phone numbers, record the collection or opt-in date for compliance purposes. Customers are responsible for providing their End Users with clear notice about how their phone numbers will be used, in line with specific use cases and regulatory requirements in the Customer's jurisdiction.


Set for the SMS element:

| Field or setting | Description | Steps |
| --- | --- | --- |
| **Placeholder** | Optional. This text appears in the field before a user selects the field. It should describe the expected input. For example, "Phone number" or "Please enter your phone number". | Enter text. |
| **Accessibility description** | Required. Text to be announced by assistive technology such as screen readers.<p>If you are using a Text element as the label for an [Email](#email), SMS, or [Text Input](#text-input) field, associate that label to use it as the accessibility description. A screen reader will read out the label when the user is focused on the input field, making it easier for an assistive technology user to understand what data should be entered. Otherwise, enter a content description. <p>Selecting text requires: [iOS SDK 19.8+](/docs/docs/developer/sdk-integration/apple/ios-changelog/#19.8.0) [Android SDK 19.10+](/docs/docs/developer/sdk-integration/android/changelog/#19.10.0) | Associate a label or enter a content description. |
| **Reporting label** | Required. This text appears as the Survey Question for question type `sms` in [Performance Analytics](https://www.airship.com/docs/reference/glossary/#pa). | Enter text. |
| **Submission type** | Required. Determines whether the phone number will be only collected as data or also registered as a channel. | Select a type. For channel registration, select at least one [Sender ID](https://www.airship.com/docs/reference/glossary/#sender_id) to associate with the channels, one ID per country. For collection, select which countries can submit phone numbers. |
| **Required** | Optional. Makes entering a phone number a requirement for making the Submit Responses button or image active. | Check the box to enable. |

In the design properties, first select an [input style configured in your brand guidelines](https://www.airship.com/docs/guides/messaging/features/brand-guidelines/#text-button-and-input-styles), then configure properties:

* Text: Font family, font size, placeholder color and opacity, input color and opacity, alignment, emphasis
* Background: Color, opacity
* Border: Color, opacity, size, radius
* Size: Width, height
* Alignment
* Margins

See [Design properties](https://www.airship.com/docs/guides/messaging/editors/native/design-properties/) for detail.

## Text

![Configuring the Text content element in a Scene](https://www.airship.com/docs/images/scene-text_hu_57a00dc7a9d6fbe.webp)

*Configuring the Text content element in a Scene*

Add a string of text. Scenes support up to 15 Text elements per screen.

When using a Text element as the label for an input field, set it as the field's accessibility description. See **Accessibility description** in [Email](#email), [SMS](#sms), and [Text Input](#text-input).

Set for the Text element:

| Field or setting | Description | Steps |
| --- | --- | --- |
| **Text** | Required. The text to display. | Enter text. |
| **Add action** | Optional. Makes the text function as a link. The link can be a web URL, [Adaptive Link](https://www.airship.com/docs/reference/glossary/#adaptive_link), or Deep Link. | Select **Add action** and configure an action and options. Follow the steps for [Web Page](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/button-actions/#web-page), [Adaptive Link](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/button-actions/#adaptive-link), or [Deep Link](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/button-actions/#deep-link) in *Actions for in-app experiences*. |
| **Action: Scene behavior** | Optional if an action is set. Determines how the Scene behaves when a user taps the link: **No action**, **Next screen**, **Previous screen**, **Dismiss** (closes the Scene), or **Dismiss and cancel Repeat** (closes the Scene and overrides the [Repeat setting](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/optional-features/#repeat-this-message)). <p>The Deep Link action has options **Dismiss** and **Dismiss and cancel Repeat** only, with default behavior **Dismiss**. For Web Page and Adaptive Link, all Scene behaviors are available, with default behavior **No action**. | Select a behavior. |
| **Action: Event name** | Optional. A specific event name for tracking link clicks/taps. By default, the total taps/clicks for all buttons and text configured with an action in a Scene are reported using the [In-app button tap event](https://www.airship.com/docs/developer/rest-api/connect/schemas/events/#in-app-button-tap) in the format `button-tap-<button_action>--<button label>`. <p>To differentiate the clicks for an individual button or text link, you can enter a specific name for the event. The entered name replaces `<button label>`. <p>For example, if you enter `Cat socks55` for the Submit Responses action, the event name in reporting will be `button-tap-submit_feedback--Cat socks55`. Event names also support [Handlebars](https://www.airship.com/docs/reference/glossary/#handlebars). | Enter text. |

> **Tip:** You can add a link to your privacy terms in a text footer using the Web Page action. Privacy terms can help users understand your data collection practices.


In the design properties, first select a [text style configured in your brand guidelines](https://www.airship.com/docs/guides/messaging/features/brand-guidelines/#text-button-and-input-styles), then configure properties:

* Text: Font family, font size, font weight, line height, letter spacing, color, opacity, alignment, emphasis, accessibility heading level
* Size: Width, height
* Alignment
* Margins

See [Design properties](https://www.airship.com/docs/guides/messaging/editors/native/design-properties/) for detail.

## Text Input

![Configuring the Text Input content element in a Scene](https://www.airship.com/docs/images/scene-content-text-input_hu_4e1c47bdf1d8bad3.webp)

*Configuring the Text Input content element in a Scene*

Add a single-line text input field. You must also configure a [Button](#button-or-button-group) or [Media](#media) (image only) using the [Submit Responses action](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/button-actions/#submit-responses). Use a [Text element](#text) to add a title for the field.

Set for the Text Input element:

| Field or setting | Description | Steps |
| --- | --- | --- |
| **Placeholder** | Optional. This text appears in the field before a user selects the field. It should describe the expected input. For example, "Favorite film" or "Please enter your favorite film". | Enter text. |
| **Accessibility description** | Required. Text to be announced by assistive technology such as screen readers.<p>If you are using a Text element as the label for an [Email](#email), [SMS](#sms), or Text Input field, associate that label to use it as the accessibility description. A screen reader will read out the label when the user is focused on the input field, making it easier for an assistive technology user to understand what data should be entered. Otherwise, enter a content description. <p>Selecting text requires: [iOS SDK 19.8+](/docs/docs/developer/sdk-integration/apple/ios-changelog/#19.8.0) [Android SDK 19.10+](/docs/docs/developer/sdk-integration/android/changelog/#19.10.0) | Associate a label or enter a content description. |
| **Reporting label** | Required. This text appears as the Survey Question in [Performance Analytics](https://www.airship.com/docs/reference/glossary/#pa). | Enter text. |
| **Required** | Optional. Makes entering text a requirement for making the Submit Responses button or image active. | Check the box to enable. |
| **Store as Attribute** | Optional. Enables storing input as a text [Attribute](https://www.airship.com/docs/reference/glossary/#attributes). To use this feature, you must first [add the Attribute to your project](https://www.airship.com/docs/guides/audience/attributes/adding/). | Toggle to enable, then search for and select an Attribute. |

In the design properties, first select an [input style configured in your brand guidelines](https://www.airship.com/docs/guides/messaging/features/brand-guidelines/#text-button-and-input-styles), then configure properties:

* Text: Font family, font size, placeholder color and opacity, input color and opacity, alignment, emphasis
* Background: Color, opacity
* Border: Color, opacity, size, radius
* Size: Width, height
* Alignment
* Margins

See [Design properties](https://www.airship.com/docs/guides/messaging/editors/native/design-properties/) for detail.


<!-- /PAGE: Configure content elements -->

<!-- PAGE: Design properties, PATH: https://www.airship.com/docs/guides/messaging/editors/native/design-properties/ -->

# Design properties

> Configure design properties for content elements, including text, background, border, media, size, and placement settings.
Configure design properties in the right sidebar when [configuring content elements](https://www.airship.com/docs/guides/messaging/editors/native/elements/). Each element section lists which properties are available.

## Text properties

Use this information to configure design properties for text:

| Property | Description | Steps |
| --- | --- | --- |
| **Font family** | The font of the text: serif, sans-serif, or a [custom font stack](https://www.airship.com/docs/guides/messaging/features/brand-guidelines/#fonts). | Select a font or font stack. |
| **Font size** | The size of the font in points. | Enter a numeric value. |
| **Font weight** | The thickness of the font, from 100 to 900. Common values are 300 for light, 400 for normal, and 700 for bold. Available weights depend on the selected font family. For SDK versions older than the required minimums, weights 100–600 fall back to 400 (normal), and weights 700–900 fall back to 700 (bold). [iOS SDK 20.1+](/docs/docs/developer/sdk-integration/apple/ios-changelog/#20.1.0) [Android SDK 20.1+](/docs/docs/developer/sdk-integration/android/changelog/#20.1.0) | Enter a numeric value. |
| **Line height** | The vertical spacing between lines of text, as a multiplier. For example, 1.2 is 120% of the font size. [iOS SDK 20.1+](/docs/docs/developer/sdk-integration/apple/ios-changelog/#20.1.0) [Android SDK 20.1+](/docs/docs/developer/sdk-integration/android/changelog/#20.1.0) | Enter a numeric value. |
| **Letter spacing** | The horizontal spacing between characters, in points. [iOS SDK 20.1+](/docs/docs/developer/sdk-integration/apple/ios-changelog/#20.1.0) [Android SDK 20.1+](/docs/docs/developer/sdk-integration/android/changelog/#20.1.0) | Enter a numeric value. |
| **Color, or input color, and opacity** | The color and transparency level of the text. "Input color" specifies the text entered by a user when answering an [open question](https://www.airship.com/docs/guides/messaging/editors/native/elements/#question). | Select a [Color Set](https://www.airship.com/docs/reference/glossary/#color_set) or enter a hexadecimal color value, and then set the opacity percentage. |
| **Alignment** | The horizontal position of the text: left, middle, or right. | Select an alignment. |
| **Emphasis** | The format of the text: bold, italic, or underline. | Select an emphasis. |
| **Accessibility heading level** | Optional, for [Text](https://www.airship.com/docs/guides/messaging/editors/native/elements/#text) only. The heading level of the text, for navigation using assistive technology such as screen readers. [iOS SDK 18.13+](/docs/docs/developer/sdk-integration/apple/ios-changelog/#18.13.0) [Android SDK 18.5+](/docs/docs/developer/sdk-integration/android/changelog/#18.5.0) | Select from H1 to H6. |

## Background and border properties

Use this information to configure design properties for backgrounds and borders for buttons, containers, NPS scales, and input fields:

| Property | Description | Steps |
| --- | --- | --- |
| **Background color and opacity** | The color and transparency level of the button, container, NPS scale, or input field background. | Select a [Color Set](https://www.airship.com/docs/reference/glossary/#color_set) or enter a hexadecimal color value, and then set the opacity percentage. |
| **Border color and opacity** | The color and transparency level of the button, container, NPS scale, or input field border. | Select a [Color Set](https://www.airship.com/docs/reference/glossary/#color_set) or enter a hexadecimal color value, and then set the opacity percentage. |
| **Border radius** | Governs rounding the button, container, NPS scale, or input field corners. | Enter an integer from 0 to 100. |
| **Border size** | The size of the button, container, NPS scale, or input field border in pixels. | Enter a numeric value. |

## Media properties

Use this information to configure design properties for background media and for the List and Media content elements:

| Property | Description | Steps |
| --- | --- | --- |
| **Fit** | Resizes media to fit within a viewable area, maintaining its original aspect ratio. For background media, the viewable area is the entire screen as determined by the [selected view style](https://www.airship.com/docs/guides/messaging/editors/native/root/). For Lists, the viewable area is the bullet for each item in a list. Fit is not available when using YouTube or Vimeo URLs. <p>**Center inside** resizes the media to fit entirely within the viewable area. The width and height of the media will be equal to or less than the width and height of the area. The media will not be cropped. <p>**Center crop** and **Crop** resize the media to fill the viewable area. The width and height of the media will be equal to or greater than the width and height of the view. The sides or top and bottom of the media will be cropped to fill the entire view. When **Crop** is selected and the media does not fit within its viewable area, also set a **Position**. **Center crop** is equivalent to using **Crop** with **Position** set to Center-Center. <p>See [Media scaling and cropping](#media-scaling-and-cropping) for more information. | Select a fit. For **Crop**, also select a position. |
| **Position** | When **Crop** is selected for Fit, Position controls the vertical and horizontal alignment of media within its viewable area. The default position is Center-Center. Depending on the sizes of the media and the viewable area, the preview may not accurately reflect the selected position. | Select a position. |
| **Controls** (For video [Media](https://www.airship.com/docs/guides/messaging/editors/native/elements/#media) only) | Enabling **Show video controls** displays player controls, information, and options at the bottom of a video: play/pause, time elapsed and total time, mute, fullscreen, download, playback speed, picture in picture, and a progress bar. **Autoplay** and **Loop** control playback. Enabling **Muted** loads the video in muted state. **Show video controls** and **Muted** are enabled by default. | Check the boxes to enable or disable each option. |
| **Video control** (For [background video](https://www.airship.com/docs/guides/messaging/editors/native/screens/#set-background-color-and-media) only) | Displays background video **Play control** and **Audio control** buttons. See descriptions in the next two rows. [iOS SDK 20.6.2+](/docs/docs/developer/sdk-integration/apple/ios-changelog/#20.6.2) [Android SDK 20.5+](/docs/docs/developer/sdk-integration/android/changelog/#20.5.0) | Select a [Color Set](https://www.airship.com/docs/reference/glossary/#color_set) or enter a hexadecimal color value for the background color displayed behind the control icons, and set the opacity percentage. Set an Alignment. |
| **Play control** (For [background video](https://www.airship.com/docs/guides/messaging/editors/native/screens/#set-background-color-and-media) only) | Displays a play/pause button for background video. Available when **Video control** is enabled. When [Story mode](https://www.airship.com/docs/guides/messaging/editors/native/behaviors/) is enabled, this screen-level control is not available. Story [Play control](https://www.airship.com/docs/guides/messaging/editors/native/root/) pauses or resumes both Story progression and background video playback. [iOS SDK 20.6.2+](/docs/docs/developer/sdk-integration/apple/ios-changelog/#20.6.2) [Android SDK 20.5+](/docs/docs/developer/sdk-integration/android/changelog/#20.5.0) | Select a [Color Set](https://www.airship.com/docs/reference/glossary/#color_set) or enter a hexadecimal color value for the Icon color, and then set the opacity percentage. Set a Size. |
| **Audio control** (For [background video](https://www.airship.com/docs/guides/messaging/editors/native/screens/#set-background-color-and-media) only) | Displays a mute/unmute button for background video audio. Available when **Video control** is enabled. [iOS SDK 20.6.2+](/docs/docs/developer/sdk-integration/apple/ios-changelog/#20.6.2) [Android SDK 20.5+](/docs/docs/developer/sdk-integration/android/changelog/#20.5.0) | Select a [Color Set](https://www.airship.com/docs/reference/glossary/#color_set) or enter a hexadecimal color value for the Icon color, and then set the opacity percentage. Set a Size. |

## Size and placement properties

Use this information to configure design properties that control the size and placement of content elements:

| Property | Description | Steps |
| --- | --- | --- |
| **Size** (All content elements except Custom View) | Resizes the element based on height and width settings, which can be set in pixels or as a percentage of the screen or Container size. You can also select **Auto** to automatically adjust the size based on the content. However, Size settings options dynamically change. See [Sizing](#sizing) for more information. <p>See also [Media scaling and cropping](#media-scaling-and-cropping). | Select **Auto** or enter a numeric value and select a value type of percentage or pixels. |
| **Size** (For [Custom View](https://www.airship.com/docs/guides/messaging/editors/native/elements/#custom-view) only) | Resizes the preview placeholder of the Custom View based on height and width settings. If set to Auto width, the preview will display at 100%. If set to Auto height, it will display at 200px. | For **Width**, select **Auto** or enter a numeric value and select a value type of percentage or pixels. For **Height**, select **Auto** or enter a numeric value and select pixels as the value type. |
| **Alignment** (All content elements) | Determines the horizontal and vertical positions of content elements within a screen or Container: left, middle, or right, and top, middle, or bottom. <p>See [Alignment impact](#alignment-impact) for more information. | Select an alignment. |
| **Margins** (All content elements) | Determines the spacing between the element and the Scene edges and proximity to other elements. Margins are set in pixels. | Enter a numeric value for each margin. |
| **Direction** (For [Container](https://www.airship.com/docs/guides/messaging/editors/native/elements/#container) only) | Determines whether content elements within the Container are arranged horizontally, vertically, or stacked. <p>Stacking arranges elements on top of each other, front to back. The first added element is at the bottom (furthest back), and the last is on top (front). | Select a direction. To rearrange the order in a Stacked container, select and hold the drag handle icon () for an element, then drag and drop to a new position. |

## Design properties appendix

The following is supplemental information related to design 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, when a Container's 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.

### Sizing

When setting the Size of a content element, the Width and Height options change dynamically based on the Size settings of its parent Container. A Scene's root view is a vertically scrolling linear Container, which means its immediate children cannot have a percentage height set. For a [Container content element](https://www.airship.com/docs/guides/messaging/editors/native/elements/#container), the options change based on its child elements. For example, if the first element you add to a screen is an image using the [Media element](https://www.airship.com/docs/guides/messaging/editors/native/elements/#media), you cannot set its height using percentage. However, if you instead add a Container with a fixed height in pixels, you can then nest a Media element within the Container and set the Media to a percentage height.

Size settings for content elements:

| Setting | Description |
| --- | --- |
| **Auto** | The width or height of the element will automatically adjust its size based on the content within it. |
| **Percentage (%)** | The width or height of the element will be equal to the percentage of the size of its parent Container. For example, if an element's height is set to 50% and its parent Container is set to 100 pixels, the element's height will be 50 pixels. |
| **Pixels (px)** | The width or height of the element will be exactly the fixed number of pixels you set. |

Setting rules:

* If a Container's height or width is set to Auto, the same setting in its child Containers or other elements can be set using Auto or pixels.
* If a Container's height or width is set using percentages or pixels, the same setting in its child Containers or other elements can be set using percentage, pixels, or Auto.
* A parent Container's height or width cannot be changed to Auto if any of its immediate child elements have height or width set using percentage.

For example, for a parent Container with a fixed height (set by pixels) that contains an image with a percentage height, you cannot change the Container height to Auto until after you change the nested image's height to Auto or pixels.

### Media scaling and cropping

When setting Size for [Media](https://www.airship.com/docs/guides/messaging/editors/native/elements/#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.

Scaled media typically must be cropped to fit a viewable area. When configuring [background media](https://www.airship.com/docs/guides/messaging/editors/native/screens/#set-background-color-and-media) and the [List](https://www.airship.com/docs/guides/messaging/editors/native/elements/#list-content) and [Media](https://www.airship.com/docs/guides/messaging/editors/native/elements/#media) elements, you can decide how the media should be cropped: using the **Fit** option, select **Crop**, and then set a **Position**.

Generally, the only times scaling occurs without cropping is when one of the selected dimensions is Auto or when a viewable area happens to match the aspect ratio of the media.


<!-- /PAGE: Design properties -->

<!-- PAGE: Scene branching, PATH: https://www.airship.com/docs/guides/messaging/editors/native/branching/ -->

# Scene branching

> {{< glossary_definition "branching" >}} {{< badge_sdk_min ios="19.6+" android="19.9+" >}}
See also the [Scene Branching](https://www.airship.com/docs/guides/features/messaging/scenes/branching/) feature guide.

### Example branching implementation 

This example illustrates setting up branching for follow-up questions about answers to an NPS survey asking users to rate their recent experience.

With a linear Scene, you can add questions after an NPS survey, but all users would see the same questions and in the same order. If a user indicates they had a negative experience and you ask them about positive interactions, that can be frustrating to the user and add to their negative impression.

Using branching, design a path to different follow-up questions according to the user's answer: 
  * If they submit a negative or low score, branch them to questions focused on understanding their pain points.
  * If they submit a positive or high score, branch them to questions about what they enjoyed or how you can further enhance their experience.

![Branching in a customer satisfaction survey](https://www.airship.com/docs/images/branching-use-case_hu_334ca38d89df7aec.webp)

*Branching in a customer satisfaction survey*

### The branching map

You can set up branching while [configuring Scene content](https://www.airship.com/docs/guides/messaging/editors/native/about/). Select the branching icon () in the left sidebar. This view is a map of the Scene that shows the path a user takes between screens. Each screen in the Scene is represented as a card:

![The branching view of a Scene](https://www.airship.com/docs/images/branching-map_hu_c27b6c556e45adf.webp)

*The branching view of a Scene*

![Card labels for screens in the branching view](https://www.airship.com/docs/images/branching-logic-icons_hu_4f42a0f11ce15d9a.webp)

*Card labels for screens in the branching view*

Each card in the map displays the screen name and icons for the components that can be used for setting branching logic:

* Selected NPS survey score
* Answer to single or multiple choice question
* When a button or image configured with an action is clicked/tapped

Screens that contain a button or image configured with the Submit Responses action also have a Submit label.

For more about these, see [NPS](https://www.airship.com/docs/guides/messaging/editors/native/elements/#nps) and [Question](https://www.airship.com/docs/guides/messaging/editors/native/elements/#question) in *Content elements* and [Actions](https://www.airship.com/docs/guides/messaging/in-app-experiences/configuration/button-actions/).

In addition to setting logic rules to create paths, you can and also add, duplicate, and remove screens from the map.

## Configure branching

In the [Content](https://www.airship.com/docs/guides/messaging/in-app-experiences/scenes/create/#content) step of a Scene, select the branching icon () in the left sidebar. From there, you can set branching logic to create paths between screens. You can also add, remove, and duplicate screens and open them for editing.

![Management options when configuring branching for a Scene](https://www.airship.com/docs/images/branching-manage_hu_245238bbbded1cba.webp)

*Management options when configuring branching for a Scene*

Branching and screen management options:

| Option | Description | Steps |
| --- | --- | --- |
| **Set the branching logic for a screen** | The Logic panel will open for editing. | Select a screen card, and then follow the steps in [Set branching logic](#set-branching-logic). |
| **View a summary of the branching logic for a path** | A modal window will display a summary of the _if/then/else_ statement for that path. | Select the connecting line between two screens. Select another location in the map to close the modal. |
| **Remove a path between screens** | Any rules directing to the branched screen will be deleted from the branching logic determining the path. When all rules are deleted, **All other cases** will change to **Always**, and the **Go to** screen setting will remain the same. | Select the connecting line between two screens, and then select **Delete branch**. |
| **Add a new screen as a branch** | The new screen will be added as branch from the selected screen. The branching logic rule will be set to go to the new screen without a condition. | Select the add icon () to the right of a screen card. |
| **Duplicate a screen as a branch** | The duplicate screen will be added as branch from the selected screen. The branching logic rule will be set to go to the new screen without a condition. | Select a screen card, and then select the duplicate icon () from the menu that appears above the card. |
| **Remove a screen** | The screen will be removed from the Scene. | Select a screen card, and then select the delete icon () from the menu that appears above the card. You must also confirm deletion if the screen is branched from another screen. |
| **Edit a screen** | The selected or last edited screen will appear for editing its content elements and design properties. | For a specific screen, select a screen card, and then select the edit icon () from the menu that appears above the card. Otherwise, select the file icon () in the sidebar. To edit, follow the steps in [Configuring screens](https://www.airship.com/docs/guides/messaging/editors/native/screens/). |

As you design, the map updates to display changes and the paths between screens:

![Viewing branching logic between screens in a Scene](https://www.airship.com/docs/images/branching-logic-map_hu_fd80a4251134f1df.webp)

*Viewing branching logic between screens in a Scene*

### Set branching logic

![Configuring branching logic between screens in a Scene](https://www.airship.com/docs/images/branching-logic-configure_hu_65343ef01bc5936f.webp)

*Configuring branching logic between screens in a Scene*

From the branching map, select a screen's card, and then you can configure your *if/then/else* statement in the **Logic** panel.
   * By default, screens do not have *if* conditions and are set to go to the next screen according to the current screen order, and *else* is set to go to "None".
   * If your Scene has only one screen, you must add another before you can set branching logic. See the options for adding screens in [Configure branching](#configure-branching).

Configuration steps:

1. Select **Add rule** if you are not editing an existing rule.

1. For **If**, select and configure which action the user must perform on the screen. You can select from the available actions on the current screen or different screen. 

    To allow multiple or alternative actions for the rule, select **Add condition** and select and configure another action. Then, toggle the **AND/OR** selector to determine how to handle them:
      * ALL = the user must perform all the configured actions (boolean AND)
      * ANY = the user must perform any configured action (boolean OR)

   Configuration steps for actions:

   | Action | Steps |
   | --- | --- |
   | **Button action** | None. **Is tapped** is set by default. |
   | **Image action** | None. **Is tapped** is set by default. |
   | **Single choice question** | Select **is** or **is not**, and then select an answer. |
   | **Multiple choice question** | Select **answer includes** or **answer does not include**, and then select one or more answers. |
   | **NPS survey** | Select **is equal to**, **is not equal to**, **is lower than**, **is greater than**, **is lower or equal to**, **is greater or equal to**, and then select a value. |
1. For **Go to**, select which screen should appear if the user performs the actions as configured in step 2.

1. Under **In all other cases**, for **Go to**, select which screen should appear if the user performs any other action than those specified in step 2.

   Before rules have been set, **All other cases** is labeled **Always**, and **Go to** is initially set according to the current screen order. Changing the screen order using this setting does not affect the order in which they appear when [Configuring screens](https://www.airship.com/docs/guides/messaging/editors/native/screens/). The section does not appear until you first select **Add rule**.

To close the Logic panel, select the X in its top right corner.

### Testing branching logic

You can test your branching logic the Interactive mode [Preview tool](https://www.airship.com/docs/guides/messaging/editors/native/about/#preview-tools). Select the file () or gear () icon in the sidebar to access the Preview tools. To test on actual devices, send the Scene to a [Test Group](https://www.airship.com/docs/reference/glossary/#preview_test_groups). See [Audience](https://www.airship.com/docs/guides/messaging/in-app-experiences/scenes/create/#audience) in *Create a Scene*.

## Reports

Message reports for Scenes includes a flow chart that displays a visual representation of the user progression between screens and metrics associated with each screen and branch. See [Performance](https://www.airship.com/docs/guides/messaging/in-app-experiences/scenes/create/scene-reports/#performance) in *Scene Reports*.

![Branching represented in a Scene message report](https://www.airship.com/docs/images/scene-user-paths_hu_2860ded64d0ae9bd.webp)

*Branching represented in a Scene message report*

<!-- /PAGE: Scene branching -->

<!-- PAGE: Custom content layouts, PATH: https://www.airship.com/docs/guides/messaging/editors/native/custom-layouts/ -->

# Custom content layouts

> Create, manage, and reuse content layouts for Scenes.
Save Scene content as a custom layout and reuse it as a starting point for new Scenes. Create a layout from scratch or save the content of any existing Scene. Each project supports up to 250 layouts.

## Create a layout

Create new layouts from your project dashboard:

1. Go to **Content** and select **Scene Layouts**.
1. Select **Create layout**.
1. Enter a name and description. Layout names do not have to be unique, so make sure to add a description.
1. Select **Save**.
1. Configure [Scene behaviors](https://www.airship.com/docs/guides/messaging/editors/native/behaviors/), the [root appearance](https://www.airship.com/docs/guides/messaging/editors/native/root/), and [individual screens](https://www.airship.com/docs/guides/messaging/editors/native/screens/).
1. Select **Save layout**.

## Save existing content as a layout

You can save any Scene's content as a layout, including Scenes built from a default layout that you then customized.

While editing the content of a Scene:

1. Select **Save as layout**.
1. Enter a name and description. Layout names do not have to be unique, so make sure to add a description.
1. Select **Save**.
1. 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.

## Managing layouts

Go to **Content** and select **Scene Layouts** to view the list of custom layouts in your project. Your last modified layout is listed first. You can sort the list by name or date modified, filter by keyword, and search by layout name, description, or keyword.

Select a layout name to open a drawer where you can do the following:
   * Edit the name, description, and keywords. Select **Save** after making your changes.
   * Select **Edit** or **Duplicate**, which are the same as the actions available from the more menu icon (), as described in the table below.
   * View the date and time when the layout was created and last modified.

The following actions are available from the more menu icon () in the layouts list:

| Action | Description | Steps |
| --- | --- | --- |
| **Edit** | Open the layout for editing. You can change the content, name, and description. | Select the more menu icon (), then **Edit**, and make changes to the layout. For the name and description, select the edit icon () next to the current name, enter a new name, and select **Save**. Select **Save layout** to return to the list. |
| **Duplicate** | Make a copy of the layout in the current project or in a different project. You can only duplicate to projects that are configured for the app channel.<p>If duplicating to a different project and the layout has dependencies on [brand guidelines](https://www.airship.com/docs/guides/messaging/features/brand-guidelines/), they are listed along with whether each dependency is copied to the destination project. | First, choose to copy to the current project or a different one, and update the name, description, and keywords. Then, select **Duplicate**. |
| **View detail** | Open the same drawer as when you select a layout name. For what you can do in the drawer, see the list above this table. | Select the more menu icon (), then **View detail**. |
| **Delete** | Delete the layout from your project. | Select the more menu icon (), then **Delete**. |

<!-- /PAGE: Custom content layouts -->