LiSA Social Commerce
Developers
Developers
  • Developers
  • Guides
    • Integration Guide
      • Web Integration
      • App Integration
        • Android
          • Communication
          • Storage
          • File Downloads
          • Theming
        • iOS
          • Communication
          • Storage
          • File Downloads
          • Theming
        • React Native
          • Communication
          • Storage
          • File Downloads
          • Theming
        • Picture in Picture
      • Entrypoints
        • Query Parameter (v1)
    • Player Communication
      • Message API Reference
        • App
          • App — Heartbeat
          • App — Message Acknowledge
          • App — Message Error
          • App — Listen
        • CTA
          • CTA — Link in Comments
          • CTA — Sponsor Badge
        • Cart — View Cart
        • Comments — Join
        • Media
          • Media — Complete
          • Media — Pause
          • Media — Progress
          • Media — Resume
        • Media Item
          • Media Item — Emoji
          • Media Item — Impression
        • Player
          • Player — Dismiss
          • Player — Native Picture-in-Picture (PiP)
          • Player — Pass Visual Viewport
          • Player — Request Visual Viewport
          • Player — UI Transition
        • Products
          • Products — Add to Cart
          • Products — Add to Wishlist
          • Products — Click
          • Products — Close Product List
          • Products — Emoji
          • Products — Emoji State Update
          • Products — Impression
          • Products — Open Product List
        • Stickers
          • Stickers — Activate
          • Stickers — Click
          • Stickers — Expire
          • Stickers — Impression
          • Stickers — Publish
          • Stickers — Unlock
          • Stickers — Unpublish
          • Stickers — Update
          • Stickers — Voucher Claim
        • Visitor — Pass User Context
        • Shared Legacy Message Properties
    • Products
      • Product Update Notification API
  • Widgets
    • Content Hub
    • Quick Start Guide
    • Appearance
      • Markup
      • Responsive design
    • Configuration options
      • Autoplay
      • Channel
      • Client
      • Data
      • Debug
      • Host node
      • Layout
      • Language
      • On
      • Player
      • Query string
      • Quick view
      • Sections
      • Store
      • Template
    • API reference
      • Library API reference
      • Player API reference
      • Quick View API reference
    • Customisations
      • Template
      • Bring your own template
      • Type definitions
    • Examples
    • Type definitions
      • Asset
      • Product
      • Other
    • Promo Widget
      • Quick Start Guide
      • Configuration options
        • Autoplay
        • Channel
        • Countdown (deprecated)
        • Enabled
        • Image modifier
        • Lead time
        • Live (deprecated)
        • Position
        • Replay (deprecated)
        • Show ID
        • URL
  • Media Player Introduction
    • Picture-in-Picture Mode
  • Analytics
  • REST API
    • Authentication
    • Rate limits
    • Response status and error codes
    • API Documentation
Powered by GitBook
On this page
  • Layouts
  • Section component
  • Show component
  • Image asset format
  • Data source selection
  • Title and description
  1. Widgets

Appearance

PreviousQuick Start GuideNextMarkup

Last updated 1 year ago

The LiSA Content Hub's appearance is kept quite simple, yet it is highly configurable and customizable to fit seamlessly into your storefront's or website's corporate design.

To better understand the customization options, let's take a look at the LiSA Library, it's design approach and the markup generated by the SDK.

Let's start with a very basic example that has very minimal configuration to make use of as much of the LiSA Content Hub defaults as possible:

Layouts

The LiSA Content Hub provides three layout options:

list (Default) — A vertical show listing. grid — A grid view of all shows slider — Similar to the grid layout, except for keeping all shows of a section in a horizontal, scrollable row.

You can find examples of all layout options in the Examples section.

Layout components

All layouts share the same Markup with slight variations in layout-dependent HTML element class names. Each layout includes the following components:

Section component

The section component is a container component to list shows in different states:

Live shows live — Shows that are currently streamed. Upcoming shows preShow — Shows that are scheduled to be streamed in the near future. Recent shows replay — Recorded videos of shows that have been streamed recently.

A section consists of a section title and a section listing.

Show component

The show component contains the relevant data of a single show:

Assets — A show's image of preview video asset.

Tag — A tag that gets assigned dependent on the show's state, e.g. Live, Upcoming or Recorded.

Host Avatars — A show hosts' avatar images.

Title — A show's title. Description — A show's description text, including wysiwyg markup as defined in the LiSA backend.

Date — A show's date in a customisable date format.

The LiSA Library kit allows for customisation using formatting hooks of all show component elements before rendering.

Image asset format

The LiSA Library provides two image assets to choose from:

portrait (Default) — Taken from the portrait asset slot of a respective view or show. landscape — Taken from the landscape asset slot of a respective view or show.

A third option is to provide a callback function to allow for custom selection of an image asset. Please refer to Configuration options for more information on customising the image asset selection.

You can find examples of all image asset format options in the Examples section.

Data source selection

While the show date, host avatars and tag a straight forward in selecting the data source for these elements, selecting the data source for assets, title and description are more sophisticated.

Assets

While setting up a show in the LiSA backend you can provide media assets for both landscape and portrait devices. LiSA Library supports both landscape and portrait asset format, prioritising portrait over landscape if not configured otherwise.

When selecting the asset for a show LiSA Library also reflects a show's state by looking for an asset in the respective show view.

Example: If a show is in replay state the look-up sources are the following:

portrait or landscape) Replay view assets: Cover image (portrait or landscape) Pre-Show view assets: Cover image (portrait or landscape) Show assets: Cover image (portrait or landscape) Default view assets (general settings): Cover image (portrait or landscape)

LiSA Library will search for assets in these sources in the given order. As soon as one of these sources contains an asset, LiSA Library uses it for display.

Title and description

Similar to assets, LiSA Library reflects a show's state when selecting the title and description iterating the following sources:

Show title / description Replay view title / teaser Pre-Show view title / teaser