Guide building blocks

Guide content is added using building blocks. This article describes what building blocks are available and how to edit them. For instructions on how to add building blocks to your guide, see Add and edit guide content.

You can add the following building blocks to overlay and embedded guides:

	Overlay	Embedded
Text	✔	✔
Button	✔	✔
Horizontal line	✔	✔
Image	✔	✔
Video	✔	✔
Open-text poll	✔	✘
Yes|No poll	✔	✘
Number scale poll	✔	✘
Multi-choice poll	✔	✘
Code block	✔	✔
Task list	✔	✔

Although not added as a building block, this article also describes how to add, remove, and edit the close (X) button in a guide step. You can add a close button to both overlay and embedded guides.

Note: The Date building block is only visible for the Announcement module of the Resource Center and shows the date that the announcement was published. The date can't be changed. For more information, see Announcements module. 

Text

When you add a text building block to your guide, the Edit Text window allows you to edit the content, including the format and style. You have different formatting and styling options available to you depending on whether you choose Custom as your Theme Style.

• For information about formatting and styling options for the main body of text, see Text format and style in this article.
• For information about styling the appearance of links in both their default and hover states, see Link appearance in this article.

With text building blocks, you can also:

• Use basic Markdown syntax to edit the format and style of the text. For more information, see the Markdown syntax for guide text styling article.
• Utilize AI to change the length of the text, spellcheck the text, and change the tone of the text. For more information, see AI assistance in this article.
• Add a second column of text, or include an image or button next to a text building block. For more information, see Text columns and rows in this article.
• Edit the margins of your text building block. If you choose Custom as your Theme Style for your guide, you can also edit the padding of the text building block. For more information, see Spacing in this article.

Text format and style

Any styling options applied in the Theme Style, Styles, and Spacing sections of the Edit Text window apply to the entire text building block. To apply different styling to different text elements, like adding a title above the main body of text, add another text building block. For instructions, see Text columns and rows in this article and Add and edit guide content.

Theme style

You have the following options for editing the style of a text building block: Paragraph, Sub Title, Title, or Custom. With the exception of Custom, styles are determined by guide theme, which is set by an admin user of Pendo. Custom overrides the guide theme and thus provides more text styling options. For more information about guide themes, see Manage guide styling with themes. 

Markdown syntax

Any edits you make to the format and style of your text includes the corresponding Markdown syntax in the Edit Text window and updates the visitor view of text (without Markdown syntax) in your guide preview at the same time. For information about Markdown syntax, see Markdown syntax for guide text styling.

Standard format and style

Regardless of what theme style you choose, you can do the following to edit the format and style of the content in your text building block:

• Bold, italicize, underline, strikethrough, and hyperlink your text. When you choose a styling option, the Markdown syntax is applied to the text and the style in rendered in the preview.
  
  
  
  
• Use bulleted and numbered lists.
  
  
  
  
• Edit the content to be left-aligned, center-aligned, or right-aligned. Expand the Styles section to see the alignment options.
  
  

Custom format and style

There are more style options available to you if you choose Custom as your text style. Expand the Styles section of the Edit Text window to reveal the following dropdown menus under Text:

• Family. Allows you to choose a different font.
• Weight. Allows you to set the baseline boldness of the font.
• Size. Allows you to choose the font size.
• Color. Allows you to choose a different color for the font, set with a hexadecimal, RGB numbers, visual color selector, or color slider.
• Text Transform. Allows you to transform the capitalization of the text: 
  • Choose capitalize to make every first letter of a word uppercase. 
  • Choose uppercase to make every letter uppercase. 
  • Choose lowercase to make every letter lowercase.
• Line Height. Allows you to edit the line height in percentage (%)
• Letter spacing. Allows you to edit the spacing in pixels (px) between letters. 

Link appearance

If you choose Custom as your text style and you include links in the content of your guide, you can change the style of the link in its default state and in its hover state. Specifically, you can change the following:

• Weight. Set the baseline boldness of the link text.
• Color. Choose a different color for the link text. Select Inherit Color if you want to use the CSS from your application to determine the color of the link.
• Text Decoration. Add or remove the text underlining.

