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.
Content
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.
Development
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.
Visibility
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.
Style
Template
We provide the option for an accordion template which will display the content sections of the Guide Center as expandable menus or you can opt for a "Custom" template. Full access to the HTML, CSS, and JavaScript is provided when the Custom template is selected. The code can be modified by clicking "Edit Code".
Size
Manipulate the width and height to adjust the size of the Guide Center’s content window with the Width and Height properties listed.
Activation
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.
Badge Details
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.
Device Types
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.
Display Criteria
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.
Customization
Like Pendo guides, the Guide Center is fully customizable. Access to the HTML, CSS, and JavaScript allows you to change the content contained within the Guide Center, the look and feel, and adjust how, when, and where it renders within your application. The code can be accessed when "Custom" is selected under the "Style" section of the Guide Center settings.
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.
Adjust Positioning
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:
._pendo-launcher-badge_ {
}
._pendo-launcher_ {
}Adding the following with offset the Guide Center window and badge from the bottom and right of the window:
._pendo-launcher-badge_ {
bottom: 10px;
right: 10px;
}
._pendo-launcher_ {
bottom: 52px;
right: -10px;
}You can then modify the values for bottom, top, right, and left to position where you would like the Guide Center to appear.
Disable the Guide Center from production domains
To disable the Guide Center, navigate to the Classic designer and select Global Settings in the top-right corner. In the new menu, select Guide Center and perform the following steps:
- Disable all of the sections shown.
- Select Save in the bottom-right corner.
- Re-open the global settings and select Copy to Production.
Note: Disabling your Guide Center is only necessary when you want to enable your Resource Center in all of your production domains. You will be able to customize and test your Resource Center in draft or staging states as needed without needing to disable your Guide Center.