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.
Step 2. Create the first step in the walkthrough by using a light box to add an introduction to the Guide.
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.
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.
Step 5. Create your third and last step with a poll to gather feedback on your prototype.
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.
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.’
Want help with custom Guides? Don’t worry, we can help you! Reach out to professional services (services@pendo.io) for a discovery call.