AI assistance

You can edit your content with AI. The guide-writing assistant uses Google Generative AI to summarize, expand, or refine your guide's textual content during guide creation. It checks for spelling, grammar, and punctuation errors, modifiea the text based on a selected tone, and enhances vocabulary using AI.

Select the Write with AI (wand) icon under your guide content in the Edit Text window and then choose whether you want to:

• Make the content longer or shorter. 
• Spellcheck the content.
• Change the tone of the content to one of the following: Professional, Casual, Conversational, Direct, Expert, or Friendly.

If required, select the Undo icon to restore the text to the previous version, or select the Regenerate Text icon to refresh the content. Undo restores the 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 the original text.

Text columns and rows

You can add another text block above, below, or next to an existing text block. You can also place a button or image to the left or right of a text block. For more information about adding and editing columns of building blocks, see Add and edit guide content.

To add a building block above or below an existing text building block, hover over the space above or below the existing text building block and select the blue plus (+) icon that appears. For example, you might want to add another text block above an existing body of text to give it a heading.

To include two columns of text in your guide, or to add an image or button next to an existing text building block, hover over the existing text building block and select the blue plus (+) icon to the left or right of it. You can then add another text building block, an image building block, or button building block.

If you have two columns of text in a row, you can adjust the width of each column in pixels (px). 

Spacing

Expand the Spacing section of the Edit Text window to edit the margins and padding around your text block. Margins control the space outside the text block and padding controls the space within your text block. You can only edit padding if you choose Custom as your text style.

Edit text block margins

Editing the margins adds or removes space between the text block and the edges of your guide (the guide container) or neighboring building blocks. You edit the top, bottom, left, and right margins independently.

Edit text block padding

If you choose Custom as your text style, you can edit the padding around your text block. This adds or removes space between the text and the container for your text. You edit the top, bottom, left, and right padding independently.

Button

When you add a button building block to your guide, the Edit Button window allows you to edit the button text, style, actions, spacing, and ARIA name. The button design, copy, and actions are applied to each button individually. 

• For information about editing the copy in your buttons, see Button text in this article.
• For information about editing button design, see Button style in this article. You have different styling options depending on whether you choose Custom as your Button Style.
• For information about choosing button actions, including compound button actions, see the Guide button actions article.
• For information about adding an ARIA label (alternative accessible name) to your button for screen readers, see Button accessibility in this article.

With button building blocks, you can also:

• Add up to four buttons in a row in your guide step. You can also add a text block or an image next to a button in a guide step. For more information, see Button layout in this article.
• Edit the margins of your button building block. If you choose Custom as your Theme Style for the guide, you can also edit the padding of the button building block. For more information, see Button spacing in this article.

Note: Only mobile guides provide the option to add Multi Button. To add more than one button to a step in a web guide, follow the instructions in Button layout in this article.

Button layout

You can add up to four buttons in a row in your guide. You can also add a text building block or an image building block next to a button in a guide step. To add a button, image, or text building block next to an existing button, hover over the existing button and select the blue plus (+) icon that appears to the left or right of the button.

You can also edit the alignment of your button. Hover over an existing button and select the alignment icon in the toolbar that appears.

This opens the Edit Row window, where you can edit:

• The spacing (padding and margins) around the row.
• The horizontal alignment (stacked) of the button relative to any other building blocks in the row.
• The vertical alignment of the button (top, center, or bottom of the row).

Select Done in the bottom-right of the Edit Row window when you're done editing spacing and alignment. For more information about editing rows of building blocks, see Add and edit guide content.

To change the order of multiple buttons in a row, hover over one of the buttons and select the left or right arrow to move it along the row.

Button style

You have the following options for editing the style of a button building block: Custom, Primary Button, Secondary Button, and Tertiary Button.

With the exception of Custom, button styles are determined by guide theme, which is set by an admin user of Pendo. Custom overrides the guide theme and thus provides more button styling options. For more information about guide themes, see Manage guide styling with themes. 

Custom button text style

There are more style options available to you if you choose Custom as your button style. Expand the Styles section of the Edit Button window to reveal the following dropdown menus under Text:

