Visual Design Studio for creating guides
The Visual Design Studio allows you to create guides, as well as to tag Pages and Features. This section walks through the Visual Design Studio for creating guides.
The Visual Design Studio opens on top of your application in a new tab when you edit a guide. It consists of:
- A toolbar at the top of your page. You can move this to the bottom of your page as needed.
- A preview of your guide step in your application that you can select to edit.
- An edit window to the left of your preview that, depending on what you select, allows you to:
- Configure the activation of a guide in the Activation Settings edit window.
- Edit the style, location, and behavior of a guide step in the Edit Container edit window.
- Add and edit content (building blocks) in your guide.
Toolbar
The name that you give your guide is visible in the top-left corner of the Visual Design Studio. You can edit the guide name from the Settings page of the guide in Pendo OEM.
The top-right corner of the toolbar includes the following:
- Save Layout. Allows you to save your guide as a new layout or to update an existing layout.
- Activation. Allows you to change the activation method for your overlay guide and configure other activation settings for both overlay and embedded guides.
- Step Map. Opens a full-screen view that shows how guide steps are connected through button actions. This map helps you visualize forward and return paths, edit button logic, and preview branching flows.
- Navigation. Opens navigation mode to allow you to go to another page in your application or open a modal.
- Preview. Allows you to preview your guide.
- Exit. Allows you to leave the Visual Design Studio, taking you back to the Settings page of your guide. It's important to leave the Visual Design Studio by selecting Exit rather than closing the tab.
- Save. Allows you to save your progress. Use the down arrow next to the Save button to select Save and Exit instead.
- Alerts. Makes you aware of any relevant notifications. Errors are yellow.
- Move. Allows you to move the toolbar to the top or bottom of the page. This might be useful if you have elements in your application that are behind the toolbar or at the top of the page.
Step tray
The step tray is below the main part of the toolbar. You can select the tab in the middle of the toolbar to close (Hide Steps) or open (View Steps) the step tray.
The step tray includes:
- An Activation card. This shows you what activation method you've chosen for the guide, followed by each step of the guide in order. To view and edit your activation settings, hover over the activation card and select the edit icon.
- Each step of your guide in chronological order. To change the order of steps in your guide, drag and drop a step to another location.
Step Map
The Step Map provides a full-screen visual view of your guide's structure, showing how steps connect through button actions. It helps you understand and maintain complex guides with multiple paths, especially when steps lead forward, return to previous steps, or end with dismissals or external links.
Note: You can't add or reorder steps in the step map. Use the step tray in the Visual Design Studio to manage steps.
In the Visual Design Studio, select Step Map from the top toolbar to open it.
From here, you can:
- View branching paths from buttons or element actions.
- See return paths and endpoints at a glance.
- Select a step or button to preview its content or edit its action.
- Zoom and pan the view to explore larger guide structures.
Guide editing
The guide preview shows one guide step at a time. When you select a guide step, an edit window appears to the left of the preview. You can move this window around the page as needed, for example, if the window covers a part of your screen that you need to see while creating the guide.
The edit window's name and contents differ based on what you're editing:
- If you're adding a new building block to a guide step, the window is called Building Blocks.
- If you're editing a building block, the window is named after that building block, such as Edit Text.
- If you're editing the settings for the guide step, the window is called Edit Container.
From the edit window, you can:
- Add and edit content to a guide step. You can add a new building block to add content to the step, or select an existing building block to edit the existing content from the edit window.
- Edit the step's settings. You can select the container for the guide step to open the Edit Container window, where you can manage the style, location, and behavior of the guide step. The container refers to the blue border that appears when you hover over the edge of a guide.