@xsolla/babka-overlay-sdk v2.5.0

Babka Overlay SDK

SDK for connecting your Metasite with a Babka Overlay

Allows users to see their orbs amount, wallet, backpack, and more.

Installation

Install with your package manager of choice.

npm install @xsolla/babka-overlay-sdk

yarn add @xsolla/babka-overlay-sdk

pnpm install @xsolla/babka-overlay-sdk

Configuration

Babka Overlay SDK accepts the following params

token (required)

Type: string
JWT user token that you received after authorization with Babka Login. Decode JWT and pass here the value of social_access_token param from received JWT

locale (optional)

Type: string
Language abbreviation (ISO 631 1), dash (-) and country abbreviation (ISO 3166 1).

Supported locales: "en-US", "de-DE", "es-ES", "ja-JP", "ko-KR", "pt-PT", "ru-RU", "cn-CN"

Example: "en-US"
If not provided will be the same locale as user set on Babka account.

pages (optional)

Type: string[]
List of available pages to be enabled in the Babka Overlay.

Supported pages: "wallet", "keychain", "backpack", "orbs", "profile"

Example: ["wallet", "keychain", "orbs"] If not provided, all pages will be enabled as default.

shortcutKeys (optional)

Type: string[]
Combination of key codes to be used as shortcut to trigger Babka Overlay.

Example: "ShiftLeft", "Tab"
If shortcutKeys is not provided, the shortcut will be disabled by default.

Usage

React

import React, { useEffect } from "react"
import { Overlay } from "@xsolla/babka-overlay-sdk";

export const App = () => {
    useEffect(() => {
        const overlay = new Overlay({
            token: "user-token-value",
            locale: "en-US"
        });

        overlay.mount();
    }, [])

    return (
        // your application/component code
    )
}

JavaScript

import { Overlay } from "@xsolla/babka-overlay-sdk";

const overlay = new Overlay({
  token: "user-token-value",
  locale: "en-US",
});

overlay.mount();