Table of Contents

Pendo Guide Creation

Adding a New Pendo Guide

NOTE: This article is intended specifically for tech team or experienced development users with permission to implement Pendo. If you have questions or need guidance about what Pendo is, see this article.

In collaboration with the Product and Creative teams, the Instructional Technologies team has added the Pendo style guides for eCornell into Pendo. It is recommended to use one of the pre-existing Pendo guides, however, if you have a custom use case that would need custom styling reach out to Liz Tarshis at liz.tarshis@cornell.edu to discuss 

After your wireframes have been approved by Product, the following section provides instructions and tips for creating a new custom Pendo guide.

You can only have one "block" (the displayed Pendo tooltip window) per guide.
  1. Create new guide, give it a working title.
    1. If its a Canvas page guide, use titling: Canvas - [Name]
    2. If it's a Codio guide, use titling: Codio - [Name]
    3. Note: Be as specific as possible when naming your Pendo guide! Multiple teams use these guides so keeping clear what purpose the Pendo guide is serving helps keep the structure organized.
  2. Check the product area (select the most appropriate).
  3. Use the Stages on top right of the interface - when you set it to Public it will be live for new users to see.
  4. Paste the URL of the page you want the Pendo guide to appear on in the center content box, it takes you to Pendo Designer editor.
  5. The Pendo designer pops up with an interface to make your guide. This is where you can select one of the premade templates to quickly setup the guide and prepare to publicly stage it (activate it).
    1. You can select some different choices of styles or themes to customize your guide.
  6. Anchor your guide to an element on the selected webpage. Target HTML can lock it over a certain element on the page, so the tool tip block will point to this element when a user triggers the Pendo guide.
Page Location should be set to "Only on this page:" otherwise it will show up universally on the whole site.
  1. Set your guide options, we suggest:
    1. Select Show on Desktop + Tablet.
    2. For Button behavior you should select dismiss buttons (to close the Pendo guide on interaction) or next step buttons (to have the buttons continue onto the next step of the Pendo guide).
If you hover your box over the piece, you can access the pendo HTML
  1. If you want to make another step in the guide, we recommend you copy and paste the HTML of the previous step to maintain the styling throughout your guide.
    1. View steps towards top of the screen allows you to add more progressive steps that show up when you click next/advance the pendo box to the next one. This feature is fairly intuitive, you edit the steps like a presentation slideshow (think Powerpoint).
  2. Set your Activation type.
    1. we typically set these to automatically have the Pendo guide pop-up when you first arrive on a page. Other triggers might be when a user first encounters Codio, H5P, or a new tool that needs supplementary guided instruction.
  3. Navigate at the top of the Pendo editing screen allows you to manipulate the canvas page like you would normally be interacting with it. This is useful to open an embedded accordion feature, click play on a video, or interact with a Codio exercise.
  4. Preview shows you what your guide will be like from the user perspective.
The pink bug is a debugging tool. Use this to debug your guide code and see if there is any errors or quirks to fix. This is a more advanced tool and not recommended for beginners.
Segmenting a Guide

Segmenting in Pendo is used to limit who can see a drafted guide or not. You want to properly segment a guide so not everyone sees it while you are working on the guide, and then remove segments prior to staging the Pendo guide to go live.

  1. Go to Segment and click edit,
  2. "Custom Segment"
  3. Add custom rules
    1. Email - equal to - [type email]
    2. Email selected person will be only one to see it.
      1. This is useful so only you see it and you can test it
Delete the segments when the guide is finished, and when staging is set to Public everyone will be able to view it live.
Adding the "Global - Walkthrough Assignments"

To add the Codio template walkthrough for the first Codio unit that resides on an Assignment page, add the following HTML to the corresponding page:

<div id="pendo-first-assignment>(Insert text here)</div>.

Note: There has to be visible text inside of the HTML element.

How did we do?

Enabling Zoom/"Live Sessions" in a Course

Contact