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
  • Stage
  • Overlay
  • Options
  1. Widgets
  2. Configuration options

Player

The optional player option contains player-specific configuration. LiSA Library supports two options to open the player — either in an overlay (default) or in a embedded iframe — also call stage.

Type definition

type PlayerConfig = {
  format?: 'auto' | Orientation;
  host?: 'overlay' | string;
  minimized?: {
    longSideLimit?: number;
    position?: ElementPosition | 'bl' | 'br' | 'tl' | 'tr';
  };
};

Stage

To open the player in a embedded stage, you need to provide an additional HTML element in your content page, and provide a CSS selector with the player.host option, in order for LiSA Library to find the player's host element.

window.LiSA.library.configs.push({
  player: {
    host: '#your stage.node .query-selector',
  },
});

Overlay

By default, LiSA Library opens the player in an overlay on top of your content page. The format option allows you to set the format of the player explicitly — either portrait or landscape.

window.LiSA.library.configs.push({
  player: {
    format: 'portrait',
  },
});

If none of the player configuration options is provided, LiSA Library will open the player in an overlay that fits the output device best — overlay with slight margins on each side for desktop and full viewport overlay for mobile devices.

Options

Format

The format option only applies to the overlay player. You can fix the format to either landscape (16x9) or portrait (9x16). By omitting the format option or setting it to auto, the player will decide the format depending on the video output setting of the show.

Host

The host option is required if you want to embed the LiSA player directly into you content page, rather than opening it in an overlay on above your content page. It accepts a CSS query selector. If the addressed HTML element cannot be found, the player will open in an overlay.

Minimized

The minimized option provides customizations of the minimized LiSA player.

longSideLimit

The longSideLimit option sets the maximum length of the longer side of the player. In portrait mode the limit equivalents to the player's max-height. In landscape mode the limit equivalents to the player's max-width.

position

The position option determines the position of the LiSA mini player. It accepts one of the following values:

bl — Bottom left

br — Bottom right

tl — Top left

tr — Top right

ElementPosition — Individual positioning using specific offsets to the bottom, left, right or top edge of the viewport.

PreviousOnNextQuery string

Last updated 1 year ago