Retina resolution Guide Center icon

Last updated:


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

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