Building Blocks

Overview

Building blocks are used to add content to guides. Building blocks have controls for easily adding and formatting text, buttons, images, polls, and embedded videos. Text and button building blocks can be styled in advance using Theme. 

Requirements

• Visual Design Studio

• Some building blocks have an Agent version requirement

Building Block Types

• Text

• Button

• Horizontal Line

• Date Block

• Image

• Video

• Open Text Poll

• Yes/No Poll 

• Number Scale Poll 

• Multi Choice Poll

Add A Building Block

1. Open a Guide in the Visual Design Studio and view a guide step.

2. Click to add content if you have a blank step.

 

 

If you already have content on the step

• Add a new row by hovering above or below an existing building block 

• Add a new column by hovering to the left or right of a text, button, or image building block

3. Select the type of Building Block from the menu.

 

 

4. Click into an existing Building Block to open the edit menu and make any changes.

 

Row And Block Formatting

Building blocks can be added to guides vertically by adding new rows or horizontally by adding new columns. Several formatting options are available to position and edit building blocks in the guide step.

 

Row Formatting

 

  Edit Row opens the Edit Row menu which has settings for background color, padding, margin, and alignment. Alignment positions content laterally across the row or vertically relative to content in the same row.

 

 

  Duplicate clones the entire row and creates a new adjacent row with the same content. This is helpful for cloning the style settings used in a building block even when you're making changes to the content inside the block.

 

  Row positioning moves the entire row up or down, swapping it with the content that's currently there. You can easily adjust the order of building blocks and test different layouts to find the design you like the best.

 

Block Formatting

 

  Edit Building Block opens the edit menu for that building block, where you can edit the content and style settings. In most cases, you can access this menu directly by clicking on the building block but some building blocks, like Videos, may play content or have other native behavior instead of opening the edit menu when clicked.

 

  Duplicate in the same row is available for text, button, and image building blocks when the row capacity hasn't been reached yet. This will clone the selected content in the same row, just like adding a column with that building block type.

 

  Delete permanently removes that building block. Be careful when you delete a building block. There is no warning modal and there isn't an undo button.

 

  Column positioning moves the building block left or right, swapping it with the content next to it, in the same row. If the building block can't be moved, the arrow is greyed out and isn't clickable. Column positioning is only available for text, button, and image blocks.

 

Text

Text Blocks support limited markdown with additional styling options for the text and container. The Text Block loads with filler text demonstrating the supported markdown. Any styling options applied in the Styling menu apply to the entire Text Block. Create another Text Block to apply different styling to different text elements, like a title and paragraph.

Two columns of text can be placed next to each other by click Add Column in the same row and selecting another Text building block. A button or an image can also be placed next to a Text building block. When a text building block is next to another building block, the width of the individual building block can be set, otherwise the default width is the width of the container.

Style within your text using the WYSIWYG controls or markdown. When you choose a styling option, the Markdown syntax is applied to the text and the style is rendered in the preview. Take a look at the Markdown Syntax article to learn more about the supported markdown styles.

 

Supported Markdown

• **bold**

• *italics* or _italics_

• ++underline++

• --strikethrough--

