How to use the Appcues Editor
To create Appcues flows, use our Chrome Extension editor, available on the Chrome web store here.
With the editor, you can:
- Build UI patterns: Modals, Tooltips, Hotspots, or Slideouts
- Create flows that link the above patterns together
- Redirect the user to a new page to continue the flow
- Update the look and feel, behavior, and target the flow to a particular set of users
We'll take you through the basics.
1. Creating a New Flow
To create a new flow, open the Appcues Editor using the Appcues Chrome Extension icon, or go to my.appcues.com and click "Create."
Click "Create," then navigate to the page where you want the flow to start. You can try this out on any page, and it won't affect your users until you install the Appcues embed code and publish your flow. Choose how you want your flow to start.
2. Adding Steps
To add a step, just click "Add." You can add any kind of pattern as a step.
To add another page to a modal or slideout, or another tooltip or hotspot to the same set, just select the step you want and add another of the same type. The new step will be grouped with the existing one.
As users proceed through your flow, each step will lead into the next. You can see how it works by clicking the eye button (preview) in the bottom-right.
3. Editing Step Content
After you add a step, you can build the content you want within it. Click the step to add or edit content. You can edit the text of a Tooltip or Hotspot, or add rich content to a Modal or Slideout (Text, Image, Video, Hero, or Form). You can also click the action buttons on any pattern to change the text.
4. Adding a Redirect
Each pattern can only exist on a single URL. If you want to take the user to a new URL, for example to show a different part of your app, you can add a Redirect step. Just click "Add" again and select "Redirect."
You can preview how the redirect works by clicking the eye button. You can change or remove the redirect step by clicking it, but be aware that steps you add after the redirect may depend on the content of the old page, and might need to be fixed if you change it.
5. Rearranging Steps
To rearrange the flow, just drag and drop. You can rearrange pages or items within a step as well. Keep in mind that the steps may depend on the page content, so you might have to fix some things if you change the order.
6. Changing Styles
The first level of options are pattern styles for a particular step type. For example, you can adjust the style of a modal or set of tooltips, change the look and feel, and set whether the user can skip the section. You can also remove the step completely with the trash can. To configure these options, use the Paintbrush on the pattern, next to the icon. For more advanced look and feel settings, read about our styles editor.
7. Changing Step Options
The second level you can configure is detailed, down to the specific page or tooltip. For example, you can reposition a specific tooltip or hotspot, manually edit the element selector, change the highlight effect style to match what a tooltip is pointing at, or set the specific way the tooltip should advance. To reach these options, click the Gear icon next to the step number.
Once you've made something you like, you can preview how it will look on your site. The preview will follow the whole sequence you've created, but note: it will not trigger the actions you set up in Settings under "What should we do when this Flow has completed?" To preview, click the Eye button in the bottom right.
9. Changing Targeting and Flow Settings
The Targeting and Publishing settings include user segmentation and targeting, URL targeting, frequency, and what to do upon completion. To get to these overall settings, click "Target & Publish" in the bottom right.
When you're ready to publish to your site, the first step is to make sure you've installed Appcues on your app correctly.
Once you're installed, you can click Target & Publish, double-check your settings, and then click Publish to make it live! Users will then begin seeing your flow, and you can track activity on the Analytics report, available by clicking the bar chart icon from the Appcues dashboard.
To get back to the Appcues Dashboard to manage your flows, view Analytics, and work on your Styles, click the Appcues logo in the bottom left.
Thanks! We hope you enjoy using Appcues.