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 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.	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 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, 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 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:
   • Messages OverviewA view of all your project’s messages, with options for editing their settings, content, status, and more.: Select the Messages menu, then Messages Overview, then hover over the message you want to edit and select the edit 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 edit 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.

When you edit a color set, the changes automatically update anywhere the set is in use. You may want to update your color sets seasonally or when refreshing your branding.

New projects have 10 preset color sets.

To add color sets, first go to the settings. Navigation differs depending on whether you have App or Web Scenes enabled for your project, but they are the same settings no matter which location you access them from.

1. Go to Settings.
2. If you do not have Scenes or have App Scenes only:
   1. Under Channels, select Mobile Apps.
   2. Under Mobile App Settings, select Manage for In-App Automation.
3. If you have both App and Web Scenes:
   1. Under Channels, select Mobile App & Web.
   2. Under Mobile App & Web Settings, select Manage for Scenes. Or under Mobile App Settings, select Manage for In-App Automation.
4. Select Colors.
5. Select Add color set.
6. Enter a name for the color set and a Light Mode hexadecimal color value and opacity percentage. Dark Mode is optional. Repeat for additional sets.
7. Select Save.

After editing a color set, select Save. Select the delete icon (() to remove a set.

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.

Custom fonts

Custom fonts are rendered in your messages according to a font stack, which is a list of the names of individual fonts available in your app. Your app’s primary font should always be first in the stack, with additional fonts listed in the order you want them used in case the primary font doesn’t load.

After creating a custom font stack, you can select it as a Font family when configuring appearance defaults and text and button fields in the In-App Automation and Scene composers. Since font name format varies between iOS and Android, custom font stacks also allow font names to be unified into a single selection.

Each font name should match the fonts that are in your app. You can create separate stacks for serif and sans-serif fonts.

To manage your font stacks, first go to the settings. Navigation differs depending on whether you have App or Web Scenes enabled for your project, but they are the same settings no matter which location you access them from.

1. Go to Settings.
2. If you do not have Scenes or have App Scenes only:
   1. Under Channels, select Mobile Apps.
   2. Under Mobile App Settings, select Manage for In-App Automation.
3. If you have both App and Web Scenes:
   1. Under Channels, select Mobile App & Web.
   2. Under Mobile App & Web Settings, select Manage for Scenes. Or under Mobile App Settings, select Manage for In-App Automation.
4. Select Fonts.

Now you can create, edit, or remove font stacks. Follow the steps below.

---

To create a font stack:

1. Select Add a custom font stack.
2. Enter a name for the font stack.
3. Enter the name of a font and select Add. Repeat for additional fonts.

   For the first font in the stack only, you can enter a publicly accessible web font URL for rendering the font in Scene previews:

   Option	Format
   Web font file	Supported file types: WOFF, WOFF2, TTF, or EOT.
   Web font CSS link	This should be from a web font service such as Google Fonts. Example: https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200

4. Select Save for the font stack.
5. Select Save for the project settings.

---

To edit a font stack:

1. Select the edit icon () for a font stack.
2. Edit any part of the stack. For individual fonts:

   Option	Steps
   Edit	Select the edit icon (), make your changes, then select Update.
   Delete	Select the remove icon ().

3. Select Save for the font stack.
4. Select Save for the project settings.

---

Deleting removes the entire font stack. If you want to delete an individual font within a font stack, edit the font stack instead.

To delete a font stack:

1. Select the remove icon () for a font stack.
2. Select Save.

Font size

For Scenes, set font size in points in a Scene’s Text defaults and when configuring Scene content.

---

For for In-App Automation, first define font sizes in your project settings. Navigation to the settings differs depending on whether you have App or Web Scenes enabled for your project.

1. Go to Settings.
2. (If you do not have Scenes or have App Scenes only) Under Channels, select Mobile Apps.
3. (If you have both App and Web Scenes) Under Channels, select Mobile App & Web.
4. Under Mobile App Settings, select Manage for In-App Automation.

Next, set up your fonts:

1. Select Fonts.
2. Under Font Sizes, enter a value in points for small, medium, and large sizes of Header, Body, Footer, and Button text.
3. Select Save.

Now you can select Small, Medium, or Large for the header, body, footer, and button Font size fields in:

• In-App Automation defaults
• Default overrides for individual In-App Automations (Classic editor only)

Setting Scene defaults

AXP

Set defaults for ScenesA 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.. The settings are pre-configured when you create a new Scene.

In addition to setting default colors for the background, dismiss button, and indicators, you can name and define multiple view, text, and button styles that you can select when configuring individual Scenes. You also select a text style when configuring the properties of button styles. All projects contain preset styles that you can rename, customize, and remove. See also Colors and Fonts above.

1. Go to Settings.
2. (If you have App Scenes only) Under Channels, select Mobile Apps.
3. (If you have both App and Web Scenes) Under Channels, select Mobile App & Web.
4. Under Mobile App Settings or Mobile App & Web Settings, select Manage for Scenes.
5. Configure background colors and text, button, and view styles. 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 are optional. See the Field reference for Scenes for the fields and style presets for each section.
   • At least one style is required for each, excluding Embedded Content view styles. If you remove a preset view style (Fullscreen or Modal) 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.
6. (Optional for non-Embedded Content view styles) Define alternative settings that apply to a Scene based on a device’s screen size and orientation:
   1. Select Add overrides.
   2. Set the conditions that must be met for the overrides to apply:

      Condition	Options and examples
      Orientation	Portrait, Landscape, or Any
      Screen size	Small (most smartphones in landscape orientation), Medium (all smartphones), Large (phablets and tablets), or All

   3. (Optional for Conditions) Select Lock orientation to display the Scene using your selected orientation even when the device is rotated.
   4. Under Settings, configure the values that should apply when the conditions are met.
   5. Select Save.
7. Select Save to apply your default settings.

When configuring Background settings, the device preview updates as you type and make selections. Use the tools above the preview as you adjust settings:

Tool	Description	Steps
View	Shows a preview of the selected view style.	Select a view style.
Device	Provides a more accurate representation of how your content will appear on iOS and Android devices. After making a selection, the preview updates to reflect the device's viewport dimensions.	Select a device.
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.

Field reference for Scenes

Refer to these descriptions and configuration details when setting defaults for Scenes.

Fields and style presets per settings section for Scenes:

Settings	Fields	Style presets	Maximum styles
General — Background	Background color Shade color Dismiss button color Indicator active color Indicator inactive color	n/a	n/a
General — Buttons	For each button style: Name Text style Background color Border color Border size Border radius	Filled Outlined Button text	25
General — Text	For each text style: Name Font family Font size Alignment Color Emphasis Mark as heading	Headline large Headline small Title large Title small Body large Body small Button Text button	25
View styles	For each view style and overrides: Name (for view style only) Orientation lock Position Height Width Border radius Disable shade	Fullscreen Modal	25
Embedded Content view styles	For each view style: Name ID Description Height Width Border radius	n/a	25

Background

Set for Background color fields:

Field	Description	Steps
Background color	The color of the message background. Applies to all 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.
Shade color	The color of the device screen surrounding a non-fullscreen Scene. Applies to all non-fullscreen view styles.	Select a color set.

Button styles

Set for Button style fields:

Field	Description	Steps
Name	A descriptive name for the style. The name appears in the list of all button styles when configuring Scene content.	Enter text.
Background color	The color of the button background.	Select a color set.
Border color	The color of the button border.	Select a color set.
Border radius	Governs rounding the button corners.	Enter an integer from 0 to 100.
Font family	The font of the button text: serif, sans-serif, or a custom font stack.	Select a font or font stack.
Text style	The format of the text, defined by pre-configured text styles.	Select a style.

Text styles

Set for Text style fields:

Field	Description	Steps
Name	A descriptive name for the style. The name appears in the list of all text styles when configuring button styles and configuring Scene content.	Enter text.
Alignment	The horizontal position of the text: left, middle, or right.	Select an alignment.
Color	The color of the text.	Select a color set.
Emphasis	The format of the text: bold, italic, or underline.	Select an emphasis.
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.	Enter a numeric value.
Mark as heading	(Optional) Specify the content using the Text style as a heading for navigation using assistive technology, such as screen readers. iOS SDK 18.13+Android SDK 18.5+	Check the box to enable.

View styles

Set for View style fields:

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 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 non-fullscreen Scene so the website behind can be accessed. Supported for Web only.	Check the box disable the Shade.

Embedded Content view styles

iOS SDK 18.7+Android SDK 18.1.4+

Set for Embedded Content view style fields:

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.
Width	The width of the Scene in pixels or as a percentage of viewable area 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.
Height	The height of the Scene in pixels or as a percentage of viewable area 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.

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. Navigation differs depending on whether you have App or Web Scenes enabled for your project.

1. Go to Settings.
2. (If you do not have Scenes or have App Scenes only) Under Channels, select Mobile Apps.
3. (If you have both App and Web Scenes) Under Channels, select Mobile App & Web.
4. Under Mobile App Settings, select Manage for In-App Automation.

Next, manage the settings:

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. iOS SDK 16.11.3+Android SDK 16.9+

1. Go to Settings.
2. Under Channels, select Mobile Apps.
3. Select Manage for In-App Automation and Scenes.
4. Select In-App Automation, then HTML.
5. Enter #00000000 for the background color.
6. 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
Background color	The color of the message background.	Select a color set. See also: Setting transparent background.
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.
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. Supported for In-App Automation only. 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.
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.

Buttons

Set for button fields:

Field	Description	Steps
Background color	The color of the button background.	Select a color set.
Border color	The color of the button border.	Select a color set.
Border radius	Governs rounding the button corners.	Enter an integer from 0 to 100.
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.
Text color	The color of the button text. This should contrast with the background color.	Select a color set.

Text

Set for text fields:

Field	Description	Steps
Alignment	The horizontal position of the text: left, middle, or right.	Select an alignment.
Color	The color of the text.	Select a color set.
Emphasis	The format of the text: bold, italic, or underline.	Select an emphasis.
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.