Get started

Quickstart

Copy page

A working Lia app in a few minutes. Host a page, load the SDK, call Lia.init() and Lia.ready(), and open it in Lia as a tester.

#What you need

A web page on https. Any framework, hosted anywhere, as long as it's served over https. Lia only opens https pages.
A Lia account with a username. People need a username to open apps, and so do you.
Your app added to Lia. The Lia team adds it with your page's address and makes you its developer, so you can open it while it's in test. See Getting access.

#1. Load the SDK

Load the SDK from Lia, not from a copy. Lia serves it so that fixes reach every app at once.

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <script src="https://api.lialabs.org/sdk/lia-apps-v1.js"></script>
  <style>
    body {
      margin: 0;
      font-family: system-ui, sans-serif;
      background: var(--lia-bg-color, #fff);
      color: var(--lia-text-color, #0b0b0f);
      padding-bottom: var(--lia-safe-area-inset-bottom, 0px);
    }
  </style>
</head>
<body>
  <main id="app">Opening…</main>
  <script src="app.js"></script>
</body>
</html>

The SDK puts one object on the page, window.Lia. Outside the Lia app it still loads, but every call fails with the code not_in_lia, so you can show a friendly message in a normal browser.

#2. Say hello

Call Lia.init() first. It answers with the player, a session token for your server, the person's language and theme, and more. When your page is drawn, call Lia.ready(): until then, Lia shows its own loader over your app.

app.js

Lia.init().then(
  function (me) {
    // me.player.id is this person's id in your app; me.player.name is their Lia username.
    document.getElementById("app").textContent = "Hello, @" + me.player.name;
    Lia.ready();
  },
  function (error) {
    document.getElementById("app").textContent =
      error.code === "not_in_lia" ? "Open this app inside Lia." : "Something went wrong: " + error.code;
  }
);

If you prefer async and await:

JavaScript

try {
  const me = await Lia.init();
  render(me);
  Lia.ready();
} catch (error) {
  if (error.code === "not_in_lia") showOpenInLia();
}

#3. Open it in Lia

While your app is in test, only you and the testers the Lia team added can see it. Open the Lia app, go to the Apps Center, and open your app. Its header says Test next to your name, and anything it sells costs pretend $LIA.

#4. Try something

A few things to try once init() has answered:

JavaScript

// A toast in Lia's own style.
Lia.toast("Welcome in");

// A tap you can feel.
Lia.haptic("success");

// Lia's main button under your app.
Lia.mainButton.setText("Start").show().onClick(function () {
  Lia.mainButton.showProgress();
  startGame().finally(function () { Lia.mainButton.hide(); });
});

// Keep a best score and see the top 50.
Lia.submitScore(1280).then(function () { return Lia.leaderboard(); }).then(console.log);

#5. Add your server

For anything that matters (items people paid for, $LIA you pay out) your server has to check what the page tells it. It gets a session token from the page and verifies it with your secret key:

server.js

const res = await fetch("https://api.lialabs.org/api/apps/v1/session/verify", {
  method: "POST",
  headers: { Authorization: `Bearer ${process.env.LIA_KEY}`, "Content-Type": "application/json" },
  body: JSON.stringify({ session }),
});
const { valid, playerId } = await res.json();

Verify on your server goes through it step by step.

#Next

How apps run in Lia: the frame, the three looks and the rules your page runs under.
Sell an item: Lia's pay sheet, end to end.
SDK reference: every method, property and event.
The SDK demo at https://api.lialabs.org/sdk/demo tries every call. It opens inside Lia for testers the Lia team adds to it.