Skip to main content

Understanding the different Onsite Widget Template Types

Dan Macarie avatar
Written by Dan Macarie
Updated over 3 weeks 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

This layout 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. It can be enhanced with interactive features such as sharing, add-to-cart, and shopspots elements. 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.

Story

This layout is designed to replicate the familiar ‘story’ experience found on social media platforms, displaying posts within circular thumbnails arranged in a horizontal row. Each circle represents a post, and users can tap to open the post in an Expanded Tile view.

The Expanded Tile dynamically scrolls through content in sequence, with a timer that automatically advances to the next post—mirroring the seamless story experience of Instagram. Users can also manually tap to move forward or backward between posts.

The Story Widget supports all types of content (Text, Image, or Video) and can be enhanced with interactive features such as sharing, add-to-cart, and shopspots elements. Being responsive, it adapts to any screen size from desktop to mobile.

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

Short-Videos

This layout is designed to display short-form video content inline within a horizontally scrolling row. Each tile plays a preview or loop of the video, giving users a quick and engaging way to browse through multiple posts.

The Short Videos Widget also includes an Expanded Tile view, where videos are shown in a larger format with playback controls and the option to autoplay or loop.

Users can navigate between videos seamlessly, providing a browsing experience optimized for fast, visual storytelling.

Interactive features such as sharing, add-to-cart, and shopspots elements can be enabled to boost engagement. Being fully responsive, the widget adapts smoothly across desktop and mobile devices for an immersive viewing experience on any screen.

As with other templates, you can further customize the Short Videos Widget through our Custom Code Editor, adding your own CSS and JavaScript to match brand guidelines and create unique experiences.

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?