This article details how to create a guide in the Visual Design Studio. This includes highlighting new features, driving preferred behavior, and providing in-context support.
This video provides a quick overview:
Requirements
To use the Visual Design Studio, Pendo users must have one of the two following permissions:
- Pendo Administrator Permissions
-
Pendo User Permissions to:
- Create guides from Layouts
- Manage published guides
- Create guides & layouts from scratch
Get started
-
In the Navigation bar, go to Guides > Guides and select +Create Guide.
- In the Create Guide page, if you have multiple web applications set up in your Pendo account, choose the application where you would like the guide to display.
- Select a category for the guide. This lets you see recommended layouts for this category, either from the default Pendo layouts or from your Saved Layouts.
Note: A guide can only be assigned to one app.
- In the Layouts section, select a layout. You can choose from the default layouts that are provided or a saved layout that you have used in the past to create a guide. Once you select a layout, the guide details page displays.
- Give the guide a name, and select a product area in your app where you want the guide to display.
Tip: Because you will soon have multiple guides, it’s best practice to have naming conventions for easier searches and color-coordinated groups for easier identification. Take a look at naming best practices help article to learn more. - If required, to create a new product area, select +Create Product Area, give it a name, and select Create Product Area.
- Click in the Content area, enter the application URL where you want to open the Visual Design Studio, and click Launch Designer. The designer opens in a new tab.
Design your guide
When you first open the Visual Design Studio, the Guide Designer launches your application. It includes multiple tools, as well as a Guide preview. The Designer is accessible to any Pendo user, with the exception of those who are "Read Only."
See Understanding Visual Design Studio for more information.
You can make any initial edits to your guide within the Edit Container box. See Get started with Visual Design Studio for more information about using the Edit Container box to style your guide.
-
When the designer is open, click View Steps to display the Step Tray. This shows all your customization options and guide steps. If you want to target an element but the "Action Bar" is covering it, move it to the bottom of the screen by clicking on the dual arrows button in the top right-hand corner of your screen.
Tip: If you want to target an element but the Action Bar is covering it, move it to the bottom of the screen by clicking on the dual arrows button in the top right-hand corner of your screen. - To add a step to your guide, click + Add Step in the Step Tray.
- To edit guide settings of any step, select the step and hover over the preview to open the Edit Container box.
- Move through the Styling, Location, and Behavior tabs in the Edit Container box, making any required changes to the settings.
-
To edit the guide container, hover over a guide container (the edge of the guide) in a step to edit its settings. The styling, Location and behavior options display after you click the edge of guide container for additional customization.
-
If you need to add a new building block to your guide, hover between items to see the blue line and add your desired building block. Building blocks are used to add content to guides and have controls for easily adding and formatting text, buttons, images, polls, and embedded videos. For more information about building blocks, see Adding guide content using building blocks.
Tip: Hold Option on Mac/Alt on Windows to view all current Building Blocks and their bounding boxes.
Tip: Periodically save your changes as you edit your guide. This will help you save your progress as you go.
- To finish, select Done.
- Once you are finished, select Save to save your changes and select Exit to leave the designer.
Preview your guide
Guide preview lets you launch a guide without publishing it or with segment restrictions. The preview UI shows the activation method, target element, and target page, with visual indicators of whether or not you have met the criteria for the guide to display. When the guide displays, you can test all guide functionality as expected and easily restart the guide.
Select Preview in the top navigation bar.
Manage your guide
When you finish creating your guide, you can:
- Test it
- Activate it
- Segment and publish it immediately
- Schedule when to publish it
Test your guide
To test your guide:
- Segment the guide to yourself. See Segments for more information
- Locate the Segment tile in the Guide Details page and select the Edit icon.
- Choose the dropdown to select Custom Segment and add a segment rule so that “Visitor ID” equals yourself.
For example, if my Visitor ID is my email address, my rule would look like this:
- When you are finished, choose Save Custom Segment and then select Save within the Segment tile.
- Review your guide details and update your guide status to Staging (if you have a Staging setup) to preview your guide in your Staging Environment.
- If not, update the status to Public. Since the guide is segmented to just yourself, the Guide is only visible to you.
Activate your guide
If you didn’t set your activation method when creating your guide, you can do it now.
-
In the guide page, in the Activation tile, select Manage in my app. You are returned to the app where you want your guide to display and the Activation Settings box displays.
- To activate the guide, select an activation option:
-
-
Automatic: Guide appears once automatically until dismissed or advanced.
- Ignore Guide Throttling Settings - see Throttling and Ordering for information about these settings and why you can choose to ignore them.
- Repeat Guide Display - see Guide Activation Options for information about Repeat Guide Display
- Badge: Guide appears after a visitor clicks or hovers over a badge icon. See Guide Activation Options for more information
- Target Element: Guide appears after a visitor clicks on a targeted element. See Guide Activation Options for more information
- Show my guide on: Select which device to show the guide on when activated.
-
Automatic: Guide appears once automatically until dismissed or advanced.
Segment and publish your guide
If you’re satisfied with your guide, navigate back to your Guide’s Detail Page to re-adjust the segment to the correct audience.
To publish your guide, you have two options to choose from:
- Publish your guide now by updating the Guide status to Public.
- Schedule when your guide will go live (and, if needed, when it will no longer be active).
Set guide status
See Changing Guide Status for more information.
- Draft - The guide does not appear in any environment but can still be edited.
- Pending Review - Guide creators and contributors can use this status to indicate that their guide is awaiting review. Publishers and reviewers can use this status to filter the guides list to see which guides are awaiting review. Setting the guide status to Pending Review does not push the guide to Staging.
- Staged - The guide is only visible on your designated staging servers ready for testing and validation. Staging servers can be managed by admins of your subscription here. More information on staging here.
- Public - The guide is public to all visitors targeted in the guide’s segment and will appear in the designated "Location" on all environments with Pendo installed. Public guides will still appear on your designated staging servers.
- Disabled - The guide is no longer public. Use it to filter for guides that have been published.
- Delete - Deletes the guide and all of its data permanently.
Schedule your guide
-
In the Guide Details page, in the Scheduling tile, select Edit.
- Toggle on the Start Date/Time button and define the required settings.
- Toggle on the Expiration Date/Time button and define the required settings.
Note: If you don’t set an expiration date and time, then you will need to remove it manually so that the guide is not shown for long periods of time. If you leave a guide in Staged state with a scheduled start date, this does not trigger moving the guide to Public when it reaches the start date/time. These changes are reflected in the staging environment only. You need to set the guide to Public and then set the start date/time. The status changes to Scheduled.
Additional resources
Visit the Pendo Academy for guidance on creating multi-page walkthrough guides. If you're on our US domain, visit the US Pendo Academy. If you're on our EU domain, visit the EU Pendo Academy.