Create a guide

This article details how to create a guide in the Visual Design Studio. You can use guides for highlighting new features, driving preferred behavior, and providing in-context support. Guide types include badge-activated tooltips, polls to collect direct feedback from users, and automatically activated lightboxes and banners. 

For information on creating embedded content, see Create embedded content.

To get started with creating a guide, in the left-side menu, go to Guides > Guides and then: 

1. Select Create Guide in the top-right corner. Alternatively, you can select the arrow and select Create guide. If you want to create a guide in Adopt Studio, select Create Adopt Studio guide, or if you want to create a guide using AI, select Create guide with AI.
   
2. On the Create Guide page, if you have multiple web applications set up in your Pendo account, choose the application where you'd like the guide to display.
3. 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.

4. Select Overlay to make your guide appear above the page's content. 
   
   

5. In the Layouts section, select a layout. You can choose from the default layouts that are provided or a saved layout that you've used in the past to create a guide. After you select a layout, the guide's details page displays. For more information, see Use guide layouts.
6. Give the guide a name, and select a product area in your app where you want the guide to display.
   
   Tip: It’s best practice to have naming conventions for easier searches and color-coordinated groups for easier identification for when you have multiple guides.
7. If required, to create a new product area, select +Create Product Area, give it a name, and select Create Product Area.
8. Select the Content area, enter the application URL where you want to open the Visual Design Studio, and select Launch Designer. It opens in a new tab.

Add building blocks to add content to your guide

Building blocks are used to add content to guides. There are multiple building blocks that allow you to add and format text, buttons, images, polls, and embedded videos.

When you open the Visual Design Studio, it launches on top of your application. The designer is accessible to any Pendo user, with the exception of those who have Read Only permissions. 

You can make any initial edits to your guide within the Edit Container box. See Take a tour of the Visual Design Studio for more information about using the Edit Container box to style your guide.

1. When the Visual Design Studio is open, select View Steps to display the Step Tray. This shows all your customization options and guide steps. 
   
   

   
   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.

2. To add a step to your guide, select + Add Step in the Step Tray. 
3. To edit guide settings of any step, select the step and hover over the preview to open the Edit Container box. 

Design your guide with the Edit Container menu

The Edit Container menu contains multiple options for styling your guide, editing its location, and controlling its behavior.

1. Move through the Styling, Location, and Behavior tabs in the Edit Container box, making any required changes to the settings. 
2. 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. 
   
   
   
3. If you need to add a new building block to your guide, hover between items to see the blue line and add a building block. Building blocks are used to add content to guides and have controls to add and format text, buttons, images, polls, and embedded videos. For more information about building blocks, see Add 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 helps you save your progress as you go.

4. To finish, select Done.
5. When you've finished, select Save to save your changes and select Exit to leave the Visual Design Studio.

Styling

Note: If you are editing your guide using a theme, change the theme to Custom to see all these options.

• Theme. The guide theme you’re using to style your guide.
• Step Name. The name of the step that you’re currently previewing in your guide.
• Background color.
• Padding. Container padding, set in pixels (px) using the numbers representing the top, right, bottom, and left of the container.
• Border Color. The color of the container’s border, set with a hexadecimal, RGB numbers, or the visual color selector.
• Border Width. The width of the container’s border, set in pixels (px).
• Border Radius. Corner rounding of the border, set in pixels (px).
• Drop Shadow Color. The color of the container’s shadow, set with a hexadecimal, RGB numbers, or the visual color selector.
• Drop Shadow X, Y, Blur, and Spread. Angle (X), distance (Y), softness (blur), and size (spread) of the container’s drop shadow.
• Caret. If applicable, the Width and Height of the triangle arrow attached to the container in pixels (px).
• Backdrop Color. The color of the UI behind the guide, set with a hexadecimal, RGB numbers, or the visual color selector. You can also set the backdrop opacity using the slider below the visual color selector.
• Close Button. Provides a cross (X) in the top-right corner to allow people to close the guide.
• Dimensions. Guide width in pixels (px).
• Z-Index. The order of the container for overlapping elements in the UI. The higher the z-index, the further forward in the UI the element is. Only change this if your guide is hidden by something with a higher z-index, such as a model.

Location

