@xsolla/metaframe-test v0.0.0-stage-20230726044839
Babka Overlay SDK
SDK for connecting your Website with a Babka Overlay
Allows users to see their orbs amount, wallet, backpack, and more.
Prerequisites
This project requires NodeJS
(version 16 or later) and React
(version 17 or later).
If you want to use Babka Overlay with any JS project use version 1.7.0
and refer to the documentation in the README-OLD.md file here
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 accepts the following params.
loginProjectId
(required)
Type: string
The Login Project ID with which Babka authorization will be performed.
onLogin
(optional)
Type: (token: string) => void
The callback that called after successful login in Babka Overlay.
onLogout
(required)
Type: () => void
The callback that called after logout from Babka Overlay.
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: "Locale.en_US"
If not provided will be the "en_US" locale.
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.
enabledOrbs
(optional)
Type: string[] Orbs to be enabled in the Metaframe.
Supported orbs: "blue"
, "gold"
Example: "blue", "gold"
If enabledOrbs
is not specified, all orbs will be enabled by default.
googleAnalyticsId
(optional)
Type: string Google Analytics ID to track events in Metaframe for analytics. For the list of all events available for analytics, please refer to the Events section
Example: "G-DMCP19DPQM"
telemetry
(optional)
Type: boolean Enabling telemetry means that you are allowing Xsolla to automatically collects, transmits and measures data from Metaframe to improve Metaframe in the future.
Telemetry is defaulted to true
. To disable telemetry, please set telemetry
to false
.
Usage
Basic usage
Use BabkaOverlay
component in your React project
import React from "react";
import { BabkaOverlay, Locale } from "@xsolla/babka-overlay-sdk";
export const App = () => {
return (
<BabkaOverlay
loginProjectId="your-login-project-id"
locale={Locale.en_US}
shortcutKeys={["ShiftLeft", "Tab"]}
/>
// other application/component code
);
};
With this Babka Overlay will display all available pages in this order if token in babkaOverlayToken
cookie is valid:
Wallet
, Keychain
, Backpack
, Orbs
, Profile
. If token isn't valid Babka Overlay will display Login
page.
Custom usage
Use BabkaOverlay
as a wrapper. You can change order of the pages, remove default pages and add custom pages.
import React from "react";
import {
BabkaOverlay,
Wallet,
Orbs,
Profile,
Locale,
} from "@xsolla/babka-overlay-sdk";
import { CustomComponent } from "./components";
export const App = () => {
return (
<BabkaOverlay
loginProjectId="your-login-project-id"
locale={Locale.en_US}
shortcutKeys={["ShiftLeft", "Tab"]}
>
<CustomComponent />
<Orbs />
<Wallet />
<Profile />
</BabkaOverlay>
// your application/component code
);
};
Available pages: <Wallet />
, <Orbs />
, <Profile />
, <Backpack />
, <Keychain />
Utils
Method | Description |
---|---|
showWalletPage | Open the Wallet tab in Metaframe |
showWalletPacksPage | Open the Orbs Package page under Wallet tab in Metaframe |
showKeychainPage | Open the Keychain tab in Metaframe |
showBackpackPage | Open the Backpack tab in Metaframe |
showProfilePage | Open the Profile tab in Metaframe |
Events
Listen to events
in your React project
import React, { useEffect } from "react";
import {
BabkaOverlay,
Locale,
MetaframeEvent,
} from "@xsolla/babka-overlay-sdk";
export const App = () => {
useEffect(() => {
MetaframeEvent.on("metaframe.resize", ({ width, height }) => {
console.log("width", width);
// Write your callback function here
});
}, []);
return (
<BabkaOverlay
token="user-token-value"
locale={Locale.en_US}
shortcutKeys={["ShiftLeft", "Tab"]}
/>
);
};
Event | Description | Type |
---|---|---|
metaframe:open | Trigger when metaframe open | () => void |
metaframe:close | Trigger when metaframe close | () => void |
metaframe.resize | Trigger when metaframe resize | ({ width, height }) => void |
metaframe.wallet:open | Trigger when metaframe wallet open | () => void |
metaframe.wallet:close | Trigger when metaframe wallet close | () => void |
metaframe.profile:open | Trigger when metaframe profile open | () => void |
metaframe.profile:close | Trigger when metaframe profile close | () => void |
metaframe.orbs:open | Trigger when metaframe orbs dropdown show | () => void |
metaframe.orbs:close | Trigger when metaframe orbs dropdown hide | () => void |
metaframe.keychain:open | Trigger when metaframe keychain open | () => void |
metaframe.keychain:close | Trigger when metaframe keychain close | () => void |
metaframe.backpack:open | Trigger when metaframe backpack open | () => void |
metaframe.backpack:close | Trigger when metaframe backpack close | () => void |
10 months ago