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
  • Setting Up the WebView
  • Passing Safe-Area Insets
  1. Guides
  2. Integration Guide
  3. App Integration

Android

Documentation Update in Progress

We are currently revisiting and updating this section of our documentation to ensure it provides the most accurate and helpful information. Some content may be incomplete or outdated during this process.

Thank you for your patience! If you have any immediate questions, please don’t hesitate to contact our support team.


This guide explains how to embed the LiSA Player in an Android WebView and enable two-way communication..

Setting Up the WebView

Use the Android WebView component to load the LiSA Player. Here’s a complete example:

import android.os.Bundle
import android.webkit.WebSettings
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity

class WebViewActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_webview)

        val webView: WebView = findViewById(R.id.webView)
        webView.webViewClient = WebViewClient()

        // Enable JavaScript
        val webSettings: WebSettings = webView.settings
        webSettings.javaScriptEnabled = true

        // Allow Media Playback Inline
        webSettings.mediaPlaybackRequiresUserGesture = false

        // Load the web app URL
        webView.loadUrl("https://{clientId}.loveslisa.tech/s/{showId}")
    }
}

Passing Safe-Area Insets

Android WebViews do not natively support safe-area-insets. To address this, inject CSS variables for safe-area compensation into the LiSA Player:

private fun injectSafeAreaInsets(webView: WebView) {
    val insetsScript = """
        (function() {
            const rootStyle = document.documentElement.style;
            rootStyle.setProperty('--lsc-safe-area-inset-top', '${topInset}px');
            rootStyle.setProperty('--lsc-safe-area-inset-bottom', '${bottomInset}px');
            rootStyle.setProperty('--lsc-safe-area-inset-left', '${leftInset}px');
            rootStyle.setProperty('--lsc-safe-area-inset-right', '${rightInset}px');
        })();
    """
    webView.evaluateJavascript(insetsScript, null)
}

Then adjust the creation of the webViewClient to this:

        webView.webViewClient = object : WebViewClient() {
            override fun onPageFinished(view: WebView, url: String) {
                injectSafeAreaInsets(webView)
            }
        }

Make sure to calculate topInset, bottomInset, leftInset, and rightInset using Android's safe area utilities.

PreviousApp IntegrationNextCommunication

Last updated 3 months ago