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:

CategoryDescriptionSettings
BehaviorSet 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.
PropertiesName 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.
AppearancePre-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:

  1. Open the message for editing, from either:
  2. Edit any part of the message.
  3. 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.
 Note

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:

  1. Next to your project name, select the dropdown menu (), then Settings.
  2. Under App settings, select In-App Automation.
  3. For Font Sizes, enter a value in points for small, medium, and large sizes of Header, Body, Footer, and Button text.
  4. 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

AXP

Set 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:

ToolDescriptionSteps
ViewFor Background and Embedded Content view styles only. Determines which view style to preview.Select a view style.
App/Web formatThis 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.
OrientationThis tool shows how the Scene will appear when the device or monitor is rotated.Toggle the orientation icon.
Light/Dark modeShows 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 sizeThis 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.

  1. Next to your project name, select the dropdown menu (), then Settings.
  2. Under App settings, select Scenes.
  3. For Background, configure:
    FieldDescriptionSteps
    Background colorThe color of screen backgrounds.Select a color set.
    Shade colorThe color of the device screen surrounding a modal Scene. Applies to all modal view styles.Select a color set.
    Dismiss button colorThe color of the "X" button used to close the Scene.Select a color set.
    Indicator colorsThe 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.
    BreakpointsThe 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.
  4. 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:

  1. Next to your project name, select the dropdown menu (), then Settings.
  2. Under App settings, select Scenes.
  3. Select View Styles.
  4. Select the compose icon () for an existing style or select Add view style, and then configure:
    FieldDescriptionSteps
    NameA 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 lockForces 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.
    PositionThe 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.
    WidthThe 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.
    HeightThe 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 colorThe color of the Scene border. Only apparent when Height and Width are set to less than 100%.Select a color set.
    Border sizeThe size of the Scene border in pixels. Only apparent when Height and Width are set to less than 100%.Enter a numeric value.
    Border radiusGoverns 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 shadeRemoves the shade in a modal Scene so the website behind can be accessed. Supported for Web only.Check the box disable the Shade.
  5. (Optional) Define alternative settings that apply to a Scene based on a device’s screen size and orientation:
    1. Select Add override.
    2. Set the conditions that must be met for the overrides to apply:
      ConditionOptions and examples
      OrientationPortrait, Landscape, or Any
      SizeSmall (most smartphones in landscape orientation), Medium (all smartphones), or Large (phablets and tablets) screen size or All
    3. (Optional) Select Lock orientation to display the Scene using your selected orientation even when the device is rotated.
    4. 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.
    5. Select Save for the view style and overrides.
  6. 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:

  1. Next to your project name, select the dropdown menu (), then Settings.
  2. Under App settings, select Scenes.
  3. Locate an existing view style to edit or select Add view style, and then configure:
    FieldDescriptionSteps
    NameA descriptive name for the style. The name appears in the list of all view styles in the Settings section of a Scene.Enter text.
    IDAn identifier used to reference the Scene's content in your app's code.Enter a value.
    DescriptionText that describes the purpose of the style.Enter text.
    Parent widthThe 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 heightThe 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 radiusGoverns 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.
  4. 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.

 Note

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:

  1. Next to your project name, select the dropdown menu (), then Settings.
  2. 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:

  1. (If you do not have Scenes) Complete the remaining steps in the Design section.

  2. (If you do have Scenes) Select Styles.

  3. 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.

  4. 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.

  1. Next to your project name, select the dropdown menu (), then Settings.
  2. Under App settings, select In-App Automation.
  3. Select Styles, then HTML.
  4. Enter #00000000 for the background color.
  5. 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:

SettingsBannerModalFullscreenHTML
Background
  • Background color
  • Dismiss action color
  • Border radius
  • Position
  • Background color
  • Dismiss action color
  • Border radius
  • Display fullscreen on small screen devices
  • Background color
  • Dismiss action color
Same as Modal
TextHeader and Body:
  • Font family
  • Font size
  • Alignment
  • Color
  • Emphasis
Same as BannerSame as Banner, for Header, Body, and Footern/a
Buttons
  • Font family
  • Font size
  • Border radius

For two buttons:
  • Text color
  • Background color
  • Border color
Same as BannerSame as Banner, for five buttonsn/a

Background

Set for background fields:

FieldDescriptionSteps
PositionThe 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 radiusGoverns 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 colorThe color of the message background.Select a color set. See also: Setting transparent background.
Dismiss action colorFor 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 devicesStretches 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:

FieldDescriptionSteps
Font familyThe font of the button text: serif, sans-serif, or a custom font stack.Select a font or font stack.
Font sizeThe size of the font in points, defined as Small, Medium, or Large default values.Select a size.
Border radiusGoverns rounding the button corners.Enter an integer from 0 to 100.
Text colorThe color of the button text. This should contrast with the background color.Select a color set.
Background colorThe color of the button background.Select a color set.
Border colorThe color of the button border.Select a color set.

Text

Set for text fields:

FieldDescriptionSteps
Font familyThe font of the text: serif, sans-serif, or a custom font stack.Select a font or font stack.
Font sizeThe size of the font in points, defined as Small, Medium, or Large default values.Select a size.
EmphasisThe format of the text: bold, italic, or underline.Select an emphasis.
AlignmentThe horizontal position of the text: left, middle, or right.Select an alignment.
ColorThe color of the text.Select a color set.