In-App Experience Defaults

About in-app experience defaults

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

• Behavior — Set up how in-app experiences are refreshed on devices and what happens when audience conditions are not fully met: Background push and Missed behavior.

• Properties — Name and define Colors and Fonts (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 Automation and Survey defaults, set default values for background, text, and buttons per message style: Banner, Modal, Fullscreen, and HTML.

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

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. : Go to Messages, 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 or select from the sidebar, 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.

Background push

Background push pre-loads In-App Automations, Scenes, and Surveys on users’ devices, which increases the speed and reliability of message delivery. It is disabled by default. When disabled, the SDK downloads and refreshes the entire message list upon next app open. For information about the potential impacts of background push, see: In-App Automation: Background Push. The linked information also applies to Scenes and Surveys.

1. Go to Settings, then Mobile Apps.
2. Select Manage for In-App Automation, Scenes, and Surveys.
3. Go to Advanced Options and enable Background Push.
4. Select Save.

Missed behavior

Specify how messages are handled when audience conditions are not fully met.

1. Go to Settings, then Mobile Apps.
2. Select Manage for In-App Automation, Scenes, and Surveys.
3. Go to Advanced Options and enable Missed Behavior.
4. Select a behavior:

   Option	Description
   Cancel	The message cannot be displayed again on the device, even if the message is edited.
   Ignore	The message will not count toward the display limit set for Repeat this message, and the waiting period will not apply. The trigger event must occur again before the message is eligible for redisplay.
   Increment	The message will count toward the display limit set for Repeat this message, and the waiting period will apply. The trigger event must occur again before the message is eligible for redisplay.

5. Select Save.

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 Surveys, 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:

1. Go to Settings, then Mobile Apps.
2. Select Manage for In-App Automation, Scenes, and Surveys.
3. Go to Colors and select   Add color set.
4. 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.
5. 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, Scene, and Survey 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 create a font stack:

1. Go to Settings, then Mobile Apps.
2. Select Manage for In-App Automation, Scenes, and Surveys.
3. Go to Fonts and select Add a custom font stack.
4. Enter a name for the font stack.
5. 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

6. Select Save for the font stack.
7. Select Save for the project settings.

---

To edit a font stack:

1. Go to Settings, then Mobile Apps.
2. Select Manage for In-App Automation, Scenes, and Surveys.
3. Go to Fonts and select the edit icon () for a font stack.
4. Edit any part of the stack. For individual fonts:

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

5. Select Save for the font stack.
6. 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. Go to Settings, then Mobile Apps.
2. Select Manage for In-App Automation, Scenes, and Surveys.
3. Go to Fonts and select the remove icon () for a font stack.
4. 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 and Surveys, first define font sizes in your project settings:

1. Go to Settings, then Mobile Apps.
2. Select Manage for In-App Automation, Scenes, and Surveys.
3. Go to Fonts.
4. Under Font Sizes, enter a value in points for small, medium, and large sizes of Header, Body, Footer, and Button label text.
5. Select Save.

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

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

To override the defaults for individual Surveys, enter a size in points in the Survey’s Design settings.

Scene defaults

AXP

Set defaults for ScenesMulti-screen experiences that are cached on users’ devices and displayed when your users meet certain conditions within your app, such as viewing a particular screen or opening the app a certain number of times. Scenes can include survey questions or be presented as a story. . 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.

1. Go to Settings, then Mobile Apps.
2. Select Manage for In-App Automation, Scenes, and Surveys.
3. Go to Scenes and configure the default settings for background, text, and buttons. Previously set hexadecimal color values will appear until you make your first color set selection and save your changes.

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

   Option	Description
   View	Select a view style.
   Device	Select from the list of iOS and Android devices. The preview will update to reflect the device's viewport dimensions. This provides a more accurate representation of how your content will appear on that device.
   Light/Dark mode	Toggle the selector to see 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.

4. Select Save.

Fields and style presets per settings section:

Settings	Fields	Style presets	Maximum styles
Background	Background color Dismiss button color Indicator active color Indicator inactive color	n/a	n/a
Background (Views only)	For each view style: Name Height Width Position	Fullscreen Modal	25
Text	For each text style: Name Font family Font size Alignment Color Emphasis	Headline large Headline small Title large Title small Body large Body small Button Text button	25
Buttons	For each button style: Name Text style Background color Border color Border size Border radius	Filled Outlined Button text	25

In-App Automation and Survey defaults

Set defaults for the background, text, and buttons in In-App AutomationMessages that are cached on users’ devices and displayed when your users meet certain conditions within your app, such as viewing a particular screen or opening the app a certain number of times. and SurveysQuestion-and-answer experiences used to collect and aggregate feedback or generate a net promoter score. They are cached on users’ devices and displayed when your 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 or Survey.

1. Go to Settings, then Mobile Apps.
2. Select Manage for In-App Automation, Scenes, and Surveys.
3. Go to In-App Automation and configure the tabs for each message style. The device preview (not available for HTML) updates as you type and make selections.
   • Modal and Fullscreen styles are for In-App Automation and Surveys. Banner and HTML are In-App Automation only.
   • Previously set hexadecimal color values will appear until you make your first color set selection and save your changes.
4. Select Save.

Fields and options per settings section for each 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 devices1	Background color Dismiss action color	Same as Modal
Text	Header and Body:2 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

<sup>1. Supported for In-App Automation only.
2. Survey questions are rendered as Header text and answers as Body text.</sup>

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, then Mobile Apps.
2. Select Manage for In-App Automation, Scenes, and Surveys.
3. Go to In-App Automation, then HTML.
4. Enter #00000000 for the background color.
5. Select Save.

Field reference

Refer to these descriptions and configuration details when setting defaults for Scenes and In-App Automation and Surveys.

Background

Set for background fields:

Field	Description	Configuration
Background color (In-App Automation and Surveys)	The color of the message background.	Select a color set. See also: Setting transparent background.
Background color (Scenes)	The color of the message background. Applies to all view styles.	Select a color set.
Border radius	Governs the degree to which a banner, modal, or custom HTML message's corners will be rounded. 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 20.
Dismiss action color	For In-App Automation banner messages, this is the color of the drawer pull element that indicates the direction the user can swipe to dismiss the message. For In-App Automation modal, full screen, and custom HTML messages, this is the color of the "X" button used to dismiss the message. For Surveys, this is the color of the "X" button used to close the Survey.	Select a color set.
Dismiss button color	The color of the "X" button used to close the Scene.	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.
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.
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 Top or Bottom.

Background — Views

Set for view fields:

Field	Description	Configuration
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.
Height	The height of the Scene as a percentage of the device screen window size.	Enter a numeric value.
Width	The width of the Scene as a percentage of the device screen window size.	Enter a numeric value.
Position	The vertical position of the Scene. Only apparent when Height and Width are set to less than 100%. Top and Bottom align the top/bottom of the Scene with the top or bottom of the device screen window. Middle aligns the vertical center of the Scene with the vertical center of the device screen window.	Select Top, Middle, or Bottom.

The preset Modal view default settings are:

• Height: 75%
• Width: 80%
• Position: Middle

Buttons

Set for button fields:

Field	Description	Configuration
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 the degree to which the four corners of the button are rounded.	Enter an integer from 0 to 20.
Font family	The font of the button text.	Select Serif, Sans-serif, or a custom font stack.
Font size	The size of the font in points, defined by default values.	Select Small, Medium, or Large.
Name	A descriptive name for the style. The name appears in the list of all button styles when configuring Scene content.	Enter text.
Text style	The format of the text, defined by pre-configured text styles.	Select a style.
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	Configuration
Alignment	The horizontal position of the text.	Select Left, Middle, or Right.
Color	The color of the text.	Select a color set.
Emphasis	The format of the text.	Select Bold, Italic, or Underline.
Font family	The font of the text.	Select Serif, Sans-serif, or a custom font stack.
Font size (In-App Automation and Surveys)	The size of the font in points, based on default values.	Select Small, Medium, or Large.
Font size (Scenes)	The size of the font in points.	Enter a numeric value.
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.