Brief Overview

Widget is an element of a ShoutOut created in the Visual Designer that can be added into the frame. Types of widgets are Text, Image, Button, Line, Webview, Lottie, Frame, Carousel.

Styling

Style of the widget can be changed from the property bag:

• Image - upload it and select corner radius, border width and border color

  • You can also select an action for when a user clicks on the image, it'll perform an action - e.g. they'll be redirected to external URL or email address

  • When an action is selected, the icon indicator will change from neutral to green

• Text - choose the font, font size and color, alignment of the text

• Line - change corner radius, border width, line color, and border color can be changed

• Webview - past the URL and see the preview

• Video - add a URL to the YouTube or Vimeo video

• Button - select the action you want the button to perform

  • When the action is selected, the red icon indicator will change to green

  • Multi-line text in a button is supported - press Enter to create a new line

• Color picker now has a pipette tool to capture the color already existing in the design

Adding a widget

To add a widget, click on the Plus button in the property bag and drag selected widget to the canvas.

You will see a blue indication of where that widget will be added.

Up to four widgets can be added in a row inside one frame.

Resizing a widget

To resize a widget, select it and drag the handle bar, or use the size & spacing tool on the side bar.

Button size can be controlled via both the outer (distance from the other widgets) and inner (distance from the text of the button to its borders) spacing.

Stretching a widget

Widget can be stretched by clicking on the stretch icon.

When aspect ratio is locked, the widget will be stretched up to inserted figures. When aspect ratio is unlocked, the widget will take the entire horizontal space available inside the frame.

When there are multiple widgets in a row, each of the widgets will dynamically adjust to fill the space inside the frame. For example, when there are two widgets each will take up 50% of the space, when there are four, each will take up 25%.

Height if the widget can be controlled manually.

Outer spacing

To create space between multiple widgets - select the widget and adjust outer spacing in the property bag.

By default same distance is set for all the sides. To apply a different value to one of the sides, click on the borders icon. Indication "Mixed" will appear.

Carousel

• By default, when you add a carousel widget to the frame, 3 slides will be created, each with an image and text

• You can add other widgets inside the carousel (text, image, button, web view, line). Each slide can have different widgets.

• If you enable auto-play, the slides will move automatically. Otherwise, you can move between them by clicking on the dot indicators at the bottom of the ShoutOut.
• The height of the whole ShoutOut will be based on the highest slide
• You can set the order of the carousel slides by dragging them
• The border, corners, layout that you set for the carousel will be the same for all slides. The background image or color and the content inside can be individual for each slide.

• The maximum number of carousel slides is 5

• Navigate using the three dots at the bottom of the ShoutOut

  • Or create a button, text, or image and assign Next Slide and Previous Slide actions to it

• Only one carousel can be added per a ShoutOut

• Duplicating a slide will add another slide

Video

Add a video from YouTube or Vimeo directly in the Visual Designer with advanced playback controls including:

• Trim video: Custom start and end times
• Play in loop: The video will automatically restart when it ends
• Autoplay: The video will automatically start playing once the ShoutOut appears
• Thumbnail: Select any image as a cover
• Play control: Pause, move forward/back, open YouTube

Technical Notes

• Up to four widgets can be added in a row inside one frame