• Family. Allows you to choose a different button text font.
• Weight. Allows you to set the baseline boldness of the button's text.
• Size. Allows you to choose the size of the button's text font.
• Color. Allows you to choose a different color for the button's text font, set with a hexadecimal, RGB numbers, visual color selector, or color slider.
• Text Transform. Allows you to transform the capitalization of the button's text: 
  • Choose capitalize to make every first letter of a word uppercase. 
  • Choose uppercase to make every letter uppercase. 
  • Choose lowercase to make every letter lowercase.
• Letter spacing. Allows you to edit the spacing in pixels (px) between the letters of the button text. 

Custom button appearance

There are more button colors available to you if you choose Custom as your button style. Expand the Styles section of the Edit Button window to reveal the following additional options:

• Background > Color. Allows you to change the button's background color and transparency, set with a hexadecimal, RGBA numbers, visual color selector, or color and transparency sliders.
• Border > Color. Allows you to choose a different color for the button's border, set with a hexadecimal, RGB numbers, visual color selector, or color slider.
• Border > Width. Allows you to set the thickness of the button's border in pixels (px).
• Border > Radius. Allows you to set the roundness of the button's corners in pixels (px).
• Width. Allows you to set a specific width for the button.
  • Choose Auto if you want the button to automatically resize to accommodate the text in the button until it reaches the width of the container.
  • Choose Fixed to specify a button width in pixels (px). The text breaks and forms a new line when it reaches the specified button width.

Custom button hover styles

You can change the style of a button's hover state if you choose Custom as your button style. Expand the Hover Styles section of the Edit Button window to reveal the following additional options:

• Text > Color. Allows you to choose a different color for the button's hover text font, set with a hexadecimal, RGB numbers, visual color selector, or color slider.
• Text > Weight. Allows you to set the boldness of the button's hover text.
• Background > Color. Allows you to change the button's background color and transparency on hover, set with a hexadecimal, RGBA numbers, visual color selector, or color and transparency sliders.
• Border > Color. Allows you to choose a different color for the button's border on hover, set with a hexadecimal, RGB numbers, visual color selector, or color slider.

Button text

We recommend keeping your button text short and direct. 

To edit button text, select the existing entry under General and enter new text to replace it. If you choose Custom as your button style, you can also specify a button width. For more information, see Custom button appearance in this article.

Button accessibility

You can augment the text in your button with an ARIA Label. This is the alternative accessible name used by screen readers.

Button actions

Guide button actions define what happens when a visitor selects the button, such as Next Step or Dismiss Guide. 

Some button actions can be paired to make a compound action when the button is selected. For example, Dismiss Guide can be paired with URL Link to close the guide and then take the visitor to a new page when they select the button.

For a description of all possible button actions, including compound actions, see Guide button actions. If you're looking for information about the close (X) button, see Close (X) button in this article.

You can also edit button actions from the Behavior tab of the Edit Container window. For more information, see Edit overlay guide step settings

Button spacing

Expand the Styles section of the Edit Button window to edit the margins around your button. Margins control the space outside your button and padding controls the space within your button. You can only edit Padding if you choose Custom as your button style. 

Edit button margins

Editing the margins of a button adds or removes space between the button border and the button building block. You edit the top, bottom, left, and right margins independently.

Edit button padding

If you choose Custom as your button style, you can edit the padding around the text in your button. This adds or removes space between the button text and the button border. You edit the top, bottom, left, and right padding independently.

Horizontal line

When you add a horizontal line to your guide, the Edit Horizontal Line window opens.

• If you choose Horizontal Line from the Horizontal Line Style dropdown menu, the styling for the line defaults to the styling defined in the guide theme. For more information about guide themes, see Manage guide styling with themes. 
• If you choose Custom from the Horizontal Line Style dropdown menu, you can edit the style of the line.

Custom overrides the guide theme and thus allows you to edit the following:

