In-App Experience Defaults

About in-app experience defaults

There are different categories of defaults for in-app experiences:

Category	Description	Settings
Behavior	Set up what happens when audience conditions are not fully met.	See 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.	Colors Fonts
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 mobile app or web experience of one or more screens displayed with fully native UI components in real time, providing immediate, contextual responses to user behaviors. Scenes can be presented in full-screen, modal, or embedded format using the default swipe/click mode or as a Story. They 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.	In-App Automation defaults Scene defaults

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. 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:
   • 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 ().
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.

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 mobile app or web experience of one or more screens displayed with fully native UI components in real time, providing immediate, contextual responses to user behaviors. Scenes can be presented in full-screen, modal, or embedded format using the default swipe/click mode or as a Story. They 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.

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

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:

   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.

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:

      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

   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.

When editing content in a Scene, you can set margins that determine the spacing between the Scene and its parent bounds. See Set the root appearance in Configuring Scene content.

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:

   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 color	The color of the Scene border. Only apparent when Parent 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 Parent height and width are set to less than 100%.	Enter a numeric value.
   Border radius	Governs rounding the Scene's corners. Only apparent when Parent height and width are set to less than 100%. iOS SDK 19.6+Android SDK 19.9+	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.

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:

Settings	Banner	Modal	Fullscreen	HTML
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
Text	Header and Body: Font family Font size Alignment Color Emphasis	Same as Banner	Same as Banner, for Header, Body, and Footer	n/a
Buttons	Font family Font size Border radius For two buttons: Text color Background color Border color	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.