Building flows on Dynamic Elements (Drop-downs, Pop-outs, and More!)
Many pages have elements that aren't immediately visible upon page load. We call these dynamic elements. Drop-down menus and pop-out modals are common dynamic elements that require a user's action (clicking a button, tab, or menu) in order to be exposed.
By mimicking user action while using the editor, you can place hotspots and tooltips on most dynamic elements to create flows similar to this:
Hotspots On Dynamic Elements
- Hotspots work independently from each other and will appear at once as a group: if any hotspots in your flow are on dynamic elements, all other hotspots will appear first and continue to persist (unless clicked) until the dynamic element is exposed
Tooltips On Dynamic Elements
- Tooltips are sequential and will always launch in order: if your first tooltip is hidden on a dynamic element, the entire flow will not appear until that element is visible to your end user
- We recommend placing the first tooltip in a sequence on an immediately-present and visible element so that your user is not required to find the tour themselves
Slide-outs On Dynamic Elements
- If you'd like a slide out to be tied to a dynamic element, you'll need to combine your slide out with a tooltip or hotspot.
Placing Hotspots & Tooltips On Dynamic Elements
To place hotspots and tooltips on dynamic elements:
- Select the 'Navigate' in the upper portion of the screen which will allow you to navigate to the page where these elements will appear and create a new hotspots or tooltip
- While in 'Navigate' mode, open up the dynamic element and then select 'Design' or 'Continue Building' (at the bottom of the screen).
- If you've changed URLs, you will be prompted to add a 'page change'. If not needed, select 'Cancel' to continue building your flow.
- Place the tooltip or hotspot on the now-exposed element
- In the editor, when your element is not exposed you will see an error message that states "This [hotspot/tooltip] isn't attached to anything visible right now. You can click to reposition" -- you can still edit your text/HTML and when your element is again exposed, the tooltip or hotspot will re-position itself onto it
- You can also preview your flow to verify that your tooltip or hotspot is attached to the right element (click the eye icon in the bottom right of your editor to preview the current flow or group)
- While most hotspots and tooltips can attach to most dynamic elements, we don't currently support elements that appear and disappear upon hover
- If your dynamic element exists on a different URL, you'll have to create a separate flow on that URL to place hotspots or tooltips