• Line Properties > Color. Allows you to choose a different color for the line, set with a hexadecimal, RGB numbers, visual color selector, or color slider.
• Line Properties > Thickness. Allows you to set the thickness of the line in pixels (px).
• Margin. Allows you to add or remove space between the line and the edges of the guide step or neighboring building blocks. You edit the top, bottom, left, and right margins independently.
• Line Type. Allows you to choose between a solid, dotted, dashed, or double line.

Image

Use the image building block to add pictures or GIFs to your guide. The following image file types are supported: JPEG, PNG, SVG, and GIF. 

You might want to use images in your guide to:

• Add a visual header. 
• Add product screenshots.
• Insert icons next to text.
• Include a GIF depicting a workflow.

After you add an image to your guide step, you have the option to:

• Set the size and spacing. For more information, see Image size and spacing in this article.
• Add a column to the same row as your image to add text, a button, or another image next to it. For more information, see Image layout.
• Enter a name for your image, for use by screen readers. For more information, see Image accessibility in this article.

Add an image

When you add an image building block to your guide, the Edit Image Block window allows you to:

• Upload an image to be hosted by Pendo. Select Click to upload image and then choose an image from your computer.
• Enter an Image URL for an image that's hosted elsewhere.

The maximum image size is 30 MB. For good loading times and guide performance, we recommend images that are under 5 MB.

Image size and spacing

When you add an image to your image building block, you're given the option to set the image size as a percentage relative to the guide container size or based on the image's resolution:

• To change the relative size of the image, edit the percentage under Fill. The default is 100%.
• To set the image to match the image’s resolution, use the toggle to turn on Actual Image Size.

You can also edit the top, bottom, left, and right margins independently to add and remove space between the image and the image building block. The more space you add to the left and right margins, the smaller the image gets.

Image layout

You can add a column next to an image in your guide, allowing you to:

• Have two images next to each other.
• Add text to the left or right or the image.
• Add a button to the left or right of the image.

To add a column next to an image in a guide step, hover over an existing image and select the blue plus (+) icon to the left or right of the image. Choose one of the available building blocks and edit it as needed.

Image accessibility

For the benefit of screen readers, you can enter an accessible name for the image under Image Alt Text.

Video

Use the video building block to embed videos from supported platforms into your guide. Videos embedded into guides have autoplay turned off.

After you add a video to your guide step, you have the option to:

• Set the video sizing and aspect ratio. For more information, see Video size and ratio in this article.
• Enter a name for your video, for use by screen readers. For more information, see Video accessibility in this article.

Add a video

When you add a video building block to your guide, the Edit Video Block window prompts you to choose a video provider and then enter a video URL. For a list of supported video providers and the URL formats you can use, see Supported video providers in this article.

Supported video providers

Video streaming providers typically support all browsers except Internet Explorer. Check the browser compatibility of your video platform.

Mobile-based guides support YouTube video URLs only. Web-based guides support all of the following video providers and URLs. If you use a different video provider to any of those listed, you can use the custom code block to embed your video instead.

Video format	URL details
Brightcove	Brightcove URLs must match the following format. Shortened video links don't work: http(s)://brightcove.net/account_id/player_type/index.html?videoId=[Video ID]
Kaltura	http(s)://cdnapisec.kaltura.com/p/[partner_id]/sp/[service_provider_id]/embedIframeJs/uiconf_id/[…]?iframeembed=true&playerId=[Player_ID]&entry_id=[Video_ID]
Loom	http(s)://www.loom.com/share[Video ID]
Microsoft Stream (Classic)	http(s)://[Your Account ID].microsoftstream.com/video/[Video ID]
Microsoft Stream (on Sharepoint)	http(s)://[OrgID].sharepoint.com/[NAMESPACE]/[USER_ID]/_layouts/15/embed.aspx?UniqueId=[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 Account ID.hubs.vidyard.com/[Video ID]
Vimeo	Use the URL provided in the address bar or with the share button: http(s)://vimeo.com/[Video ID]
Wistia	Use the formats provided in the address bar or from the Embed & Share link: 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.com/medias/[Video ID] http(s)://[Your Account ID].wi.st.com/embed/[Video ID]
YouTube	This is the only video format supported for mobile guides. Use either of the following formats provided by YouTube in the address bar or with the share button: http(s)://www.youtube.com/watch?v=[Video ID] http(s)://youtu.be/[Video ID]

