In-App Experience Defaults

How design defaults work

When you set design defaults for the background, text, and buttons in your in-app experiences, those settings appear pre-configured when you create a new 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. , SceneMulti-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. , or SurveyQuestion-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. .

For fonts, you can select serif or sans-serif, or you can first create a font stack that names the specific fonts available in your app and select that instead.

For colors, first edit or add color sets, where you specify Light and Dark mode hexadecimal color values, then select a color set by name when configuring color fields. Dark mode is supported for Scenes only.

You can override the defaults per message by editing the Design settings in the composers. You can use color sets or hexadecimal color values for overrides.

Design change application

In-app experiences are cached on users’ devices then displayed when certain conditions are met. Edits made to individual message 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 design defaults, they are applied to all new in-app experiences. You can also apply the updated defaults to existing messages that have unchanged Design settings (meaning they are using the defaults) by editing the message:

1. Open the message for editing. Either:
   • Go to Messages » Messages Overview, then hover over the message you want to edit and click  .
   • Go Journeys and search for a message or select from the sidebar, select the card at the center of the map, then click  .
2. Edit any part of the message.
3. Save your changes.
   • If you are editing a draft and not ready to send, click Exit.
   • If you are editing an active message or ready to send, go to the Review step and click Update if the message is already active or Finish for a new message.

Setting design defaults

1. Go to Settings » Channels » Mobile Apps and click Manage for In-App Automation, Scenes, and Surveys.

2. Go to Design and select a message style, then configure the default settings for Background, Text, and Buttons.

   • Modal and Fullscreen styles are for in-app automation, scenes, and surveys. Banner and HTML styles are in-app automation only.
   • A device preview updates as you type and make selections. For Modal and Fullscreen, toggle the Light/Dark selector above the preview 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. Dark Mode colors are supported for scenes only.

3. Repeat for each message style.

4. Click Save.

Background

Set for message background.

• Placement — Determines the screen position of a banner message. A message set to Top appears by animating down from the top of the screen. A message set to Bottom animates up from the bottom of the screen.

• 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-placed messages and top corners for bottom-placed messages. Enter an integer from 0 to 20.

• Background Color — The color of the message background. Select a color set or enter a hexadecimal color value. See also: Transparent background.

• Dismiss Action Color — The color of the dismiss element. For modal, full screen, and custom HTML messages, this is the color of the “X” button used to dismiss the message. For banner messages, this is the color of the drawer pull element that indicates the direction the user can swipe to dismiss the message. Select a color set or enter a hexadecimal color value.

• 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. Supported for In-app automation only.

Transparent background

Set the background color value in your project design defaults:

1. Go to Settings » Channels » Mobile Apps and click Manage for In-App Automation, Scenes, and Surveys.
2. Go to Design and select the HTML message style.
3. Enter #00000000 for the background color.
4. Click Save.

For messages created using the WYSIWYG editor (an option within the Interactive editor), you must also specify the background color in the message design. In the WYSIWYG editor, select Body in sidebar and select the transparent background. The hex value will be set to TRANSPARENT and RGBA values set to 0.

Text

Set for the message Heading, Body, and Footer. For surveys, Heading is the default for question text and Body is the default for answer text.

• Text Color — Select a color set or enter a hexadecimal color value.
• Size — Small, Medium, or Large. To set default values for each size, see: Setting Font Size.
• Alignment — Left, Middle, or Right.
• Style — Bold, Italic, or Underline.
• Font Family — Serif or Sans-serif. If you have configured Custom Fonts, they will also be available for selection.

Buttons

Set for button label text and appearance.

• Font Family — Serif or Sans-serif. If you have configured Custom Fonts, they will also be available for selection.
• Font Size — Small, Medium, or Large. To set default values for each size, see: Setting Font Size.
• Border Radius — Governs the degree to which the four corners of the button are rounded. Enter an integer from 0 to 20.
• Text Color — This should contrast with the Background Color. Select a color set or enter a hexadecimal color value.
• Background Color — Button background color. Enter a hexadecimal value or select a color set.
• Border Color — This may contrast with the Background Color. Select a color set or enter a hexadecimal color value.

Color sets

AXP

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.

Color sets used in a project’s design defaults appear as their Light Mode hexadecimal color values in In-App Automation and Survey composer color fields. They appear as their color set name in the Scene composer.

Adding color sets

1. Go to Settings » Channels » Mobile Apps and click Manage for In-App Automation, Scenes, and Surveys.
2. Go to Colors and click   Add color set.
3. Enter a name for the color set and a hexadecimal color value for Light Mode. Dark Mode is optional. Repeat for additional sets.
4. Click Save.

Editing and deleting color sets

If editing or deleting a color set that is in use, make sure to update the values for the affected fields in your design defaults and messages.

1. Go to Settings » Channels » Mobile Apps and click Manage for In-App Automation, Scenes, and Surveys.
2. Go to Colors and update the set name or hexadecimal color values, or click   to remove.
3. Click Save.

Setting font size

Set the default small, medium, and large font size values for header, body, footer, and button label text. Font sizes are defined as points, not pixels.

1. Go to Settings » Channels » Mobile Apps and click Manage for In-App Automation, Scenes, and Surveys.
2. Go to Fonts.
3. Under Font Sizes, enter a numeric value for each size.
4. Click Save.

Adding 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 design defaults and text 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 » Channels » Mobile Apps and click Manage for In-App Automation, Scenes, and Surveys.

2. Go to Fonts and click Add a custom font stack.

3. Enter a name for the font stack.

4. Enter the name of a font and click Add. For the first font in the stack only, you can also enter a web font URL for rendering the font in Scene previews. Must be a publicly accessible web font file or CSS link.

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

   Repeat for additional fonts.

5. Click Save for the font stack.

6. Click Save for the project settings.

Editing custom font stacks

You can edit a font stack name or individual font name, add and remove fonts, and add or edit the web font URL.

1. Go to Settings » Channels » Mobile Apps and click Manage for In-App Automation, Scenes, and Surveys.
2. Go to Fonts and click   for a font stack.
3. Click   to delete a font, or click   to edit, then click Update.
4. Click Save for the font stack.
5. Click Save for the project settings.

Deleting custom font stack

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

1. Go to Settings » Channels » Mobile Apps and click Manage for In-App Automation, Scenes, and Surveys.
2. Go to Fonts. and click   for a font stack.
3. Click Save.

Enabling background push

Background push pre-loads in-app messages, scenes, and surveys on users’ devices, which increases the speed and reliability of message delivery. It 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. This information also applies to scenes and surveys.

1. Go to Settings » Channels » Mobile Apps and click Manage for In-App Automation, Scenes, and Surveys.
2. Go Advanced Options and enable Background Push.
3. Click Save.

Setting missed behavior

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

1. Go to Settings » Channels » Mobile Apps and click Manage for In-App Automation, Scenes, and Surveys.
2. Go Advanced Options.
3. Enable Missed Behavior, then select a behavior.

   • 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 in the optional message setting 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 in the optional message setting Repeat this message, and the waiting period will apply. The trigger event must occur again before the message is eligible for redisplay.

4. Click Save.