This article outlines how to create a guide for a mobile application using the Visual Design Studio.
Requirements
You must have the correct role permissions to create or edit guides.
Step 1. Create a guide
- From the left-side menu, go to Guides > Guides.
- In the Guides page, select Create guide.
-
Select the relevant mobile app from the dropdown menu.
- Select your preferred guide layout.
Step 2. Add guide content
After you create the guide, in the guide's details page, name it by selecting the default name in the top-left corner. Optionally, assign a Product Area and guide category using the dropdowns below the guide name.
Tip: As you'll most likely have multiple guides, it’s best practice to set naming conventions and use groups for easier searches.
Next, select Edit in my app in the top-right corner of the Content section.
Edits to the guide can be made from within the Edit Container window. The container's default settings are set by the app's theme.
- To edit the container settings, change the theme to Custom.
- After the edits are made, select Done.
- Hover over the items within the guide preview and select to edit.
- To add a new building block to the guide (button, title, image, text, poll, etc), hover between items until a blue line displays.
- Select + to add a building block.
Step 3. Choose guide transition animation
Select how a guide transitions in and out of each step.
To change the transition, go to Edit Container > Transitions > Animations Type and select animation type, duration, and direction where applicable. In addition to the default transition type, which is None, you can also select Fade, Pop, or Slide.
Tip: For multi-step, full-screen, or pop-up guides, we recommend using the slide animation.
Note: Transitions currently aren't available for tooltips.
Step 4. Activate your guide
When creating a guide, you need to decide how it will be activated. Available activation options can be found in the action bar in Activation Settings.
App launch
The guide launches after your mobile app is opened. Ideal for survey guides and announcements that aren't page-specific, such as new user onboarding or showing what's new on the new app version. The guide is launched to segmented visitors as soon as the startSession method is called and the mobile session starts.
Page view
The guide launches after your visitor goes to a specific page in your app. This activation method is ideal for page-specific onboarding or feature announcements, such as guiding new visitors through a checkout flow or notifying visitors that a screen is under maintenance.
To set this up, select the pages in the app where the guide should appear. You can choose from already-tagged Pages in the dropdown menu. Your partner configures which Pages are tagged in your mobile application. If you need to publish guides to a Page that isn't currently tagged, contact your partner to request that the Page be added.
Note: Different guide steps can have different pages set for activation. Deep links or organic user navigation with tooltips are recommended to direct the user to the next step in the guide on a different Page.
Target element
The guide launches after a visitor selects a specific element in your app. Ideal for onboarding or contextual help.
After selecting the desired Page, select an element that'll activate the guide by selecting it in the screenshot. If the UI element hasn't been saved, you'll be prompted to save the new UI element.
Track Events
The guide displays based on one or more Track Events. This is ideal for showing a guide after a process completes or for troubleshooting when a user receives a specific server response.
There are two ways to activate a guide using Track Events:
- Track Event activation: When you select Track Events as the activation type, you're taken directly to the Track Events Settings page. Select one or more events to launch the guide. The guide displays when any of the selected events occur. Use the OR option to include multiple events.
- Track Event property activation: Use property-based logic to define when the guide appears. Select the property type, operator, and value. Use the OR option to include multiple property conditions.
Step 5. Test the guide on a device
It's crucial to test how the guide looks on an actual mobile device prior to publishing because the Visual Design Studio provides a web preview of the guide.
To test the guide, select Test.
Note: If your device isn't connected, you'll need to connect your device. For more information, see Testing guides on a mobile device.
During the test, Pendo disregards segments and throttling rules and shows the guide each time. Any target elements, pages, and activation methods specified in the guide must be present for this preview method.
After you finish working on the guide, save your changes using the top-right Save button and select Exit to leave the designer, or select the dropdown icon next to Save and choose Save and Exit.
Step 6. Segment and schedule the guide
When you’re satisfied with your guide, go to your guide’s details page to adjust the guide’s segment and scheduling.
- Select the segment of visitors who'll receive the guides. The default segment is Everyone. You can see how many users are included in your selected segment and the number of eligible visitors.
- Schedule when your guide will go live (and, if needed, when it'll no longer be active).
There may be instances when the number of eligible visitors is smaller than your segment. This may be because some of your users are still using an old app version with an old SDK version. In this case, Pendo's new features may not be available to these users.
Important: Guide segments include visitors who have been excluded from analytics unless they're explicitly excluded in the segment.
Step 7. Publish and validate the guide
To publish your guide, update the guide’s status to Public. Because there is no staging option for mobile guides, never publish a mobile guide without testing its full flow on a mobile device. If you're included in the guide segment and want to see the guide on your device after publishing, you'll need to:
Disconnect your device from Pendo by selecting the Pendo FAB on your device and then selecting Exit pairing mode.
Close your app and relaunch it (guides are sent to the device at the beginning of the "session").
If you are included in the guide's segment, you'll be able to see the guide in your app by triggering the guide's "activation" criteria.
Note that after a user views the guide, they won't see it again unless it's set to "show every time".
Frequently asked questions
Can I test a mobile guide with only an IP address?
Currently, there's no native solution to do this. You can create a test segment that segments users to the development app version.
What counts as a guide being dismissed and not eligible to show again?
In some cases, your users may put your app in the background on their phone by pressing the home button on Android devices, or swiping up or touching the ID button on iOS devices. When this happens, if a guide is displayed, it won't be dismissed and is expected to reappear when the app is launched again. Your guide is considered dismissed (and not expected to show again) when selecting a button with a dismiss action, selecting the x buttons in the corner, completing the last step of the guide, or by closing the app.
Note: Selecting the Back button on an Android device dismisses pop-up guides.