Last modified January 30, 2024 by Sara-Jane Holbein

Designing in-app message Stories

Leverage in-app message Stories to create a sequence of highly engaging, seamless content.

In-app story containing 3 pages.

While Classic in-app messages allow you to present multiple pieces of content using Pages, they require users to manually navigate between Pages via buttons or swiping. With Stories, you have the flexibility to set the duration for each page, enabling automatic transitions to the next page or the dismissal of the campaign, ensuring a smooth and intuitive user experience.

Furthermore, in-app Stories support a range of familiar, out-of-the-box functionalities, streamlining the design and deployment process.

In-app message Stories are currently available as part of Swrve’s Early Access program and require you upgrade your app to use iOS SDK 8.11.0 and Android SDK 10.13.0. To have this feature enabled in your app(s), contact your CSM or email support@swrve.com.

Create a Story

To create a Story-type in-app message, create an in-app campaign as you normally would. For the channel, select In-app message, then select Story as the campaign type.

Set your Story's device type and platform, then click continue to create the campaign.

Story settings

In-app message Stories have the same capabilities as Classic in-app message campaigns, in addition to several Story-specific settings.

To configure your campaign’s Story settings, open the Content page, and select the Story settings tab.

Configure the story settings of your in-app message. Set the page duration, last page behavior, and style settings of the story's progress bar segments and dismiss button

Interaction settings

Use Interaction settings to configure how the story behaves:

  • Page duration: Define how long each page is displayed (1-60 seconds) before it automatically transitions to the next page.
  • Last page behavior: Define the action once the page duration is reached on the last page of the Story.
    • Auto-dismiss: Dismisses the campaign.
    • Stay on last page: The last page is displayed until the user manually dismisses the campaign or navigates to another page.
    • Loop: Restarts the story from the first page.

Padding

Use padding to position the Story segments container and Dismiss button (if enabled) relative to the device screen. The Story segments container is anchored to the top of the screen and the Dismiss button directly below it.

  • Vertical padding: Defines the space between the top of the screen and the Story segments container.
  • Horizontal padding: Defines the space between both the Story segments container and Dismiss button, and the sides of the device screen.

Illustration of the visual aspects of the Story settings that can be customized, with labels indicating the size and positioning of the Story segments and dismiss button.

Story segments

Story segments serve as an indicator of a user’s progress, with each segment representing a distinct page. These segments visually depict the time spent and the remaining time on each page.

Customize the style of your Story segments to integrate with the design of your app:

  • Width: Automatically expands the width of the device screen, taking into account the horizontal padding.
  • Height: The height of the Story bar segments.
  • Space between: The space between the individual segments.
  • Seen color: The color used to fill the segment as time elapses on the current page.
  • Not seen color: The color used to represent the remaining time on the current page.

Dismiss button

Stories contain a built-in dismiss button, which is anchored to the bottom of the Story segments.

  • Size: Defines the height and width of the dismiss button.
  • Margin top: Defines the space between the top of the dismiss button and the bottom of the Story segments.
  • Default color: The color of the dismiss button.
  • Pressed color: The color of the dismiss button when the user selects the button to dismiss the campaign.
You can use a custom dismiss button by adding a .svg, .png, or .jpg file through the SDK. Only .svg files support the Default and Pressed colors. For more information, see the iOS and Android integration guides.

Navigation controls

While multi-page campaigns enable users to navigate through pages by swiping, with in-app message Stories, users can easily move between pages by tapping the message background. Simply tap the right side of the background to advance to the next page and the left side to navigate to the previous page.

To avoid conflicts with the built in navigation actions, background custom actions are disabled for Stories.

Next steps