Skip to main content
All CollectionsUGCUGC Publisher Center > TouchpointsOnsite UGC Widgets
Understanding the different Onsite Widget Template Types
Understanding the different Onsite Widget Template Types
Dan Macarie avatar
Written by Dan Macarie
Updated over a year ago

Listed below are the various Widget Types available within Nosto's UGC offering

Slider

This layout displays vertically. Users can select the up and down arrows to scroll between the various pieces of content. This layout is designed to render content vertically and will display all types of content (Text, Image, or Video from the Expanded Tile).

You can also enable interactive buttons on the Inline and Expanded Tiles. These features include network sharing, likes/dislikes, comments, voting, social commerce, etc. Being responsive, it is suited to any screen size from desktop to mobile.

Through our Custom Code Editor, you can further style the Widget using Custom CSS and Javascript.

Screen_Shot_2017-08-09_at_17.43.57.png

Quadrant

This Widget alternates content in different positions each time it is loaded to create a checker-board effect. This layout is designed to render content vertically and will display all types of content (Text, Image, or Video on the Expanded Tile).

This template type can be customized to render with continuous scroll (lazy-load) or enable the user to select a button to load more. You can also enable interactive buttons on the Expanded Tile such as network sharing, likes/dislikes, comments, voting, social commerce, etc. Being responsive, it is suited to any screen size from desktop to mobile.

Through our Custom Code Editor, you can further style the Widget using Custom CSS and Javascript.

quadrant.png

Nightfall

This layout is designed to render content vertically and will display all types of content (Text, Image, or Video on the Expanded Tile).

This template type can be customized to render with continuous scroll (lazy-load) or enable the user to select a button to load more. You can also enable interactive buttons on the Expanded Tile such as network sharing, likes/dislikes, comments, voting, social commerce, etc. Being responsive, it is suited to any screen size from desktop to mobile.

Through our Custom Code Editor, you can further style the Widget using Custom CSS and Javascript.

Nightfall.png

Grid

Optimized for images (displays videos on the Expanded Tile), this responsive widget can display a set number of rows (max. 10 rows) in a grid-style format. This template type enables clients to render content in square format and is suited to any screen size from desktop to mobile.

This Widget also has an optional ‘Expanded Tile’ view, allowing you to enable interactive options such as Social Commerce and social network sharing, etc.

Through our Custom Code Editor, you can further style the Widget using Custom CSS and Javascript.

Masonry

Similar to the Grid Widget, Masonry is optimized for images (displays videos on the Expanded Tile), this responsive widget can display a set number of rows (max. 10 rows) in a grid-style format. This template type enables clients to render content and maintain the aspect ratio of each image (landscape or square) and is suited to any screen size from desktop to mobile.

This Widget also has an optional ‘Expanded Tile’ view, allowing you to enable interactive options such as Social Commerce and social network sharing, etc.

Through our Custom Code Editor, you can further style the Widget using Custom CSS and Javascript.

Waterfall

This layout is designed to render content vertically and will display all types of content (Text, Image, or Video on an Expanded tile). This template type can be customized to render with continuous scroll (lazy-load) or enable the user to select a button to load more. You can also enable interactive buttons such as network sharing, likes/dislikes, comments, voting, social commerce, etc. Being responsive, it is suited to any screen size from desktop to mobile.

The Waterfall Widget also has an optional ‘Expanded Tile’ view to display interactive buttons and a larger version of the post.

Through our Custom Code Editor, you can further style the Widget using Custom CSS and Javascript.

Carousel

The template type is designed to display a single row of content that can be scrolled through horizontally and will display all types of content (Text, Image, or Video on an Expanded tile). Being responsive, it is suited to any screen size from desktop to mobile.

The Carousel Widget can be customized to render with continuous scroll (lazy-load) or enable the user to select whether they want to load more content. You can also enable interactive buttons such as network sharing, likes/dislikes, comments, voting, social commerce, etc. Being responsive, it is suited to any screen size from desktop to mobile.

The Carousel Widget also has an optional ‘Expanded Tile’ view to display interactive buttons and a larger version of the post.

Through our Custom Code Editor, you can further style the Widget using Custom CSS and Javascript.

Map

The Map Widget will display geolocated content on a customizable, interactive map that can also interact with a content Widget such as Gallery, Waterfall, or Carousel template types.

The Map Widget is responsive by design and can use either Open Street Maps, Carto DB, Mapzen, or Google Maps (may require REST API) to render the output.

User Generated Content is rendered in clusters based on the amount of aggregated content for that region. The Map Widget can be customized using UGC's admin interface or through Custom CSS and Javascript.

Blank Canvas

The Blank Canvas Widget enables users to create their Widget type, whilst leveraging the existing Nosto Widget framework, enabling users to create their bespoke outputs efficiently.

Blank Canvas allows users to specify conditions such as Widget framework, Tile framework, Tile design, and any associated Javascript libraries that they may wish to load for their Widget.

For any further questions or queries, please send an email to support@nosto.com and our support team will get back to you.

Did this answer your question?