Guides

Make it feel like Lia

Copy page

A checklist and starter code so your app feels part of Lia. Theme, safe areas, language, buttons, back navigation, haptics and sound.

#A starter

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
  <script src="https://api.lialabs.org/sdk/lia-apps-v1.js"></script>
  <style>
    :root { color-scheme: light dark; }
    html, body { margin: 0; height: 100%; }
    body {
      background: var(--lia-bg-color, #fff);
      color: var(--lia-text-color, #0b0b0f);
      font: 16px/1.5 system-ui, -apple-system, sans-serif;
      -webkit-tap-highlight-color: transparent;
      -webkit-user-select: none;
      user-select: none;
    }
    .app {
      min-height: var(--lia-viewport-height, 100vh);
      padding: calc(16px + var(--lia-content-safe-area-inset-top, 0px)) 16px calc(16px + var(--lia-safe-area-inset-bottom, 0px));
      box-sizing: border-box;
    }
    .muted { color: var(--lia-hint-color, #6b6e7b); }
    .card { background: var(--lia-secondary-bg-color, #f5f5f7); border-radius: 18px; padding: 16px; }
  </style>
</head>
<body>
  <main class="app" id="app"></main>
  <script>
    var WORDS = {
      en: { hello: "Hello", start: "Start" },
      es: { hello: "Hola", start: "Empezar" },
      ar: { hello: "مرحبًا", start: "ابدأ" },
    };
    function words() { return WORDS[Lia.language] || WORDS.en; }

    Lia.init().then(function (me) {
      document.documentElement.dir = Lia.rtl ? "rtl" : "ltr";
      document.getElementById("app").innerHTML = '<div class="card"><b>' + words().hello + ", @" + me.player.name + '</b></div>';
      Lia.mainButton.setText(words().start).show().onClick(start);
      Lia.ready();
    }, function (error) {
      document.getElementById("app").textContent = "Open this app inside Lia.";
    });

    Lia.on("languageChanged", function (data) {
      document.documentElement.dir = data.rtl ? "rtl" : "ltr";
      Lia.mainButton.setText(words().start);
    });
  </script>
</body>
</html>

#The checklist

Call Lia.ready() as soon as your first screen is drawn, not after everything has loaded. Lia's loader covers your app until then.
Use Lia's colours. Build on --lia-bg-color, --lia-text-color, --lia-hint-color and --lia-secondary-bg-color, and your app switches with Lia between light and dark.
Mind the safe areas. Pad the bottom with --lia-safe-area-inset-bottom; in fullscreen, keep content below --lia-content-safe-area-inset-top.
Speak their language. Use Lia.language for your words, set dir from Lia.rtl, and listen for languageChanged. Lia speaks 13 languages; English is a fine fallback.
Use Lia's buttons for the main action. Lia.mainButton sits where people expect it, above the home bar, in Lia blue.
Use the back button for your own screens. Show Lia.backButton one screen in, and handle onClick; hide it on your first screen.
Use Lia's dialogs. Lia.confirm, Lia.showPopup and Lia.toast look like the rest of Lia and read right to left when they should.
Feel it. Lia.haptic("selection") for choices, "success" and "error" for results. Not every frame.
Respect sound. Play only while Lia.soundOn, and stop on soundChanged and pause.
Pause on pause. Timers, game loops, music and sockets that matter.
Ask before closing a game under way with Lia.enableClosingConfirmation(), and turn it off when it's over.
Stop swipes from closing a game that uses them with Lia.disableVerticalSwipes().
No hover, no tiny targets. It's a phone: 44 px tap targets at least, and no text selection on buttons.

#Colour your header

If your app has a strong colour of its own, give Lia's header and background the same:

JavaScript

Lia.setHeaderColor("#0E1A3A");
Lia.setBackgroundColor("#0E1A3A");

Lia turns the header's text and buttons light or dark to suit.