• Position On Page. The alignment of the guide in the UI.
• Offset. Adjustment in pixels (px) to preposition the guide in relation to its alignment.
• Element Location (if applicable).
• Page Location. Sitewide or Only on this page.
• Settings > Filter Dynamic Elements on Selection. Turn this setting on to filter out any dynamic elements on a Feature element. For example, in some elements, there are user-specific strings that change as each user navigates through the app. Filtering out these strings ensures better performance when tagging a Feature and gives a more accurate tag. It also ensures there is no duplication of data.
• Anchor to Element. You have two options: anchor to a surface element in the UI, or attach to an existing tagged Feature.
  

• • Target Element. Anchor the guide or badge to a UI element. The system chooses an element on your screen, as indicated by a red border around the element. This selection offers additional options for defining the anchor:
    • Suggested Match. This is the automatic rule created by Pendo. Sometimes, this doesn’t ideally capture what you need it to, isn’t a unique match on the page, also exists on other Pages in your application, or isn’t static, which is why we’ve created the following additional options for creating rules.
      
      
  • Parent Element. This is useful when the red bounding box used to highlight and select an area in your application doesn’t cover the entire clickable area. This option selects the next largest container, for example, the entire button, for the originally selected element, for example, text within the button.
    

    Note: Extension applications don't have the option to show the parent element.

  • Custom CSS. If you’re comfortable with using Inspect in Google Chrome to investigate the HTML and CSS of your application, this option allows you to add a custom rule based on the elements and attributes available in the area you selected.
    
    The CSS performance meter highlights how your selected CSS affects the performance of your guide. The meter provides early feedback on the selector. It suggests improvements for slow selectors to help you use the CSS for effective guide targeting. For more information, see CSS selector performance for guide targeting.
• Select Existing Feature. Choose this to position the guide or badge on an existing Feature. Features are named objects used for analytics and persist even if you make changes to the Pages they're on. This means that guides and badges that are positioned based on Features are more stable than guides and badges that are anchored to surface elements but take more time to set up. You can't tag Features while in Selection Mode. For more information on Features, see Tagging and viewing Features.
• Guide persistence. Turn on Guide Persistence to activate your guide when a particular element appears on your page and to ensure the guide persists even if that element disappears. Guide persistence can be activated on any step of your guide. For more information, see Activate your guide.
  

Behavior

The Behavior tab shows the actions for all buttons in the container. These actions let you add complex Guide controls and navigation without any coding. For more information, see Guide button actions.

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.

When you preview a guide, you can only see that guide. Any additional guides used by this guide won't be available for preview. You need to test the guide outside of ‌preview mode to make sure any additional guides work as expected. 

Preview mode is the most reliable way to see what your guide looks like. Because both the Visual Design Studio and Preview are loaded into your environment, their display is affected by any settings in that environment. This difference stems from how your own site's CSS interacts with the guide. The main guide page in Pendo doesn't have access to your app's code so won't show how the guide truly looks when displayed there. 

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:

1. Segment the guide to yourself. For more information, see Segments.
2. Locate the Segment tile in the guide's details page and select Edit.
3. Select Custom Segment from the dropdown 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:
   
   
4. When you're finished, select Save Custom Segment and then select Save within the Segment tile.
5. 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.
6. 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. 

1. In the guide's details page, in the Activation tile, select Manage in my app. You're returned to the app where you want your guide to display and the Activation Settings box displays.
   
   
2. To activate the guide, select an activation option:

• • Automatic. Guide appears once automatically until dismissed or advanced.
    • Ignore Guide Throttling Settings. Eee 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.
    

Segment and publish your guide

If you’re satisfied with your guide, navigate back to your guide’s details page to readjust 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 goes live, and, if needed, when it is no longer 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. 
• Public. The guide is public to all visitors targeted in the guide’s segment and appears in the designated "Location" on all environments with Pendo installed. Public guides 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

1. In the guide's details page, in the Scheduling tile, select Edit.
   
2. Turn on the Start Date/Time button and define the required settings.
3. Turn on the Expiration Date/Time button and define the required settings. 

Note: If you don’t set an expiration date and time, then you'll need to remove it manually so that the guide isn't shown for long periods of time. If you leave a guide in Staged state with a scheduled start date, this doesn't trigger moving the guide to Public when it reaches the start date and time. These changes are reflected in the staging environment only. You need to set the guide to Public and then set the start date and time. The status changes to Scheduled.