Video size and ratio

When you add a video URL, you have too additional options for video sizing:

• Set video width. Allows you to set the width of the video in pixels (px).
• Fill container. Allows you to set the width of the video to the width of the guide step container.

You're also given the following to options for setting the aspect ratio of the video: 16:9 or 4:3.

Video accessibility

For the benefit of screen readers, you can enter an accessible name for the video under Video Title.

Polls

There are four poll types that you can add to a guide step:

• Open Text Poll, used to collect open-ended textual responses.
• Yes/No Poll, used to collect a binary answer to a straightforward question.
• Number Scale Poll, used to collect ratings from visitors on a scale of up to 10. The default scale is set from 1 (horrible) to 5 (great).
• Multi-Choice Poll, used to prompt the user to choose one of multiple possible answers, either from a dropdown list or from a list of radio buttons.

Adding a poll to your guide adds the individual building blocks needed for that poll type, which you can then edit individually:

• A text building block for your poll question. For more information, see Question text in this article.
• An open-text field for visitors to enter a response in an Open Text Poll. For information about editing an open-text field, see Open text field in this article.
• Yes and No buttons for a Yes/No Poll. You can edit the text and style for these buttons as needed. For instructions, see Poll buttons in this article.
• A scale of 1 to 5 for a Number Scale Poll. You can add or remove scale numbers and labels as needed. For information and instructions, see Number scale in this article.
• A dropdown menu for a Multi Choice Poll. You can add and remove options and choose to display them as radio buttons as needed. For more information, see Multi-choice answers in this article.
• If there's no content in your guide yet, a Submit button for an Open Text Poll, a Number Scale Poll, or a Multi Choice Poll is added automatically. You can edit the button text, style, and action as needed. For instructions, see Poll buttons in this article.

Caution: If a poll building block is edited after it's published, all previous poll data for that building block is lost. To retain historical data, we highly recommend editing the poll building block in a duplicate guide.

Question text

Don't remove the poll question. Responses to the poll aren't captured on submission if there's no poll question.

To edit the poll question, select the question's text. This opens the Edit Text window, which gives you the same options for editing a text block in your guide. After you're happy with your question, select Done in the bottom-right corner of the Edit Text window. 

For more information, see Text format and style in this article.

Open text field

To edit an Open Text Poll, select the text field and then select the edit icon. This opens the Edit Open Text window.

Text style options

As standard, you can edit the following for the text in the text field box:

• Helper Text. Allows you to edit the prompt or hint text inside the text field to help the respondent understand and answer the question.
• Helper Text Color. Allows you to edit the color and transparency of the helper text, set with a hexadecimal, RGBA numbers, visual color selector, or color and transparency sliders.
• Width. Allows you to edit the width of the text field box as a percentage (%) of the total content block width.
• Height. Allows you to edit the height of the text field box in pixels (px).
• Background Color. Allows you to edit the color and transparency of the text field box, set with a hexadecimal, RGBA numbers, visual color selector, or color and transparency sliders.
• Text > Family.  Allows you to choose a different font for the helper text in the text field box.
• Text > Weight. Allows you to set the baseline boldness of the helper text in the text field box.
• Text > Size. Allows you to choose the font size for the helper text in the text field box.
• Text > Color. Allows you to choose a different color for the text entered by the visitor into the text field box, set with a hexadecimal, RGB numbers, visual color selector, or color slider.

To see spacing options for the text in the text field box, expand the Show more menu.

Text spacing options

Select Show more to reveal Additional Text Styles. Here, you can edit the following:

• Line Height. Allows you to edit the spacing between lines of text entered into the text field box. The maximum of 200% sets the line height to be double-spaced.
• Letter Spacing. Allows you to edit the spacing in pixels (px) between letters for text entered into the text field box.

Border style

Select Show more to reveal the Border styling options. Here, you can edit the following:

