How Can We Help?

Building Blocks

Last Updated

Overview

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
  • Multi Choice Poll
  • Video

You can access the Building Blocks menu by placing your cursor inside a Guide and clicking on the blue horizontal line that appears. It will look like this:

hover-add-bb-blank.gif

The Building Blocks menu will look like this:

Adopt_BuldingBlocks.png

Text

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

Style your text using the WYSIWYG controls. Once you choose a styling option, you will see Markdown syntax automatically apply to your Guide content and the style rendered within your preview. Take a look at the Markdown Syntax article to learn the supported syntax.

wysiwyg.gif

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

edit-text-theme-styles.gif

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

edit-text-styles.gif

Single Button

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

Note: You may see additional button action options in gray that aren’t available for you. You will see these options change once you add a poll Building Block.

If you need, you can add compound actions to your buttons so they perform multiple actions for the user. For example, you can set up the button to dismiss the Guide (1) and open an external link (2):

button-add-action.gif

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.

MultiButton.png

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

Just like the single button, you will be able to style your buttons (including hover states) as you want. Simply place your cursor over the button you’d like to edit to access the Edit Button menu and see other options.

hover-to-see-edit-options.png

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

 

Tip: Animated gifs can be a particularly useful way to engage with your users or show them multi-step actions.

 

All file sizes are limited to 2mb for the uploader. If you wish to use a larger file, you can host your image and add an image URL instead.

 

Note: The larger the file, the longer it may take for the image to render in your Guide.

 

Open Text Poll

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

open-text-poll-block.png

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:

open-text-field-edit-options.gif

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

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

1. Select the Video Building Block.

VideoBB.png


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



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.

BBVideoPreview.png


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]

 

Tip: To download the content for your own knowledge base, click here. 

Related articles