More on Custom Code Block

Note: This article covers the new Visual Design Studio Guide experience, launched Feb. 18th, 2019. If you were a customer before this date and would like to use the Classic Designer, you can refer back to the previous version.


Visual Design Studio is made to be more user-friendly to non-technical users, but the Code Block allows technical users to leverage additional customization options to their Guides. Once you select the Code Block, you will be prompted to add HTML, CSS, or JavaScript:


How Do I Find Building Block Classes?

Each Building Block will have an ID associated with it. Currently, you can use your browser inspect feature to find the class to use within your custom code. When Chrome users, for example, right-click and inspect an element in a Guide preview, they will see something like the following:


Using this example inspection, this example shows p#pendo-text-521f03a1…: p is the class #pendo-text-521f03a1 is the unique ID

Unsure about CSS selectors? Take a look at this W3 article for reference.

How Do I Add Global Styling to My Guides?

Coming Soon! With the Visual Design Studio, we are currently working on an option to allow administrators to set up Global Styles, called Themes, without having to use CSS. Once a Global Style is set up, Guide Theme options will be inherited when users create a new Guide.

Themes is currently available within the Beta Program. If you are a Pendo administrator, you will see a Themes button in the “Guides” section of Pendo you can test out.

How Do I See Number of Button Clicks For My Guide?

You can tag a Guide button as a Feature to see who and how many times it was clicked. Learn more using the Tag a Button as a Feature article.

Can I Turn Off Code Block For My Pendo Subscription?

Yes. If you wish to turn Code Block off for your Pendo Subscription, please reach out to your Pendo Representative to add your request.