• [links](https://www.pendo.io/)

• 1. Ordered Lists

  2. Item 2

  3. Item 3

• -Unordered Lists

  -Item 2

  -Item 3

  *Unordered Lists

  *Item 2

  *Item 3

  +Unordered Lists

  +Item 2

  +Item 3

• {color: #ec2059}Individual colored text{/color}

 

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

Button

The Button building block adds a single button that can trigger Button actions, like Next Step or Dismiss, to your guide. Add additional buttons next to any text, button, or image building blocks. A row can support up to four buttons or one button next to a text or image building block.

Select the style, button text, and actions for each button individually.

 

 

Button Style

Buttons can use primary, secondary, or tertiary styles to quickly pull in designs from the guide Theme or a custom style.

 

 

Styles contains all of the available design options for the button. When you're using a Theme, the only option is margin.

 

Custom Style Settings

• Text

• Background

• Border

• Width

• Margin

• Padding

• Hover styles for text, background, and border

Button Text

The General section contains the button text field. Any text entered will appear in the button. If button width is set to Auto, the button will get wider until it reaches the width of the guide container. If button container is set to fixed, the text will break and form a new line and the button will get taller. Keep button text short and direct for the best results.

 

Actions

Guide Buttons Actions set what happens when a user clicks the button. There are many available actions for the most popular use cases.

 

Available Button Actions

• Dismiss Guide

• Next Step

• Submit All Polls + Advance Guide

• URL Link

• Launch Guide

• Previous Step

• Snooze Guide

• Go to Step

 

Some button actions can be paired together to make a compound action when the button is clicked. For example, Dismiss Guide and URL link can be paired together to end the guide and take the user to the new page.

Horizontal Line

Use a horizontal line to separate text and images in your guide.

 

Line Styling

Set the values to style the line as you want and click Done when finished.

 

Image

Image building blocks are used to add pictures and GIFs to your guide. Images can be uploaded and hosted by Pendo or you can add a URL for your own hosted content. We recommend file sizes under 5 MB for fast loading times and the best guide performance. The maximum size limit is 30MB.

Images can be used to add eye-catching headers, product screenshots, icons next to text, or GIFs showing a new workflow. Using Add Column, two images, an image and text, or an image and a button can be placed next to each other in the same row.

 

 

Supported file types

• .jpeg

• .png

• .svg

• .gif

Image Styling

 

After uploading an image, additional options appear.

• Image Alt Text - Displayed on the screen when the image fails to load and read by screen readers

• Fill - Sets image size as a percentage relative to the guide container size or actual image resolution

• Margin - Sets the margin around the outside of the image

 

Open Text Poll

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

 

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

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.

 

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.

Multi Choice Poll

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

Then, hover over the multiple choice dropdown to edit and add all the choices you want to give your user:

Video

Video Building Blocks embed videos from supported streaming platforms using only the video URL. Embed code isn't needed. The embed formatting is applied automatically. Autoplay is turned off automatically to provide the best Guide experience.

Supported Video Platforms

• YouTube

• Vimeo

• Wistia

• Brightcove

• Microsoft 365 Stream

• Vidyard

• Loom
• Kaltura

1. Select the Video Building Block.



2. Select Video Provider and enter the Video URL and title.

 

3. The Video thumbnail displays automatically in the Guide step. The default width is set to 100% of the Guide container. Toggle Fill Container off to set the width manually.

Warning: Video streaming providers typically support all browsers except Internet Explorer. Check the browser compatibility of your video platform and your users for the best results. 

Supported Video URL Formats

YouTube

Either of the formats provided by YouTube in the address bar or with the share button can be used. 

• http(s)://www.youtube.com/watch?v=[Video ID]
• http(s)://youtu.be/[Video ID]

Vimeo

The URL provided in the address or with the share button can be used.

• http(s)://vimeo.com/[Video ID]

Wistia

The formats provided in the address bar or from the Embed & Share link can be used.

• http(s)://[Your Account ID].wistia.com/medias/[Video ID]
• http(s)://[Your Account ID].wistia.com/embed/[Video ID]
• http(s)://[Your Account ID].wi.st/medias/[Video ID]
• http(s)://[Your Account ID].wi.st/embed/[Video ID]

Brightcove

Brightcove URLs must match this format. Shortened video links will not work.

• http(s)://brightcove.net/account_id/player_type/index.html?videoId=[Video ID]

Microsoft 365 Stream

• http(s)://[Your Account ID].microsoftstream.com/video/[Video ID]

Vidyard

• http(s)://embed.vidyard.com/[Video ID]
• http(s)://play.vidyard.com/[Video ID]
• http(s)://share.vidyard.com/[Video ID]
• http(s)://[Your AccountID].hubs.vidyard.com/[Video ID]

Loom

• http(s)://loom.com/share/[Video ID]

Task List

The Task List building block allows you to design and display a sequence of tasks for your users. By breaking down actions or learning objectives into clear, manageable steps, you can guide your users through processes to help them learn, make progress, or accomplish specific tasks within your application. 

The Task List building block allows for:

• Sequential progression. Organize guides in a logical order to facilitate smooth, structured learning or task completion. 
• Progress tracking. Indicate completed guides to give users a sense of accomplishment and encourage them to continue.
• Customizable appearance. Tailor the look and feel of the task list to match your app's design and user experience. 

Use Cases

The main use case for task lists is to build onboarding flows. Instead of using the Onboarding module in the Resource Center, add a task list using guides to create contextual flows based on the user's current workflow.

Other use cases include tutorials and other in-app experiences where user guidance and progression tracking are key. 

Task lists can be scheduled, segmented, targeted, and delivered to specific users. It's best practice to use a badge or target element activation for the task list so that the user can repeatedly reference and come back to the task list. 

Create a Task List

Create a tast list in your guide using the Task List building block.

1. Create a new guide or select an existing guide from the guides list. 
2. In the Settings tab in the guide's details page, select Manage in App. The Visual Design Studio opens. 
3. In the required guide step, open the Building Block menu, scroll down to Advanced select Task List. 
4. In the guide step, select the content box to open the Edit Task List window. 
5. In the Content tab, select Add guide.
6. In the Task List Composition, select a guide from the Select a guide dropdown list. 
7. In the Display text field, enter the text to display in the Task List for the guide. 
   
   
   
   
8. Continue to add other guides as required to complete the task list.

Add Fallback Text

If the visitor completes all tasks, you can add text in place of the list to help the visitor understand where they are in the process. 

1. Select the arrow to expand the Fallback text section. 
2. Enter your text in the field. 
   

Style the Task List

You can style the different elements of the task list. Select the Styling tab in the Edit Task List window. 

• Progress Icon. Choose the icon to show progress made through the task list.
  
• Progress Bar. Choose the icon to show progress made through the task list. 
  
• Text Styles. Set the text style for the task list.
  
• Subtitle. Add subtitles to be shown under each step in the task list. 
  

Frequently Asked Questions

I Can't Add A Column Or Add A Building Block Next To Another Building Block.

Not all building block types can be placed next to each other. Only text, button, and image building blocks support side-by-side placement. There are limits to how many building blocks can be placed in a single row. A row can have up to four buttons or two building blocks consisting of any combination of text, button, and image building blocks. For example, two text blocks can be placed next to each other, or a button and a text block.

Existing button or multi-button building blocks will work with the new side-by-side functionality. But only new text and image building blocks support side-by-side placement. Text and image building blocks created prior to the release of side-by-side building blocks on May 26, 2021 will not support Add Column. Duplicating the building block will clone the legacy functionality without side-by-side placement. You must add a new text or image building block in a new row to use side-by-side placement. You can copy and paste the content from the old building block into the new building block and then delete the old building block to use the new functionality with your existing content.