• Border > Color. Allows you to edit the color and transparency of the text field box's border, set with a hexadecimal, RGBA numbers, visual color selector, or color and transparency sliders.
• Border > Width. Allows you to set the thickness of the text field box's border in pixels (px).
• Border > Radius. Allows you to set the roundness of the text field box's corners in pixels (px).

Margins

Select Show more to reveal the Margin options. Here, you can independently edit the top, bottom, left, and right margins of the text field box in pixels (px). By default, there's a 10 px margin at the top and bottom of the text field box.

Number scale

To edit the scale in a Number Scale Poll, select the numbered scale and then select the edit icon. This opens the Edit Number Scale window with the Content tab open by default.

From the Edit Number Scale window, you can:

• Edit the number of options included in the scale. For more information, see Scale numbers in this article.
• Edit labels assigned to the numbers in the scale. For more information, see Scale labels in this article.
• Hide the labels assigned to the numbers in the scale. For more information, see Scale labels in this article.
• Edit the style of the numbers and labels. For more information, see Scale style in this article.

You can also edit the spacing and alignment of the number scale. Hover over the scale numbers and select the alignment icon in the toolbar that appears. This opens the Edit Row window, where you can edit the spacing around the number scale and its horizontal and vertical alignment. For more information, see Scale spacing and alignment in this article.

Scale numbers

The default scale includes the numbers 1 to 5, but you can choose any number between zero (0) and 10. Open the Content tab of the Edit Number Scale window and use the dropdown menus at the bottom to set the lower number (min) and upper number (max) in the scale.

Scale labels

The default scale labels 1 as Horrible and 5 as Great. From the Content tab of the Edit Number Scale window, you can delete these labels, edit these labels, add more labels to the numbers in between, and add labels to any additional numbers that you add to the scale.

You can also hide the labels assigned to the numbers in the scale. Use the Show Labels toggle above the scale items to only show the numbers of the scale to visitors and not the associated labels.

Scale style

To edit the styling of the numbers and the labels of the scale, open the Styling tab of the Edit Number Scale window. From here, you can edit the following:

• Rating Labels > Font Size. Allows you to edit the font size of the rating labels.
• Rating Labels > Color. Allows you to edit the color of the rating labels, set with a hexadecimal, RGB numbers, visual color selector, or color slider.
• Numbers > Font Size. Allows you to edit the font size of the rating numbers.
• Numbers > Space Between. Allows you to edit the space between the numbers in pixels (px).
• Numbers > Font Color. Allows you to edit the color of the rating numbers, set with a hexadecimal, RGB numbers, or visual color selector.
• Numbers > Background Color. Allows you to edit the color and transparency of the boxes behind the numbers, using a hexadecimal, RGBA numbers, visual color selector, or color and transparency sliders.
• Numbers Hover > Font Size. The color of the rating numbers when you hover over them, set with a hexadecimal, RGB numbers, visual color selector, or color slider.
• Numbers Hover > Background Color. The color of the number background when you hover over a number, set with a hexadecimal, RGB numbers, or visual color selector.

Scale spacing and alignment

Hover over the scale numbers and select the alignment icon in the toolbar that appears. This opens the Edit Row window.

From here you can edit the spacing and alignment of the number scale. For more information about editing rows, see Add and edit guide content. Select Done in the bottom-right of the Edit Row window when you're done editing.

Multi-choice answers

To edit the answers in a Multi Choice Poll, select the poll options and then select the edit icon to edit them. This opens the Edit Multi Choice Poll window with the Content tab open by default.

From the Edit Multi Choice Poll window, you can:

• Edit the number and content of the answers available to choose from. For more information, see Edit multi-choice answers in this article.
• Choose whether the answers are displayed as a dropdown list or as radio buttons. The default is a dropdown list. For more information, see Multi-choice style in this article.
• Edit the styling of the answers in the poll. For more information, see Multi-choice style in this article.

You can also edit the spacing and alignment of the multi-choice answers. Hover over the dropdown menu or radio buttons and select the alignment icon on the toolbar that appears. This opens the Edit Row window, where you can edit the spacing around the answers, and the horizontal and vertical alignment. For more information, see Multi-choice spacing and alignment in this article.

Edit multi-choice answers

