Embed an InVision Prototype in a Guide (Legacy Designer)

Last updated:

Note: This article covers the Guide experience launched before Feb. 18th 2019. If you became a customer after this date, you can still achieve this via the custom code building block to embed the prototype in step 4.

Pendo created a custom guide to give some customers a preview of a new navigation design using InVision and capture any feedback at the end. This recipe will review how we created this guide.

Prerequisites

  • Pendo admin account permission or the following:
    • User permission to create Guides
    • User permission to publish Guides
  • Your desired target segment
  • Your desired target location within your product
  • Desired help context for target feature or location
  • Your InVision prototype embed code

Estimated time to create: approximately 30 min

Embed an InVision Prototype in a Guide

Step 1. Navigate to Guides in the left-hand navigation to create a new 3-step walkthrough guide.

guide_type_options.png

Step 2. Create the first step in the walkthrough by using a light box to add an introduction to the Guide.

intro_message.png

Step 3. Create the second step by using a light box and embed a live preview using your prototype’s embed code copied from InVision.

Step 4. You should now see a preview of the prototype and how it will render within the guide. Use the layout option to adjust the screen size in your preview.

invision_prototype.png

If you have some trouble with the layout of the prototype, copy and paste our sample codes from our Github account to help you get started.

 

Note: If your guide is connected to a template, it will need to be disconnected in order to edit the HTML. To unlock a guide from the HTML, click the lock icon next to the template under the ‘Content/Design’ section and confirm that you would like to disconnect it from the template. Next, we’re going to paste that same embed code that you copied in the previous step into the html tab.

 

Step 5. Create your third and last step with a poll to gather feedback on your prototype.

prototype_poll.png

Step 6. Test in staging to adjust your guide as needed. If you don’t have a staging environment setup, simply update the target segment as ‘Only Me’ & set the Guide status to ‘Public’ to view in your application and readjust as you need.

segment_setting_only_me.png

Step 7. When you’re ready to launch, update the target segment to ‘Everyone’ (or your own custom segment) and the Guide status to ‘Public.’

segment_setting_everyone.png

 

Want help with custom Guides? Don’t worry, we can help you! Reach out to professional services (services@pendo.io) for a discovery call.

Was this article helpful?
1 out of 1 found this helpful