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
  • Injecting Theme Styles
  • Injecting Theme Options
  1. Guides
  2. Integration Guide
  3. App Integration
  4. iOS

Theming

The LiSA Player and Widgets allow for fine-grained customization of the UI, going beyond just changing colors and fonts. These Theme Settings can be configured in the LiSA Console and can also be applied in a more targeted manner to specific environments (iOS, Android, web) using the methods described below.

A full list of available style settings and options can be provided by our support team.

Injecting Theme Styles

This guide explains how to inject targeted CSS properties.

Inject CSS at Page Load Using WKUserScript

To ensure the CSS is applied as soon as the document loads:

let scriptSource = "document.body.style.setProperty('--lsc-body-font-sacle', 1);"
let userScript = WKUserScript(source: scriptSource, injectionTime: .atDocumentEnd, forMainFrameOnly: true)

let contentController = WKUserContentController()
contentController.addUserScript(userScript)

let config = WKWebViewConfiguration()
config.userContentController = contentController

let webView = WKWebView(frame: .zero, configuration: config)

  • This ensures CSS properties are applied immediately when the page loads.

  • Injects --lsc-body-font-scale into <body>.

Injecting Theme Options

In addition to injecting style settings, all theme options can be assigned to the _lscLocalThemeOptions variable at the window level.

This allows partial overrides of the global player style and custom theme settings defined in the LiSA Console, specific to the environment where the player is integrated.

let scriptSource = "window._lscLocalThemeOptions = { productCardClickBehavior: \"pipNative\" };"
let userScript = WKUserScript(source: scriptSource, injectionTime: .atDocumentEnd, forMainFrameOnly: true)

let contentController = WKUserContentController()
contentController.addUserScript(userScript)

let config = WKWebViewConfiguration()
config.userContentController = contentController

let webView = WKWebView(frame: .zero, configuration: config)

Sets productCardClickBehavior to pipNative, enabling native Picture-in-Picture (PiP) mode for the current video upon product card click, if supported by the device's OS and Browser.

PreviousFile DownloadsNextReact Native

Last updated 2 months ago