Add, remove, and edit potential answers (options) from the Content tab of the Edit Multiple Choice Poll window. 

To add an option, select + Add Choice and then enter the answer. To edit the option's text, select the text and replace it with a different answer.

To remove an option, select the trash icon to the far right of the answer that you want to delete.

Multi-choice style

By default, a multi-choice poll presents answers (options) in a dropdown list. If you choose to keep this style, you can edit:

• Font Size. Allows you to edit the size of the text in the dropdown list.
• Font Color. Allows you to edit the color of the text in the dropdown list, set with a hexadecimal, RGB numbers, visual color selector, or color slider
• Background Color. Allows you to edit the color and transparency of the dropdown list, set with a hexadecimal, RGBA numbers, visual color selector, or color and transparency sliders.
• Height. Allows you to edit the height of the dropdown list, set in pixels (px).
• Border. Allows you to edit the line around the dropdown list. Use the toggle to include or remove the dropdown menu border. If you include the border you can edit the following:
  
  • Color. The border color of the dropdown list, set with a hexadecimal, RGB numbers, visual color selector, or color slider.
  • Width. The width of the border of the dropdown list, set in pixels (px). You can also choose to have no border. 
  • Radius. The corner rounding of the border of the dropdown list, set in pixels (px).

To change the style of the multichoice poll options to radio buttons, open the Styling tab of the Edit Multiple Choice Poll window and select Radio Button from the Display dropdown menu.

You then have the option to edit:

• Font Size. Allows you to edit the size of the text for the radio buttons.
• Font Color. Allows you to edit the color of the text for the radio buttons, set with a hexadecimal, RGB numbers, visual color selector, or color slider.
• Space Between. Allows you to edit the space between options, set in pixels (px).

Multi-choice spacing and alignment

Hover over the options and select the alignment icon in the toolbar that appears. This opens the Edit Row window.

From here you can edit the spacing and alignment of the multi-choice poll. For more information about editing rows, see Add and edit guide content. Select Done in the bottom-right of the Edit Row window when you’re done editing.

Poll buttons

Polls are submitted to guide analytics through a button. You can edit the text, style, and actions of poll buttons.

Yes/No buttons

Yes/No buttons are automatically included when you add a Yes/No Poll to your guide. Don't delete the Yes/No buttons. If you delete one of the Yes/No buttons, you delete the entire poll.

To edit the text on the buttons of a Yes/No Poll, select the button that you want to edit and then follow the instructions in the Button section of this article to edit the text, style, and accessibility label of the button.

The default action for yes/no poll buttons is Submit All Polls + Advance Guide. The button action both Yes and No should be one of the following:

• Submit All Polls + Advance Guide (default)
• Submit All Polls + Go to Step

Submit buttons

A Submit button is automatically included when you add an Open Text Poll, a Number Scale Poll, or a Multi Choice Poll to an empty step in a guide. The button action for the default Submit button should be one of the following:

• Submit All Polls + Advance Guide (default)
• Submit All Polls + Go to Step

To edit the Submit button, select the button and then follow the instructions in the Button section of this article.

Custom code

If you’re a more technical user and have a Guides Pro subscription, you can code custom content and behavior into your guide using the Code Block. You can add one code block to a step in your guide.

When you add a code block to a step in your guide, the Edit Code window allows you to enter HTML, CSS, or JavaScript code that runs when the guide step containing the code displays. For more information about code blocks, see Customize your guides with code.

Task List

If you have a Guides Pro subscription and a minimum Pendo agent version of 2.258.0, you can display a sequence of guides as steps in a task list to your visitors. The task list tracks progress and communicates to visitors how many steps (guides) they’ve completed. This is useful for contextual onboarding flows, tutorials, and other in-app experiences that benefit from user guidance and progression tracking.

Each step in a task list is a guide. When you add a task list to your guide, the Edit Task List window allows you to:

• Edit the title of the task list. For more information, see Task list title in this article.
• Add guides as task list items and organize them into a logical order to facilitate structured learning or task completion. For more information, see Add tasks in this article.
• Add fallback text for in place of the task list for when a visitor completes all tasks in the task list. For more information, see Add fallback text in this article.
• Customize the appearance of the task list to match the design of your application. For more information, see Task list style in this article.

