Activate your Resource Center

Last updated: March 03, 2025 17:05

There are two activation methods for launching a Resource Center in your application:

Badge. The visitor opens the Resource Center by selecting an icon that you place in your application.
Target element. The visitor opens the Resource Center by selecting an existing element in your application that you specify.

Each of these activation methods has its own configuration options.

Choose an activation method

You choose and edit your activation method from the Visual Design Studio.

From the left-side menu, go to Guides > Resource Center.
From the table in the Resource Center page, find and open your Resource Center.
From the Draft tab of your Resource Center's Settings page, select Manage in my app.
Open the Activation Settings window. You can do this in two ways:
- Select the Activation shortcut to the left of the Navigation option in the action bar at the very top of the page.
- Hover over the first (Activation) card in the modules action bar at the top of the page and select the edit icon.
Select either Badge or Target Element and then follow the instructions for either Configure badge activation or Configure target element activation in this article.
- You must deselect Badge to select Target Element. You can't turn on both at the same time.
- You can't choose Confirmation as the activation method for your Resource Center. This is only available for guides. For more information about this option, see Activate your guide.

Configure badge activation

To configure your Resource Center to be activated (opened) when your visitors select an icon on your application, turn on Badge activation using the toggle in the Activation Settings window and then select Edit Settings. This opens the Badge Settings window. From here, you can customize the badge styling, location, and behavior.

Note: The alert badge is different from the Resource Center badge. The alert badge is the number inside a circle that overlaps the Resource Center badge when there are notifications to see inside the menu. An alert badge also appears on the right side of any module that has updates for the visitor to see. For information about styling the alert badge, see Style your Resource Center.

Badge styling

To edit the badge styling, open the Styling tab of the Badge Settings window and edit the following:

Badge icon. The default badge icon choices are a circle of a set size. You can also upload your own image with a maximum size of 30 MB. Any custom image is automatically scaled to fit the badge size. To optimize load times, we recommend keeping the image as small as possible while also maintaining image quality. We also recommend that your custom image is a circle.
Color. The default badge icon color is set to Pendo pink. To change this, select the color and use a hexadecimal, RGB numbers, or visual color selector to set a different color for the icon. This only changes the color of the default icon options that you see in the Badge Icon dropdown menu. To change the color of a custom image, ensure it's the color you want when you upload it.
Z-index. The Z-index specifies the stack order of the badge, which defines whether it appears in front of or behind another element on the page. By default, the Z-Index is set to a very high number (19000) so that it appears above any other element in your application. You can increase or decrease this number according to your needs.
Alert badge position. You have four options for where the alert badge appears in relation to the badge icon: top-left, top-right, bottom-left, or bottom-right. If you also want to change the color of the alert badge and the font within it, follow the instructions in Style your Resource Center.
Badge size. The default badge icon size is 56 px. The smallest badge icon size you can choose is 50 px. The largest badge icon size you can choose is 200 px. To reset to the default badge icon size, select Reset to Default.
Accessibility. For the benefit of screen readers, you can edit the ARIA labels for the badge icon.

Badge location

To edit the badge location and position, open the Location tab of the Badge Settings window and edit the following:

Page Location. Choose either:
- Sitewide to deliver the Resource Center across your application.
- Only on this page to deliver the Resource Center on a specific page in your application. If you haven't tagged the page that you want to add the Resource Center to in Pendo, follow the instructions in Page tagging.
Badge position and offset. The default location for a Resource Center badge is the bottom-right corner of the screen with a 10 px offset. You can place your Resource Center badge in any of the four corners of your screen or in the bottom-middle, top-middle, right-middle, or left-middle of your screen.

Badge Behavior

To control when the badge launches the Resource Center, open the Behavior tab of the Badge Settings window and edit the following:

For Guide Behavior, choose from one of the following two options:

Show on badge hover or click. This opens the Resource Center both when a visitor hovers over the badge and when they actively select it.
Show only on badge click. This opens the Resource Center only when a visitor actively selects the badge icon.

For Device Type, choose from one of the following three options:

All devices. This shows the Resource Center on mobile, tablet, and desktop versions of your application.
Desktop & tablets only. This only shows the Resource Center on tablet and desktop versions of your application.
Mobile only. This only shows the Resource Center on mobile versions of your application.

Configure target element activation

To configure your Resource Center to be activated (opened) when your visitors select a specific element in your application:

Turn on Target Element activation using the toggle in the Activation Settings window. This hides the Activation Settings window and prompts you to choose a target element in your application.
Choose a target element. You can see which element you're selecting based on the red-dotted box that encapsulates elements in your application as you move your mouse around the screen. When you've selected a UI element, the dotted red line turns to a solid red line. You can then edit this selection in the Target Element Settings window that appears.
Edit your selection using the options in the Location and Behavior tabs of the Target Element Settings window.
Select Done to finish.

If your Resource Center is activated from a target element and a visitor isn't eligible for any content within the Resource Center, the Resource Center still displays when the target element is selected with an error message stating that there's no content. If you don't want this error message to display, you can either:

Ensure that every visitor is eligible for at least one module in the Resource Center.
Change the Resource Center's activation method to Badge. For instructions, see Configure badge activation in this article.

Location tab

Open the Location tab of the Target Element Settings window and edit the following:

Use the Position on Page dropdown menu to choose where the Resource Center opens relative to the target element on the page. You can choose whether the Resource Center opens above (Top), below (Bottom), to the left (Left), or to the right (Right) of the element you selected. The default is Auto, which attempts to choose the optimal location for the Resource Center to open relative to the element.
Under Page Location, choose either:
- Sitewide to add the Resource Center across your application. The Resource Center is only available on pages where the target element is present.
- Only on this page to add the Resource Center to a specific page in your application. If you haven't tagged the page that you want to add the Resource Center to in Pendo, follow the instructions in Page tagging.
Under Element Location, either keep the Suggested Match, or one of the following other options:
- Parent Element. Choose this if you want to choose a larger clickable area (the relative parent element) of the element you selected.
- Custom CSS. Choose this if you want to refine your element selection. For guidance on using CSS for targeting UI elements, see Using CSS rules for guide targeting.

To start again and choose a different element, select Clear Selection.

Behavior tab

To control when the target element opens the Resource Center, open the Behavior tab of the Target Element Settings window and edit the following: