Using Custom Code Block

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:

custom-code-block.png

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:

inspect-example.png

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?

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