The Guide Center (used with the Classic Designer) gives your visitors the ability to access designated guides whenever they desire. This is often used for in-context help, and gives visitors the power to find answers or guidance on demand. For example, instead of linking out to a static support page, you can walk a visitor through a process on your app when they are seeking information around a certain process.
Enable the Guide Center
From the in-app designer, activate the Guide Center by clicking on Global Settings in the top right corner and then clicking the Guide Center tab. Your Pendo account will need admin permissions to access the Guide Center settings.
There are two versions of your Guide Center: Staging and Production. Modifications made in Staging can be promoted to Production by clicking "Copy to Production". The Staging version of the Guide Center will appear in the domains designated in your staging settings.
The Guide Center will be visible once either "General Help" or "What’s New" is turned on. "General Help" will list guides with "Guide Center" checked under their "Activation" tab when editing them in the designer. You also have the option to enable "Search" which will add a search bar to the Guide Center content window, allowing users to search for guides.
"What’s New" serves as a way to publish release notes to your customers. When this section is enabled, you can create new notifications for your users through "What’s New" type guides. The Guide Center will include a red notification number if there are unread "What’s New" guides.
Manipulate the width and height to adjust the size of the Guide Center’s content window with the Width and Height properties listed.
The Guide Center can be launched by a badge that Pendo generates or can be attached to an existing element within your application. When using the latter approach, the Guide Center content window will be revealed and hidden when the target element in your app is clicked.
When using "Launch Via Badge", choose from our generic signpost icon, a question mark icon, or add your own custom image. Click on the color input field to expose a color picker. This can be used to modify the color of the two provided badge icons.
The badge can be set to appear in the bottom-right, bottom-left, or top-right corner of your application. The badge will remain in the same static location, even when the page is scrolled.
If you only want the Guide Center to appear on certain devices, select between "Show on all devices", "Show on Desktop and Tablets only", or "Show on mobile phones only" to select the desired devices.
Add Guides to Guide Center
When creating a new guide or editing an existing guide, you can set guides to activate via Guide Center under the Activation tab.
If the ‘What’s New’ section is enabled, the Guide Center will always display, regardless of content or environment (production/staging). Otherwise, the Guide Center will only show to a visitor when they meet the following guide criteria:
- Guide activation includes "Guide Center" activation method
- The visitor is included in the guide segment
- The page matches location of first (or only) step of guide
- The matched element is visible (if applicable)
If the visitor does not meet the criteria required to display a Guide Center activated guide, then the Guide Center will not display.
This customization allows you to combine guides along with links to additional documentation and support materials for a single help center within your application. For example, you can use a multi-tab layout to separate the guide content from other support materials.
You can also embed a 3rd-party live chat service so that users can reach out to sales or support directly with questions, or just include an email call-out or phone number for your support desk. The customization also allows you to internationalize the Guide Center, and show localized content for users in different locales. The deep customization and flexible content allow the Guide Center to become an integrated element of the application.
It is possible to reposition the Guide Center badge and content window. The window is rendered in a static location. As a result, when the badge icon is moved, the window needs to be adjusted too.
The Guide Center is natively placed in the bottom-right, top-right, or bottom-left corner of the window depending on the option chosen under Global Settings (top-right corner when in the guide designer) > Guide Center.
The position can be adjusted more specifically by adding some Custom CSS within global settings.
Under Global CSS you will see the ability to add Custom CSS.
You will see the following fields under Guide Center styling in the code:
Adding the following with offset the Guide Center window and badge from the bottom and right of the window:
You can then modify the values for bottom, top, right, and left to position where you would like the Guide Center to appear.