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. For each element, configure its settings in the center panel and its design properties in the right sidebar.
Button or Button Group
Add a single button or up to five buttons in a group. When using multiple buttons in a screen, add single buttons if you want to place content between them, and use a button group to keep buttons together.
After configuring the first button in a group, select Add button for more. One Button Group is allowed per screen.
Set for each button:
| 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 or 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 TagMetadata that you can associate with channels or Named Users for audience segmentation. Generally, they are descriptive terms indicating user preferences or other categorizations, e.g., wine_enthusiast or weather_alerts_los_angeles. Tags are case-sensitive., emit a Custom EventEvents that indicate that a user performed a predefined action, such as adding an item to a shopping cart, viewing a screen, or clicking an Unsubscribe button. Custom Events can trigger automation, including Sequences and Scenes. You can code them into your app or website, or send them to Airship from an external source using the Custom Event API. Custom Events contain properties that you can use to personalize messages., and/or opt a user into or out of a Subscription ListAn audience list of users who are opted in to messaging about a specific topic. Users can manage their opt-in status per list using a Preference Center. when they tap the button. | Select and configure an action and options. Follow the steps in Actions for in-app experiences. |
| 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). 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 in the format button-tap-<button_action>--<button label>.To differentiate the clicks for an individual button or text link, you can enter a specific name for the event. The entered name replaces For example, if you enter | 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, 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 for detail.
Container
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. Containers do not support 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.
- Border: Color, opacity, size, radius
- Size: Width, height
- Alignment
- Direction
- Margins
See Design properties for detail.
Custom View
Embed a Custom ViewA native view from your mobile or web application embedded into a Scene. Custom Views can display any native content your app exposes, so you can reuse that existing content within any screen in a Scene. 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 HandlebarsHandlebars is Airship’s templating language for personalization. Handlebars expressions use double curly braces wrapped around a content template, ranging from a simple variable, e.g., {{first_name}}, to complex evaluations of personalization data.. | Enter a key-value pair. Select Add another to add more. |
In the design properties, configure:
- Size: Width, height
- Alignment
- Margins
See Design properties for detail.
Email collection: iOS SDK 18.13+Android SDK 18.5+
Email registration: iOS SDK 19.1+Android SDK 19.2+
Add a field to register a submitted email address as a channel or only collect it as data. You must also configure a Button or Media (image only) using the Submit Responses action.
Use a Text element to add a title for the field and provide disclosures. See also 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 in Actions for in-app experiences.
Collection — Collected email addresses are available in Performance AnalyticsA customizable marketing intelligence tool that provides access to reports and graphs based on engagement data..
Registration — When registering an address as a channel, the address is associated with the ContactAny user in your project. Contacts are identified as either an Anonymous Contact or a Named User. Airship can set targeting data on these identifiers, which are also used to map devices and channels to a specific user. 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 and emit the same Real-Time Data StreamingA service that delivers user-level events in real time to your backend or third-party systems using the Data Streaming API. events.
To require Double Opt-InA process where users who sign up for messaging must confirm opting in before they can receive messages. before the user is opted in to commercial messaging, enable the Double Opt-In option and create an AutomationA set of conditions that your audience must meet before they receive a message. or SequenceA series of messages that is initiated by a trigger. Airship sends messages in the series based on your timing settings, and you can also set conditions that determine its audience and continuation. Sequences can be connected to each other and to other messaging components to create continuous user experiences in a Journey. using the Double Opt-In TriggerA trigger that initiates an Automation or Sequence when a member of your audience opts in to commercial email messaging. You must provide an opt-in link in the body of the message, and users must follow the link to confirm opting in. that sends users an email with an opt-in link. 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:appand then create an Automation or Sequence using the Double Opt-in trigger where the event propertysourceis equal toapp. In a web Scene, you could instead usesource:website, or you may want to usesource:storeor another meaningful ID.See Commercial vs. Transactional Email and Double Opt-In in the Email platform Getting Started documentation.
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. If you are using a Text element as the label for an Email, 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. Selecting text requires: iOS SDK 19.8+Android SDK 19.10+ | Associate a label or enter a content description. |
| Reporting label | Required. This text appears as the Survey Question for question type email in Performance AnalyticsA customizable marketing intelligence tool that provides access to reports and graphs based on engagement data.. | 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. For channel registration, you can also opt users in to commercial messaging. Enable Double opt-in to trigger an AutomationA set of conditions that your audience must meet before they receive a message. or SequenceA series of messages that is initiated by a trigger. Airship sends messages in the series based on your timing settings, and you can also set conditions that determine its audience and continuation. Sequences can be connected to each other and to other messaging components to create continuous user experiences in a Journey. using the Double Opt-In TriggerA trigger that initiates an Automation or Sequence when a member of your audience opts in to commercial email messaging. You must provide an opt-in link in the body of the message, and users must follow the link to confirm opting in.. 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, 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 for detail.
List
Add a bulleted list where the bullet is an image you provide. After configuring the first list item, select Add another for more.
Set for each list item:
| 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. If your Airship plan includes CDN support, you can also upload media or select from previously uploaded media. See Insert media in message content in Media library. | 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, 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 for detail.
Media
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. If your Airship plan includes CDN support, you can also upload media or select from previously uploaded media. See Insert media in message content in Media library. Video displays in landscape mode and does not start until a user selects the Play button. (Orientation and behavior are different for background video.) Video is not supported in Story mode. | 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 TagMetadata that you can associate with channels or Named Users for audience segmentation. Generally, they are descriptive terms indicating user preferences or other categorizations, e.g., wine_enthusiast or weather_alerts_los_angeles. Tags are case-sensitive., emit a Custom EventEvents that indicate that a user performed a predefined action, such as adding an item to a shopping cart, viewing a screen, or clicking an Unsubscribe button. Custom Events can trigger automation, including Sequences and Scenes. You can code them into your app or website, or send them to Airship from an external source using the Custom Event API. Custom Events contain properties that you can use to personalize messages., and/or opt a user into or out of a Subscription ListAn audience list of users who are opted in to messaging about a specific topic. Users can manage their opt-in status per list using a Preference Center. when they tap the image. iOS SDK 18.12+Android SDK 18.4+ | Select Add action and configure an action and options. Follow the steps 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 image: No action, Next screen, Previous screen, Dismiss (closes the Scene), or Dismiss and cancel Repeat (closes the Scene and overrides the Repeat setting). 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 in the format button-tap-<event name>.For example, if you enter | 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 for detail.
NPS
Add a Net Promoter Score (NPS) survey. This survey type is based on the net promoter score metric, which measures how likely it is that your users would recommend your brand or product to a friend or colleague. This can be used to measure their overall sentiment about your brand or product (known as relational NPS) or about a specific experience or transaction such as booking a flight (known as transactional NPS). The survey format is a question with answer scale 0-10.
Scenes support a single NPS survey. You must also configure a Button or Media (image only) using the Submit Responses action. NPS is not supported in Story mode.
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, 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 for detail.
Question
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 or Media (image only) using the Submit Responses action. Questions are not supported in Story mode.
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 AnalyticsA customizable marketing intelligence tool that provides access to reports and graphs based on engagement data., 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 AttributesMetadata used for audience segmentation and personalization. They extend the concept of Tags by adding comparison operators and values to determine whether or not to target a user, helping you better evaluate your audience.. To use this feature, you must first add the Attributes to your project. | 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:
- Toggle to enable.
- Search for and select an Attribute.
- 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, 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 for detail.
SMS
iOS SDK 19.6+Android SDK 19.9+
Add a field to register a submitted phone number as a channel or only collect it as data. Channel registration requires selecting a Sender IDAn originating phone number or string identifier used to indicate who an SMS message comes from. Members of your audience subscribe (opt in) to each sender ID they want to receive messages from. 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 or Media (image only) using the Submit Responses action.
Use a Text element to add a title for the field and provide disclosures. See also 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 in Actions for in-app experiences.
Collection — Collected phone numbers are available in Performance AnalyticsA customizable marketing intelligence tool that provides access to reports and graphs based on engagement data..
Registration — Registering a phone number as a channel automatically triggers the Double Opt-InA process where users who sign up for messaging must confirm opting in before they can receive messages. process, and the phone number is associated with the ContactAny user in your project. Contacts are identified as either an Anonymous Contact or a Named User. Airship can set targeting data on these identifiers, which are also used to map devices and channels to a specific user. viewing the Scene. See Register SMS Users in Getting Started and 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 and emit the same Real-Time Data StreamingA service that delivers user-level events in real time to your backend or third-party systems using the Data Streaming API. events.
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. If you are using a Text element as the label for an Email, 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. Selecting text requires: iOS SDK 19.8+Android SDK 19.10+ | Associate a label or enter a content description. |
| Reporting label | Required. This text appears as the Survey Question for question type sms in Performance AnalyticsA customizable marketing intelligence tool that provides access to reports and graphs based on engagement data.. | 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 IDAn originating phone number or string identifier used to indicate who an SMS message comes from. Members of your audience subscribe (opt in) to each sender ID they want to receive messages from. 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, 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 for detail.
Text
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, SMS, and 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 LinkA vendor-agnostic, shortened mobile wallet pass link that supports templates for both Google Wallet and Apple Wallet. When a user taps the link, Airship determines the user’s platform and generates the right pass for that platform., or Deep Link. | Select Add action and configure an action and options. Follow the steps for Web Page, Adaptive Link, or 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). 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 in the format button-tap-<button_action>--<button label>.To differentiate the clicks for an individual button or text link, you can enter a specific name for the event. The entered name replaces For example, if you enter | Enter text. |
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, 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 for detail.
Text Input
Add a single-line text input field. You must also configure a Button or Media (image only) using the Submit Responses action. Use a Text element 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. If you are using a Text element as the label for an Email, 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. Selecting text requires: iOS SDK 19.8+Android SDK 19.10+ | Associate a label or enter a content description. |
| Reporting label | Required. This text appears as the Survey Question in Performance AnalyticsA customizable marketing intelligence tool that provides access to reports and graphs based on engagement data.. | 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 AttributeMetadata used for audience segmentation and personalization. They extend the concept of Tags by adding comparison operators and values to determine whether or not to target a user, helping you better evaluate your audience.. To use this feature, you must first add the Attribute to your project. | Toggle to enable, then search for and select an Attribute. |
In the design properties, first select an input style configured in your brand guidelines, 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 for detail.