Skip to main content

getAppsInTossGlobals

Synchronously returns global metadata associated with the current mini-app deployment: deployment ID, brand display name, brand icon, and primary brand color.

Signature

import { getAppsInTossGlobals } from '@apps-in-toss/web-framework';

interface AppsInTossGlobals {
deploymentId: string;
brandDisplayName: string;
brandIcon: string;
brandPrimaryColor: string;
}

declare function getAppsInTossGlobals(): AppsInTossGlobals;

Parameters

None.

Returns

An AppsInTossGlobals object:

FieldTypeDescription
deploymentIdstringUnique identifier for the current deployment. Same value as env.getDeploymentId().
brandDisplayNamestringBrand display name string.
brandIconstringBrand icon URL or identifier.
brandPrimaryColorstringBrand primary color value (e.g. #3182F6).

Permission

No permission required — getAppsInTossGlobals is not bound to a PermissionName. For the typical permission flow used by other namespaces, see Guides — Permissions pattern.

Examples

Minimal

import { getAppsInTossGlobals } from '@apps-in-toss/web-framework';

const globals = getAppsInTossGlobals();
console.log(globals.brandDisplayName);
console.log(globals.brandPrimaryColor);

Realistic — apply brand color as a CSS custom property

import { getAppsInTossGlobals } from '@apps-in-toss/web-framework';
import { useEffect } from 'react';

function BrandThemeProvider({ children }: { children: React.ReactNode }) {
useEffect(() => {
const { brandPrimaryColor, brandDisplayName } = getAppsInTossGlobals();

// Inject brand color as a CSS custom property.
document.documentElement.style.setProperty('--brand-primary', brandPrimaryColor);
document.title = brandDisplayName;
}, []);

return <>{children}</>;
}

Try it live

Open the Environment page in sdk-example and run the getAppsInTossGlobals card to inspect the result.

Open in sdk-example

External references