Guide Center (Classic)

Last updated:

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.

Note: The Guide Center search is limited to guides that have an activation type set to "Guide Center".

"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.

Note: "What’s New" is only available when using Agent version 1.6.0 or higher.





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".


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.

Note: "Launch Via Existing Page Element" is only available when using Agent version 1.6.0 or higher.


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.


Note: Significant customization to the Guide Center requires front-end development. If you are interested in working with Pendo on a custom project, our Professional Services team can be reached at

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.

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