Task list title

Select the Task List text to edit it. This opens the Edit Text window, which gives you the same options for editing a text building block in your guide. For more information, see Text format and style in this article.

Add tasks

Select the empty task list block and then select the edit icon to edit it. This opens the Edit Task List window, which consists of two tabs: Content and Styling.

Tasks are added from the Content tab of the Edit Task List window. To add your first task, select a guide from the Select a guide dropdown menu and then enter the text to display in the task list for the guide.

To add more tasks, select + Add guide and then select another guide from the Select a guide dropdown menu and enter the text to display in the task list for the guide.

You can reorder task list items by selecting the three dots in the top-left corner of a task card and dragging it up or down the list of tasks.

Add fallback text

You can add text in place of the task list for when a visitor completes all the tasks in the list. Expand the Fallback text section and then enter the text that you want the visitor to see.

Task list style

To edit the styling of the task list, open the Styling tab of the Edit Task List window. From here, you can edit:

• The progress icon
• The progress bar
• The text style
• The subtitle text

Edit the progress icon

The progress icons act as bullet points to the left of each task list item. You can choose the empty and fill progress icon colors, which are set with hexadecimal, RGB numbers, visual color selector, or color slider.

Edit the progress bar

The progress bar is below the task list in the guide step. You can choose the progress bar's background and fill colors, which are set with a hexadecimal, RGB numbers, visual color selector, or color slider.

You can also change the wording of the label outside of the < and > symbols. For example, you might want to change the label from 50% of Task List Items Complete to something more specific, like 50% of onboarding tasks complete. To revert the label text back to the default, select Reset Label.

Warning: Don’t change the text inside the < and > symbols.

Edit the text style

You can change the style of the default and hover text for task list items.

Your options for editing the style of Default text include:

• Family. Allows you to choose a default text font for the list item.
• Weight. Allows you to set the baseline boldness of the default text for the list item.
• Size. Allows you to choose the font size of the default text for the list item.
• Color. Allows you to choose a different color for the default text for the list item, set with a hexadecimal, RGB numbers, visual color selector, or color slider.
• Text Decoration. Allows you to add or remove underlining for the default text for the list item and the subtitle text below it.
• Space Between. Allows you to edit the space between the items in your task list.
• Letter spacing. Allows you to edit the spacing between letters of the default text for the list item.

Your options for editing the style of Hover text include:

• Weight. Allows you to set the baseline boldness of the hover text for the list item.
• Color. Allows you to choose a different color for the hover text for the list item, set with a hexadecimal, RGB numbers, visual color selector, or color slider.
• Text Decoration. Allows you to add or remove underlining for the hover text for the list item and the subtitle text below it.

Edit the subtitle text

Subtitles are shown under each step in the task list. You can change the subtitle wording outside of the < and > symbols. For example, you might want to change the “step” to “task”: Completed task 1 of 2. To revert the subtitle text back to the default, select Reset Subtitle.

Warning: Don’t change the text inside the < and > symbols. 

Close (X) button

For both overlay and embedded guides, you can add or remove a close (X) button from the Styling tab of the Edit Container window in the Visual Design Studio. For instructions, see Edit overlay guide step settings or Create an embedded guide.

If you include a close button in your guide, you can edit it like you edit building blocks in the Visual Design Studio. Select the X icon from its location in your guide and then choose Custom from the Close Button Style dropdown menu to edit the following:

• Color. The default color for the close button icon, set with a hexadecimal, RGB numbers, visual color selector, or slider.
• Hover Color. The color of the close button icon when the visitor hovers over it, set with a hexadecimal, RGB numbers, visual color selector, or slider.
• Padding. The space between the close button icon and the border of the close button icon. You edit the top, bottom, left, and right padding independently.
• Margin. The space between the border of the close button icon and the two sides of the icon closest to the edges of the guide step. You edit the top, bottom, left, and right margins independently.
• Alignment (Horizontal). Whether the close button icon is aligned to the left or right of the guide step.