In-App Experience Defaults
Set appearance, behavior, and property defaults for In-App Automations and Scenes.
About in-app experience defaults
There are different categories of defaults for in-app experiences:
Category | Description | Settings |
---|---|---|
Behavior | Set up how in-app experiences are refreshed on devices and what happens when audience conditions are not fully met. | See Background Push and Missed Behavior in Setting behavioral defaults. |
Properties | Name and define the colors and font families and sizes that you can select when configuring appearance defaults and when configuring the content of individual in-app experiences. | |
Appearance | Pre-configure the design settings of new in-app experiences. You can override them in the composers. For In-App AutomationMessages cached on users’ devices and displayed when users meet certain conditions within your app, such as viewing a particular screen or opening the app a certain number of times. defaults, set values for background, text, and buttons per message style: Banner, Modal, Fullscreen, and HTML. SceneA single or multi-screen in-app experience cached on users’ devices and displayed when users meet certain conditions in your app or website, such as viewing a particular screen or when a Custom Event occurs. They can be presented in fullscreen, modal, or embedded format using the default swipe/click mode or as a Story. Scenes can also contain survey questions. defaults are a mix of appearance and property defaults. Set default colors for the background, dismiss button, and indicators. Name and define view, text, input, and button styles that you can select when configuring appearance defaults and when configuring the content of individual Scenes. |
Applying changes to existing messages
In-app experiences are cached on users’ devices then displayed when certain conditions are met. Edits made to individual messages are applied upon the next app open or via background push, if enabled. Users who trigger the message after you save your edits will see the latest version of the message.
When you make changes to your project’s in-app experience defaults, they are applied to all new in-app experiences. You can also apply the changes to defaults settings to existing messages by editing the message:
- Open the message for editing, from either:
- Messages OverviewA view of all your project’s messages, with options for editing their settings, content, status, and more.: Go to Messages, then Messages Overview, and then hover over the message you want to edit and select the pencil icon ().
- Journey MapA visualization of messaging components that can be connected to create a continuous user experience. You can also create and edit from the map.: Go to Journeys and search for a message, then select its card at the center of the map, then select the compose icon ().
- Edit any part of the message.
- Save your changes:
- If you are editing a draft and not ready to send, select Exit.
- If you are editing an active message or ready to send, go to the Review step and select Update if the message is already active or select Finish for a new message.
Edits are not applied to active messages that have already been triggered by a user. For instance, for a message configured to display when viewing a specific app screen, if you edit the message after the trigger event occurred for a user but before they have viewed the specific app screen, they will see the version of the message that does not contain your edits.
Colors
A Color Set is a named pair of hexadecimal color values supporting device Light and Dark modes. Color sets can be selected for any color field in a Scene and when configuring the default appearance of Scenes and In-App Automations. Dark mode is supported for Scenes only.To create color sets, see Setting brand guidelines.
Fonts
When configuring the content of your in-app experiences, or when setting their defaults, you must set a Font family and a Font size for text, including button labels.
For Font family, all projects contain a serif and a sans-serif font. You can also add custom fonts so your in-app experiences use the same fonts as the rest of your app. To set custom fonts, see Setting brand guidelines.
For Font size in Scenes, set a value when configuring text styles. You can then select a text style that applies to the default appearance of button labels and input fields. See Set text, button, and input styles in Scene defaults below.
You also select text styles when configuring Scene content.
For Font size in In-App Automations, first define default font sizes:
- Next to your project name, select the dropdown menu (), then Settings.
- Under App settings, select In-App Automation.
- For Font Sizes, enter a value in points for small, medium, and large sizes of Header, Body, Footer, and Button text.
- Select Save.
Next, select Small, Medium, or Large for the header, body, footer, and button Font size fields for each In-App Automation style. See In-App Automation defaults below.
You can override these settings when configuring text design in the Classic editor. See the Design step in Create an In-App Automation.
Scene defaults
AXPSet default values for SceneA single or multi-screen in-app experience cached on users’ devices and displayed when users meet certain conditions in your app or website, such as viewing a particular screen or when a Custom Event occurs. They can be presented in fullscreen, modal, or embedded format using the default swipe/click mode or as a Story. Scenes can also contain survey questions. appearance and behaviors, including background colors, breakpoints, and styles for views, text, input fields, and buttons.
A Scene’s view determines whether it appears as fullscreen, a modal window, or Embedded ContentAn alternative Scene format that can be displayed on any app or web screen in a view defined by an app developer. It can also be presented in Story format., along with other settings related to its type. Styles are collections of settings that determine the appearance of views, text, input fields, and buttons. You can select a style to apply all its settings at once. All projects contain preset styles you can rename, customize, and remove. You can also create custom styles.
Requirements and behaviors for styles:
- At least one style for each type is required, excluding Embedded Content view styles, which are optional.
- If you remove a preset view style that is in use in your Scenes, the first view style in your list is applied to those Scenes.
- Previously set hexadecimal color values appear until you create your first color set selection and save your changes.
When configuring Background settings and view styles, the device preview updates as you type and make selections. Use the tools above the preview as you adjust settings:
Tool | Description | Steps |
---|---|---|
View | For Background and Embedded Content view styles only. Determines which view style to preview. | Select a view style. |
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. | 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 | Shows the appearance of elements with an assigned color set. Light Mode values appear in Dark Mode preview if no Dark Mode value was entered for a color set. | Toggle the selector. |
Device/Screen size | This tool provides a more accurate representation of how the Scene will appear on a specific screen size. | Select a device or screen size. |
Set background
Background settings apply to all new Scenes.
- Next to your project name, select the dropdown menu (), then Settings.
- Under App settings, select Scenes.
- For Background, configure:
Field Description Steps Background color The color of screen backgrounds. Select a color set. Shade color The color of the device screen surrounding a modal Scene. Applies to all modal view styles. Select a color set. Dismiss button color The color of the "X" button used to close the Scene. Select a color set. Indicator colors The colors of the dots that indicate the number of screens and their active/inactive state in a multi-screen Scene. When Story mode is enabled, they are in the form of a progress bar that indicates the number of screens and their remaining duration. The Story mode progress bar is displayed using the inactive color only. Select a color set for the active (current screen) and inactive states. Breakpoints The width in pixels for Medium and Large device screen breakpoints for Web Scenes as configured by your developer in the Web SDK. These values are for preview purposes in the Airship dashboard only. They are not passed to a device. Enter a numeric value. - Select Save.
Set text, button, and input styles
The styles for text, button, and input fields can be selected when configuring other default settings and when creating Scene content. Input styles control the appearance of the user input fields for the Email, SMS, Text Input, and Open Question content elements.
To set text, button, or input styles, see Setting brand guidelines.
Set fullscreen and modal view styles
Each project supports up to 25 fullscreen and modal view styles and contains a preset of each, which you can edit or remove.
To set the view styles:
- Next to your project name, select the dropdown menu (), then Settings.
- Under App settings, select Scenes.
- Select View Styles.
- Select the compose icon () for an existing style or select Add view style, and then configure:
Field Description Steps Name A descriptive name for the style. The name appears in the list of all view styles in the Settings section of a Scene. Enter text. Orientation lock Forces the Scene to display in the set orientation when the device is rotated to another orientation. Options: Portrait, Landscape, None. Select an orientation or None. Position The vertical and horizontal position of the Scene relative to the device screen. Only apparent when Height and Width are set to less than 100%. You can set top, middle, or bottom for the vertical axis and left, middle, or right for the horizontal axis. The preset Modal default value is Middle. Select a position. Width The width of the Scene in pixels or as a percentage of the device screen window size. The preset Modal default value is 80%. Enter a numeric value and select a value type of percentage or pixels. Height The height of the Scene in pixels or as a percentage of the device screen window size. The preset Modal default value is 75%. Enter a numeric value and select a value type of percentage or pixels. Border color The color of the Scene border. Only apparent when Height and Width are set to less than 100%. Select a color set. 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 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. The preset Modal default value is 0. iOS SDK 17.6+Android SDK 17.5+ Enter an integer from 0 to 100. Disable shade Removes the shade in a modal Scene so the website behind can be accessed. Supported for Web only. Check the box disable the Shade. - (Optional) Define alternative settings that apply to a Scene based on a device’s screen size and orientation:
- Select Add override.
- Set the conditions that must be met for the overrides to apply:
Condition Options and examples Orientation Portrait, Landscape, or Any Size Small (most smartphones in landscape orientation), Medium (all smartphones), or Large (phablets and tablets) screen size or All - (Optional) Select Lock orientation to display the Scene using your selected orientation even when the device is rotated.
- Configure the values for the following that should apply when the override conditions are met: Position, Height, Width, Border color, Border size, Border radius, and Disable shade.
- Select Save for the view style and overrides.
- Select Save for your default settings.
Select the trash can icon () to remove a style.
Set Embedded Content view styles
iOS SDK 18.7+Android SDK 18.1.4+Each project supports up to 100 Embedded ContentAn alternative Scene format that can be displayed on any app or web screen in a view defined by an app developer. It can also be presented in Story format. view styles.
Understanding how Embedded Content sizing works can help ensure that it always fits within the intended area of your app or website and behaves predictably across devices and layouts.

