How to Create & Edit Modals

This doc reviews the basic steps of building a modal. For more advanced use:

Creating Modals

  1. Open the Appcues editor; click Create and select Modal
  2. The first step of your flow will automatically appear - click the + icon to start adding media: you can add text, images, videos, forms, and a hero (an heading image without padding)
    1. To add custom HTML or to embed iframed content, select Add text and open the HTML editor brackets <> icon to insert the snippet

  3. To add another step in your flow, click Add > Modal from the editor bar

Editing Modals

Step-level

You can make changes to individual steps within a flow that will not affect other steps.

Changing button text

To change the text of the buttons in your modals (that your end-users will see), simply click on the button and start editing the text

Deleting & Reordering Steps

To edit individual steps within your modal flow, you'll have to click on the specific step.

  • To reorder your steps: drag and drop the into place.
  • To delete a step: click the cog icon and then the trash bin of the step you'd like to remove

Group-level

There are a couple of options you have available to edit your entire modal flow. To access them, click the paintbrush icon in the bottom right of the Appcues builder. Pattern Type

Selecting a pattern type will change the way your entire flow appears.

  • Modal is the default setting: a pop up in the middle of the screen with a backdrop over your page
  • Sidebar slides your content out from the left with no backdrop above your app
  • Full screen pops your flow out and blocks your app out entirely in the background 

Skippable

Flows can be skippable or required for you end users.
Skippable modals include a X button in the top-right corner of the modal to let your users opt out. If you uncheck the Skippable box, the X button will be removed and users will have to click through your entire flow before it closes.

Theme

You can apply any of the themes you create at your Styles page to your flow. Select a theme from the Theme dropdown and it will automatically apply its styling to every step in your flow.
Learn more about creating themes  here.

Switch Preview Page

You can change the page you build or view your flow on by clicking the Switch Preview Page button. Once this button is clicked, you'll be able to navigate through your app normally. 
When you've found the page you'd like to work on, select Display flow on this page from the bottom bar on your screen.

Still need help? Contact Us Contact Us