Using Custom Code Block

Last Updated:

Visual Design Studio is designed to be user-friendly to non-technical users. However, the code block allows more technical users to leverage additional customization options to their Guides. Once you select the code block, you are prompted to add HTML, CSS, or JavaScript:

custom-code-block.png

How do I find building block classes?

Each building block has 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:

inspect-example.png

Using this example inspection, it 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.

Note: Pendo does not provide support for custom code blocks.

 

How do I add global styling to my guides?

Administrators can set up global styles, called Themes, without having to use CSS. Once a global style is set up, Guide Theme options are inherited when users create a new guide. For more information on themes, see Creating a Theme.

 

How do I see the 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 the code block off for my Pendo subscription?

Yes. Just reach out to your Pendo Representative to add your request.