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
  • Type definition
  • Options
  • Example
  • Default value
  • Omitting any listing
  1. Widgets
  2. Configuration options

Sections

The optional sections option sets the sections rendered by the library.

Type definition

type SectionConfig = {
  limit: number;
  order: 1 | -1;
  state: 'live' | 'preShow' | 'replay';
  tag: string;
  title?: string;
};

Options

limit

Limit the number of shows displayed in the show listing.

order

Set the order of shows in the show listing to ascending (1) or descending (-1).

state

Set the show state for the show listing to either list currently streamed shows (live), upcoming shows (preShow) or conducted shows (replay).

tag

Provide an optional tag, e.g. to indiciate the state of a show.

title

Set the title for the show listing.

Example

// one show that is currently live
window.LiSA.library.configs.push({
  sections: [{ limit: 1, order: -1, state: 'live' }],
});

// 3 upcoming shows, with custom title
window.LiSA.library.configs.push({
  sections: [{ limit: 3, order: 1, state: 'preShow', title: 'What\'s next' }],
});

// 25 recorded shows, with custom tag and title
window.LiSA.library.configs.push({
  sections: [{ limit: 25, order: -1, state: 'preShow', tag: 'Replay', title: 'What you have missed' }],
});

You can either combine multiple sections into one library or create multiple, separate libraries. The usage example shows three separate libraries with one section each.

Default value

By default, LiSA Library contains three sections:

Currently live shows — Max. 3 entries in descending order. Upcoming shows — Max. 5 entries in ascending order. Recent shows — Max. 10 entries in descending order.


export const DEFAULT: SectionConfig[] = [
  { limit: 3, order: -1, state: 'live', tag: 'LIVE', title: 'Currently live' },
  { limit: 5, order: 1, state: 'preShow', tag: 'UPCOMING', title: 'Upcoming shows' },
  { limit: 10, order: -1, state: 'replay', tag: 'RECORDED', title: 'Recent shows' },
];

Omitting any listing

In case you want don't want any show listing to appear, e.g. when you want the stage player only, please set the sections value to an empty array.

PreviousQuick viewNextStore

Last updated 1 year ago