Parent bounds
When setting your Embedded Content view styles, you define the Parent Width and Parent Height. These settings are intended to match what was set by a developer in your app’s code to represent your content more accurately in the Scene editor preview. While these dimensions are for preview purposes only, it is helpful to understand that they define the maximum space that your embedded content can occupy on the device screen.
Sizing behavior
- The maximum area available for your Embedded Content is determined by the Parent Bounds.
- By default, the height of your Embedded Content is set to Auto and will adjust to fit the content within it.
- You can override the default sizing by setting explicit Width and Height values in the settings panel when setting the root appearance of your scene.
- Width cannot be set to Auto, it must be a percentage or pixel value.
- Height cannot be set to Auto when the Embedded Content is part of a multi-screen embedded scene. However, you can manually set the height to a lower percentage.
- If your embedded view is inside a
ScrollView
(as set in your app code), the content area will be scrollable.
To set the view styles:
- Next to your project name, select the dropdown menu (), then Settings.
- Under App settings, select Scenes.
- Locate an existing view style to edit or select Add view style, and then configure:
Field Description Steps Name A descriptive name for the style. The name appears in the list of all view styles in the Settings section of a Scene. Enter text. ID An identifier used to reference the Scene's content in your app's code. Enter a value. Description Text that describes the purpose of the style. Enter text. Parent width The Scene's width in pixels or as a percentage of the parent container's viewable area as determined by a developer in your app's code. This value is for preview purposes in the Airship dashboard only. It is not passed to a device. Enter a numeric value and select a value type of percentage or pixels. Parent height The Scene's height in pixels or as a percentage of the parent container's viewable area as determined by a developer in your app's code. This value is for preview purposes in the Airship dashboard only. It is not passed to a device. Enter a numeric value and select a value type of percentage or pixels. Border radius 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. - Select Save.
Setting In-App Automation defaults
Set defaults for the background, text, and buttons in In-App AutomationsMessages cached on users’ devices and displayed when users meet certain conditions within your app, such as viewing a particular screen or opening the app a certain number of times.. The settings are pre-configured when you create a new In-App Automation. See also Colors and Fonts above.
For In-App Automation, these defaults apply to the Classic editor only. You cannot set defaults for the Interactive/WYSIWYG editor.
First, navigate to the settings:
- Next to your project name, select the dropdown menu (), then Settings.
- Under App settings, select In-App Automation.
Next, manage the settings. Navigation differs depending on whether you have App or Web Scenes enabled for your project:
(If you do not have Scenes) Complete the remaining steps in the Design section.
(If you do have Scenes) Select Styles.
Configure each message style: Banner, Modal, Fullscreen, (Custom) HTML. See the Field reference for In-App Automations for the fields and options per settings section for each message style. The device preview (not available for HTML) updates as you type and make selections.
Previously set hexadecimal color values will appear until you create your first color set selection and save your changes.
Select Save.
Setting transparent background
While you can set the background to transparent in general, this information applies to modal In-App Automations only.
Modal In-App Automations display within an HTML container that has a white background. You can eliminate the white background by setting the background color of the HTML style to transparent.
- Next to your project name, select the dropdown menu (), then Settings.
- Under App settings, select In-App Automation.
- Select Styles, then HTML.
- Enter
#00000000
for the background color. - Select Save.
Field reference for In-App Automations
Refer to these descriptions and configuration details when setting defaults for In-App Automation styles.
Fields and options per settings section for each In-App Automation message style:
Settings | Banner | Modal | Fullscreen | HTML |
---|---|---|---|---|
Background |
|
|
| Same as Modal |
Text | Header and Body:
| Same as Banner | Same as Banner, for Header, Body, and Footer | n/a |
Buttons |
For two buttons:
| Same as Banner | Same as Banner, for five buttons | n/a |
Background
Set for background fields:
Field | Description | Steps |
---|---|---|
Position | The vertical screen position of a banner message. A message set to Top appears by animating down from the top of the device window. A message set to Bottom animates up from the bottom of the device window. | Select a position. |
Border radius | Governs rounding the corners of a banner, modal, or custom HTML message. For banner messages, this applies to bottom corners for top-positioned messages and top corners for bottom-positioned messages. | Enter an integer from 0 to 100. |
Background color | The color of the message background. | Select a color set. See also: Setting transparent background. |
Dismiss action color | For banner messages, this is the color of the drawer pull element that indicates the direction the user can swipe to dismiss the message. For modal, full screen, and custom HTML messages, this is the color of the "X" button used to dismiss the message. | Select a color set. |
Display fullscreen on small screen devices | Stretches modal and custom HTML message layouts to fullscreen on small devices, e.g. mobile phones, maintaining the same button layout. Use this setting if you want your message to take over the entire screen on a phone but display as a modal on a tablet. The default display of custom HTML messages is modal. | Check the box to enable. |
Buttons
Set for button fields:
Field | Description | Steps |
---|---|---|
Font family | The font of the button text: serif, sans-serif, or a custom font stack. | Select a font or font stack. |
Font size | The size of the font in points, defined as Small, Medium, or Large default values. | Select a size. |
Border radius | Governs rounding the button corners. | Enter an integer from 0 to 100. |
Text color | The color of the button text. This should contrast with the background color. | Select a color set. |
Background color | The color of the button background. | Select a color set. | Border color | The color of the button border. | Select a color set. |
Text
Set for text fields:
Field | Description | Steps |
---|---|---|
Font family | The font of the text: serif, sans-serif, or a custom font stack. | Select a font or font stack. |
Font size | The size of the font in points, defined as Small, Medium, or Large default values. | Select a size. |
Emphasis | The format of the text: bold, italic, or underline. | Select an emphasis. |
Alignment | The horizontal position of the text: left, middle, or right. | Select an alignment. |
Color | The color of the text. | Select a color set. |
Categories