Building blocks

This article details the different types of building blocks that allow you to design and style your guide. Building blocks include:

• Text
• Button
• Horizontal Line
• Date Block
• Image
• Open Text Poll
• Yes/No Poll
• Number Scale Poll
• Multi Choice Poll
• Video
• Code Block
• Task List

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 selecting 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. For information about supported markdown styles, see Markdown syntax for guide text styling.

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}

Text blocks styling options	Example
This example shows Bold applied to text.
Text Blocks can use Themes to apply title, subtitle, and paragraph styles. Custom unlocks all styling and spacing options applied to the entire Text Block.
Text alignment, link styles, and spacing for the Text building block are controlled from the Edit Text menu.

Improve guide content with the guide writing assistant

The guide writing assistant uses Google's Generative AI to summarize, expand, or refine your guide's textual content inside the Visual Design Studio during guide creation. It checks for spelling, grammar, and punctuation errors, modifies the text based on a selected tone, and enhances vocabulary using AI.

1. Select Edit in the Text building block.
2. Select the wand icon at the bottom of the text box to display the Guides Writing Assistant.
   
3. Under Script Wizard, select an option to make changes to the text.
4. Under Change Tone, select an option to change the text's tone.
5. If required, select Undo to restore the text to the previous version or select Refresh to refresh the content.
   

   Note: Undo restores the immediate previous version of the text. If you make more than one change, it restores the text to the version before you selected Undo. It won't restore to the original text.

   

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 custom styles if the user can build guides from scratch.

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 appears 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 breaks and forms a new line, and the button gets taller. Keep button text short and direct for the best results.

Actions

Guide Buttons Actions set what happens when a user selects 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 selected. For example, Dismiss Guide and URL link can be paired together to end the guide and take the user to a 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 select Apply when you finish.

Date block

Date blocks are used in Announcement guides only to show the published date for the guide. The date can't be changed. 

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

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.

Note: YouTube is the only video platform supported in mobile guides.

1. Select the Video building block.
   
   
2. Select the video provider and enter the video URL and title. The Video thumbnail displays automatically in the Guide step. The default width is set to 100 percent of the Guide container.
   
   
3. 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. If you use a different video streaming provider, you can still leverage the Custom Code Block to embed your video.

Supported Video formats and URL

Polls 

Polls are in-app messages designed to collect feedback from your users at the exact time they’re thinking about you - inside your app. Poll responses can be used to segment your users in the future for slicing and dicing analytics or for more specific guide targeting. For more information on Poll guides, see Layout types in Guide layouts.

Caution: If a Poll building block is edited after it's been published, all previous poll data for that building block is lost. We highly recommend duplicating your guide and editing the Poll building block in the duplicate guide to retain the historical poll data.

Open Text Poll

When you choose the Open Text poll option, you're prompted to edit your question:

Note: Be careful not to remove the poll question. Responses aren't captured on submission if there's no poll question.

After you’re happy with your question, select 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 allows you to quickly add your question and auto-add your Poll options as "Yes" and "No".

Note: Only one Yes/No Poll can be added to a Guide step.

Number Scale Poll

If you want 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. After 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:

Custom code

Note: This feature is only available for Pendo subscriptions with Guides Pro included in their package. If you're unsure whether your plan includes this or if you're interested in getting access, contact your Pendo account representative.

Visual Design Studio is made to be more user-friendly for non-technical users, but the code block allows technical users to code custom content and behavior in their Guides.

When you edit a code block, the Edit Code window opens where you can enter HTML, CSS, and Javascript that executes when the guide step containing the code displays. For more information about code blocks, see Customize your guides with code.

Note: You can only have one code block for each guide step. The code block executes when the guide step displays and the code can impact anything in the guide or app.

Task List

Note: This feature is only available for Pendo subscriptions with Guides Pro included in their package. If you're unsure whether your plan includes this or if you're interested in getting access, contact your Pendo account representative.

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

Requirements

The minimum required agent version is 2.258.0.

Create a task list

Create a task 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 my app. The Visual Design Studio opens.
3. In the required guide step, open the Building Block menu, scroll down to Advanced and 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 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 the 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 progress bar style and enter text in the Label field to be shown under the progress bar.
  
  
• Text Styles. Set the text style for the task list.
  
  
• Subtitle. Add subtitles to be shown under each step in the task list.