Anatomy of Widget Displays

Structure of Widget Displays

Referring to the image above, key regions of Widget Displays are outlined below.
Main Display
This represents the entire published Widget Display, as it appears on a webpage where it is embedded.

Content Region
Area where actual content, or Tiles are shown. The layout of Tiles in this region depends on the selected Theme for the Display. See Widget Display Styles for further details on customising the styling of this region.

Inline Tile (2a)
A single Tile (item of content). See Inline Tiles in Widget Displays for details on customisation and styling options.

Banner
Optional banner that can be configured to show a logo or title text, and links that either point to external websites or refine the Tiles shown in the Display. See Customising Banners in Widget Displays for further details.

Expanded Tiles

An Expanded Tile refers to the enlarging and highlighting of a single Inline Tile. Since Widget Displays are interactive (intended to be shown in websites and apps), your audience can interact with it, for example, hovering on Product Hotspots, clicking Product CTAs, or clicking on Inline Tiles to Expand them.

You can use Widget Displays with Product Hotspots and CTAs to distribute authentic social proof at different points in your customer’s journey. See Expanded Tiles in Widget Displays for further details on layout and styling options.

Adverts

Adverts are branded or sponsored content and are a great way to push promotional, messaging and advertising content to your audiences. Your audience can interact with Adverts in Widget Displays by clicking on them and be directed to external URLs for more information.

Adverts can be either images or videos and can be added into the mix of content at configurable intervals. See Adverts in Widget Display for further details on adding and customising Adverts in Widget Display.

Visual Editor

When editing a Widget Display, Buzzspark's visual editor provides a true WYSIWYG (what you see is what you get) interface for non-technical users to easily customise and preview their changes before saving. We also provide developer access to code templates.



Referring to the image above, key regions of visual editor User Interface are outlined below.
Preview Pane – shows a preview of the Display as you customise settings.
Preview Pane Toolbar – quick access buttons so you can preview the Display on mobiles, tablets, and desktops.
Right Sidebar – contains all the customisable settings for the Display, grouped into tabs. See Customising Widget Displays for further details on all tabs and available options.
Notification Area – important messages are shown here.
Save Changes – this buttons automatically turns green when you have any unsaved changes.
Close – button to exist the visual editor when you are done.
Reset defaults – a quick way to reset all settings to default if you wish to start-over.

Updated on: 04/02/2023