Build Guide

In this article, you'll learn how to:

• Add tooltips to dropdown menus
• Add tooltips to dialogs
• Add navigation steps

In the GIF below you'll see the end result of this Build Guide.

Step 1. Create your first step

Open up the Appcues Builder and start by adding your first step. We can start with a Slideout step to greet the user and start the tour. Add any text you prefer and a button set to ‘next’.

Step 2. Add a tooltip

Now, we'll add our first tooltip of this flow. In order to guide the user to the dropdown menu that appears after clicking the ellipsis icon, we'll place a tooltip pointing to the icon. Add any text necessary to guide the user. We will not add a button here because this is an action-driven tooltip. This means that the flow will progress to the following step when the user interacts with the element the tooltip is pointing to, as opposed to clicking ‘next’.

Step 3. Interact with the dropdown to place another tooltip

Now, we'll need to interact with the dropdown menu to open it and place the tooltip inside it. For that, add another tooltip and hover with your mouse on the ellipsis icon. Now, hold shift. You'll notice that once you do that, you'll be able to interact with the dropdown to open it. Once it's open, release shift and place your tooltip where you want it.

Add any text or content you'd like. It's possible that once you do that, the tooltip will appear somewhere off on the screen (as it does in the GIF below). Don't worry if that happens – that is the case because when the dropdown is closed, the tooltip doesn't have the element visible to stay in place. As long as the CSS selector is valid, it will appear in the correct place when you preview/test your flow. Once again, we will not add a button to the tooltip because the flow will progress by interacting with the page.

Step 4. Open a dialog to place a tooltip

In order to get to the dialog, we need to interact with the page first. Start by adding another tooltip and repeat the same process as in the last step: hover with your mouse on the ellipsis icon, hold shift, click on the dropdown to open it, release shift and hold shift again to open the dialog.

Once the dialog is open, place your tooltip pointing to where you want the user to complete the action. We will once again not use a button in this tooltip because the user will click on ‘done’ to close the dialog.

Step 5. Navigate to another page (part 1)

Add another tooltip that invites the user to navigate to a different page. In this case, we're adding a tooltip pointing to the theme we want to visit. When you're placing your tooltip, notice the different elements Appcues picks up; ensure you select a broad element so that any click on the whole container is valid in order to progress to the next step. If you select only a small element the flow will only continue if you click on the same region.

Step 6. Navigate to another page (part 2)

Since this action involves a page change, we will need to accommodate that by adding a navigation step. After placing your tooltip, click to add a navigation step. Then, interact with the page to go to the next page. Once you're there, click to switch back to build mode, as shown in the GIF below.

Step 6. Adjust your navigation step settings

After navigating to the new page, you'll be able to edit your navigation settings. In this example, we're going to switch the navigation to a Let Them Navigate step; that is because the users are navigating themselves by interacting with the page instead of clicking a ‘next’ button that takes them to the new page.

Since this page is dynamic, we need to add a wildcard (*) to ensure it'll match any page the end user will see on their end. Keep the Build URL with the id in the URL as that serves to open and edit the flow in the builder.

Step 7. Conclude and publish your Flow

Add your final step of the flow. You can make this anything you want. When you're happy with your flow, you can go ahead and target and publish your Flow to the right users.

If you're running into issues with your flow, reach out to [email protected] and we're happy to help!