Contact Us

Guides

Pendo Help CenterGuidesBuilding Blocks

Building Blocks

note: This article covers the Guide experience launched Feb. 18th 2019.

Overview

Similar to how you would stack a house of block toys, a Guide is comprised of “Building Blocks.” Each building block will offer you an option to add:

  • Text
  • Button
  • Multi Button
  • Image
  • Open Text Poll
  • Yes/No Poll
  • Number Scale Poll
  • Multi Choice Poll
  • YouTube Video
  • Custom Code

building-blocks.png

Text

Choose this Building Block to add any type of text you desire. Once you choose the text option, you will see the following filler text and options:

text-block.png

For text blocks, you have built in Theme styles for Guide title, subtitle and paragraph:

text-block-theme-styles.png

If you choose the custom options, you will see additional styling options to apply to the entire text block:

text-block-custom-styles.png

If you would like to format certain words within your text block, use markdown syntax. Take a look at the Markdown Syntax article to learn the supported syntax.

Single Button

Once you choose the single button Building Block, adjust the display text and choose your button action:

edit-button.png

note: You may see additional button action options in grey that aren’t available for you. You will see additional options change once you add a poll building block.

If you need, you can add compound actions to your buttons so it performs multiple actions for the user. For example, I can setup the button to dismiss the Guide and open an external link:

button-add-action.png

button-add-compound-action.png

When you’re ready, customize your button style:

edit-button-1.png

edit-button-2.png

If you want, you can also customize the hover state:

edit-button-3.png

Multi Button

If you choose multiple button options, you can add 2 or 3 buttons.

multi-buttons-options.png

Once you choose how many you would like, you will be prompted to edit each button one at a time.

multi-buttons.png

hover-to-see-edit-options.png

Just like the single button, you will be able to style your buttons (including hover states) as you want.

Image

When you choose the Image block, you will see an option to upload your file:

image-block.png

Supported file types include: .jpeg, .png, .svg, .gif

Open Text Poll

When you choose this open text poll option, you will be prompted to edit your question:

open-text-poll-block.png

Once you’re happy with your question, choose apply. If you want to adjust the size of your open text field, hover over the field and choose the edit icon:

open-text-field-edit.png

open-text-field-edit-options.png

Yes/No Poll

This Yes/No Poll will allow you to quickly add your question and auto add your Poll options as "Yes" and "No."

note: Only 1 Yes/No Poll can be added to a Guide step.

yes-no-poll-block.png

Number Scale Poll

If you wish to have an automatic number scale, use this building block. The minimum number is 1 and the maximum number is 10.

number-scale-block.png

Multi Choice Poll

Use this block to add your own multiple choice options. Once you select the building block, you can add your question:

multi-choice-block-question.png

Then, hover over the multiple choice dropdown to edit and add all the choices you want to give your user: multi-choice-block-options.png

YouTube Video

warning: YouTube supports Chrome, Firefox and Safari browsers. If you need to check your browser’s version compatibility, use YouTube’s verification site. If you have a different Video provider, you can still leverage the Custom Code Block to embed your video.

Use this block to embed a YouTube video in your Guide without having to use a Code Block. Once you choose this building block, you will be prompted to add a YouTube link:

youtube-block.png

By default, the video will automatically adjust the width to the size of your Guide container. If you want to adjust the size, toggle the "fill container" option to the off state and adjust your size in pixels.

youtube-block-edit-size.png

This Building Block requires a minimum Agent version of 2.16. or higher.

note: As best practice, autoplay is disabled since it can be more disruptive than helpful to a user. It can also negatively impact user experience if a user doesn’t realize their sound volume on their device.

Custom Code

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

note: You can only have 1 code block per Guide step. Code block can be used to affect every step within your Guide or a singular element as desired.

Frequently Asked Questions

To use the Visual Design Studio, Pendo users will need some of permissions:

  • Pendo Administrator Permissions OR
  • Pendo User Permissions
    • Manage Published Guides
    • Create Guides & Templates from Scratch
    • Create Guides from templates

Take a look at the User Roles (Matrix View) to learn more about what each specific permission will allow you to do in Pendo.

© 2019 Pendo  |  Terms of Service  |  Privacy Policy