Retina resolution Guide Center icon

Overview

Pendo allows you to replace your Guide Center icon with a retina resolution icon. Follow the steps below to update your Guide Center icon.

Replace Guide Center Icon with Retina Resolution Icon

• In Pendo, click on the “Guides” tab on the left
• In the top right corner, click “Manage Guides In-App”
• From here, click “Global Settings” in the top-right corner
• Under “Global CSS”, check the radio button next to “Add Custom CSS”
• Scroll to the bottom of this code and paste the following under “Your Custom Classes/IDs":

._pendo-launcher-badge_ {
  box-sizing: border-box;
  background: url("YOUR URL HERE");
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  height: 40px; /*customizable*/
  padding-left: 40px; /*must match width*/
  width: 40px; /*customizable -- must match padding-left*/
}

Replace YOUR URL HERE with the URL of the desired retina icon. This can be hosted by Pendo if desired by uploading the image to a guide template and using the storage.googleapis.com URL that is generated. Additionally, the height and width of your new launcher icon are customizable — please note the padding-left parameter has match your width parameter.