Widget Types

When working in the Experience Canvas, you will be designing content by selecting widgets from the left hand side and placing them onto the canvas. This article will cover the various widgets in the Experience Canvas, and different options that are available for each widget. 

Text Widget

The text widget has the following icon: 

After adding a text widget to the canvas, you can see all the formatting options under the "Design" tab. These options allow you to modify the font, font size, font weight, line height, line spacing, and other alignment options. The following screenshot shows these options: 

There are some text specific options that are covered in detail here: 

- Hyperlink: You can add a hyperlink to a specific word in your text box. This can be helpful if you'd like to add a link to a specific phrase in a paragraph of text. If you are adding a link to the entire text widget, we would suggest using the standard Interactions menu. 

- Header Tag: You can specify the text with a header tag to help the browser recognize the importance and structure of the text. This can be used to add H1 - H6 tags for SEO and ADA purposes. 

Image widget:

The image widget has the following icon: 

After clicking on the image widget, it will open a pop-up menu to import a new image into your account. If you'd like to access the existing images in your Image Library, you can reference the following article: Fastr Frontend Experience Canvas: Image library

Shape widgets / Paths: 

There are a few different widgets that can be used to draw directly on the canvas. The following screenshots highlight the icons for the Rectangle, Ellipse, Path, and Curve widgets: 

Embed URL widget: 

You can use the Embed URL widget to embed a URL directly into your experience. This is especially useful for adding videos from outside platforms, such as YouTube or Vimeo videos. For guidance on how to use the Embed URL widget for adding videos, please refer to the following article: Fastr Frontend Experience Canvas Embedding Videos.

The Embed URL widget has the following icon:  

To specify which URL should render in this embedded iframe, you can add the URL in the Design Tab, as shown here: 

Once a URL has been specified, you should see a live preview of the URL render on the canvas. 

HTML widget: 

You can use the HTML URL widget to embed HTML directly into your experience. This is especially helpful for embedding other Fastr Frontend experiences inside of a parent experience. This would be necessary if you are designing a carousel style experience.  For guidance on how to use the HTML URL widget for adding carousels, please refer to the following article: Fastr Frontend Experience Canvas: Embedding Carousel Experiences

The HTML widget has the following icon:  

To specify the code for this embedded iframe, you can add the code in the Design Tab, as shown here: 

Once HTML code has been added, you should see a live preview of the HTML render on the canvas. 

Link widget: 

The Link widget has the following icon:  

You can select the link widget from the left side of the canvas and place it on top of any widget. This way, whenever a user clicks on the designated area, they will be redirected to the URL you specify. This can be useful when you want to add multiple links over a single widget. In the following example, I have one image widget that has multiple link widgets to target different products: 

To add an interaction action for the link widget, navigate to the "Interact" section and click on the + icon next to the interaction option. You can also perform many other actions using the link widget, such as: