Out of our 4 main flow patterns, Modals and Slideouts are the ones that welcome and announce messages to your users through your application! They're meant to catch the attention of your users so they don't miss an important update.

Modals

Big, screen-takeover experiences. Because they have more space, they are great for giving users context at the start of the flow.

Modal patterns support three different types from the Type dropdown.

Standard: displays the content in the middle of the screen with your app masked behind it.

Sidebar: slides the content out from the side of the screen with your app masked in the background.

Full screen: displays the content in the middle of the screen with a full coverage background so the app is not visible.

Slideouts

Smaller, less intrusive way to communicate your message. Great for announcing smaller releases, collecting product feedback, or driving users to specific actions.

Slideout patterns support nine different positions from where they slide from. By default, Slideouts show from the bottom left, but you can pick any other position on the screen.

Background color

You can define the background color of your Modals & Slideouts in the Theme you're using. You can also set the main font color here.

Backdrop 

You can set the color and add or remove a backdrop for your Modals & Slideouts in the Theme you're using. This is done on the Pattern tab, under the Modals & Slideouts configuration. If you set the opacity to 0%, there will be no backdrop, if set to 100% the backdrop will fully cover your app behind it. 

The presence of a backdrop will block users from interacting with your application elements. 

You can enable or disable the backdrop of Slideouts in the Builder. Modal backdrop configuration is only accessible on the Theme.

Progress bar 

You can display a horizontal bar for users to track progress through the Flow. The progress bar persists only across the same types of group steps (Modals and Slideouts only).

Skippable or Required

Modals

Modal patterns support a skippable toggle directly in the Appcues builder. This allows you to add a skippable X in the top right corner of your Modal content container. When a user clicks on the X we will note the user's journey choices with a step_skipped and a flow_skipped event.

Required Modal Configuration

For required Modal content you will want to make sure your Modal is not skippable. When a Modal is not skippable a user will need to interact with the Modal content in order to progress back to your application. The Modal type you choose does not matter when making the content required, however, if desired you can fully block your application from being visible with the full screen Modal type or by using a 100% opacity backdrop.

Skippable Modal Configuration

To make your Modal content skippable you can simply select the skippable checkbox on the Modal step. This will add the skippable x and additionally, if you are using Standard or Sidebar Modal types when a user clicks outside of the content block the Modal will be skipped.

Slideouts

Like the Modal pattern type, Slideouts also have a skippable toggle directly in the builder. This allows you to add a skippable X in the top right corner of your Slideout content container. When a user clicks on the X we will note the user's journey choices with a step_skipped and a flow_skipped event.

Required Slideout Configuration

To make a Slideout required you will want to make sure that the skippable option is disabled for the Slideout step. Additionally, you will want to enable the backdrop option. This will make sure that the user must interact with your Slideout content before proceeding.

Configuring a Slideout to be not skippable and having no backdrop will allow a user to interact with your application and potentially navigate away from seeing the content.

Skippable Slideout Configuration

For skippable content, you can enable the skippable flag on your Slideout step to ensure your users are be able to navigate away from the experience without completing it.

Step progression

Both Modals and Slideouts require a button in order to progress to the following step or to be considered completed/dismissed. If these steps don't have a button but there are more steps after them, the user will not have a way to keep seeing the flow. 

Step completion

In terms of targeting these types of steps in your settings pages, Modals and Slideouts are considered completed when seen, so in the UI, those types of steps will show up as “has been seen/has not been seen”.

In terms of analytics, Modals and Slideouts are considered "completed" when the final step of the Modal or Slideout group is dismissed by clicking the built-in "Next step" button. Modals and Slideouts can also be completed through a custom button using any of the following actions:

• "Go to URL" with the "Mark flow in progress as complete" checkbox selected
• "Next Step" when on the last step of the group
• "Skip to Next Group" (completes flow when this is the last step group of the flow)
• "Dismiss Flow" with the "Mark flow in progress as complete" checkbox selected
• “Trigger Appcues Flow”