How to Create & Edit Slideouts
This doc reviews the basic steps of building slideouts. For more advanced use:
- View and copy CSS sheets to style your slideouts
- Learn how to hide buttons from your slideouts
- Troubleshoot slideouts that won't show
- Open the Appcues editor; click Create and select Slideouts
- 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)
- To add custom HTML or to embed iframed content, select Add text and open the HTML editor brackets <> icon to insert the snippet
- To add another step in your flow, click Add > Slideout from the editor bar
- Once you've created all your steps, set your targeting rules at the Target & Publish page
You can make changes to individual steps in your slideout flow that will not affect the entire flow.
Changing button text
To change the text of the buttons in your slideouts (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 slideout 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
There are a couple of options you have available to edit your entire slideout flow. To access them, click the paintbrush icon in the bottom right of the Appcues builder.
If you'd like to draw even more attention to your slideouts, you can turn on the Backdrop setting. A backdrop will dim out other parts of your site while a user goes through you slideout flow.
Slideouts can appear in one of 9 areas on your page. Select Position to set this flow to show at the upper or bottom corners, sides, or middle of your page.
Flows can be skippable or required for you end users.
Skippable slideouts 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.
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.