Skip to content

FrakSetup object

The FrakSetup object is used to configure the Frak Components library in your project. It allows you to set up metadata and other configuration options for your application.

It is required to initialize the Frak Components library and should be passed as a global variable in your project.

You can generate a config object using the Frak SDK Builder.

config object

The config object is used to configure the Frak Components library. It allows you to set up metadata about your application, such as the name and CSS styles.

TypeScript
type Currency = "eur" | "usd" | "gbp";
type Language = "fr" | "en";
// biome-ignore lint/correctness/noUnusedVariables: Documentation snippet for user reference
type FrakWalletSdkConfig = Readonly<{
    /**
     * The Frak wallet url
     * @defaultValue "https://wallet.frak.id"
     */
    walletUrl?: string;
    /**
     * Some metadata about your implementation of the Frak SDK
     */
    metadata: {
        /**
         * Your application name (will be displayed in a few modals and in SSO)
         */
        name?: string;
        /**
         * Your merchant ID from the Frak dashboard (UUID format)
         * Used for referral tracking and analytics
         * If not provided, will be auto-fetched from the backend using your domain
         */
        merchantId?: string;
        /**
         * Language to display in the modal
         * If undefined, will default to the browser language
         */
        lang?: Language;
        /**
         * The currency to display in the modal
         * @defaultValue `"eur"`
         */
        currency?: Currency;
        /**
         * The logo URL that will be displayed in a few components
         */
        logoUrl?: string;
        /**
         * The homepage link that could be displayed in a few components
         */
        homepageLink?: string;
    };
    /**
     * Some customization for the modal
     */
    customizations?: {
        /**
         * Custom CSS styles to apply to the modals and components
         */
        css?: `${string}.css`;
        /**
         * Custom i18n configuration for the modal
         *  See [i18next json format](https://www.i18next.com/misc/json-format#i18next-json-v4)
         *
         * Available context variables
         *  - `{{ productName }}` : The name of your website (`metadata.name`)
         *  - `{{ productOrigin }}` : The origin url of your website
         *  - `{{ estimatedReward }}` : The estimated reward for the user
         *
         * Can be a single language config or a multi-language config
         *
         * @example
         * // Multi-language config
         * {
         *  fr: {
         *      "sdk.modal.title": "Titre de modal",
         *      "sdk.modal.description": "Description avec {{ estimatedReward }} de gains",
         *  },
         *  en: {
         *      "sdk.modal.title": "Modal title",
         *  }
         * }
         *
         * @example
         * // Single-language config
         * {
         *      "sdk.modal.title": "Modal title",
         *      "sdk.modal.description": "Description with {{ estimatedReward }} of earnings",
         * }
         */
        i18n?:
            | Record<Language, { [key: string]: string }>
            | { [key: string]: string };
    };
    /**
     * The domain name of your application
     * @defaultValue window.location.host
     */
    domain?: string;
    /**
     * Wait for backend config before rendering components.
     * When true (default), components show a spinner until backend config is resolved.
     * When false, components render immediately with SDK static config / HTML attributes.
     * @defaultValue true
     */
    waitForBackendConfig?: boolean;
}>;
 
window.FrakSetup = {
    config: FrakWalletSdkConfig;
}

Example

JavaScript
window.FrakSetup = {
    config: {
        walletUrl: "https://wallet.frak.id",
        metadata: {
            name: "My Awesome dApp",
            merchantId: "550e8400-e29b-41d4-a716-446655440000",
            lang: "fr",
            currency: "eur"
        },
        customizations: {
            css: "https://my-app.com/frak-styles.css",
        },
        domain: "my-app.com"
    },
};

For more detailed config options, see our FrakWalletSdkConfig.

modalWalletConfig object

The modalWalletConfig object is used to configure the embedded wallet displayed by the Frak Components. It allows you to customize the wallet appearance, sharing behavior, and logged-out state.

TypeScript
import type { DisplayEmbeddedWalletParamsType } from '@frak-labs/core-sdk'; 
 
window.FrakSetup = { 
    config: { /* ... */ },
    modalWalletConfig: DisplayEmbeddedWalletParamsType; 
}

The DisplayEmbeddedWalletParamsType has the following properties:

ParameterTypeDescription
loggedInobjectConfiguration for the wallet view when user is logged in
loggedIn.actionobjectThe main action to display. Set key: "sharing" for a share button, or key: "referred" for a referred state
loggedIn.action.options.linkstringThe link to be shared (suffixed with Frak sharing context). Only for key: "sharing"
loggedOutobjectConfiguration for the wallet view when user is logged out
metadataobjectMetadata to customize the embedded wallet
metadata.logostringLogo URL displayed on the embedded wallet
metadata.homepageLinkstringLink to the homepage of the calling website
metadata.targetInteractionstringThe target interaction behind this modal
metadata.position"left" | "right"Position of the wallet component
metadata.i18nI18nConfigi18n overrides for the embedded wallet text

Example

JavaScript
window.FrakSetup = {
    config: {
        metadata: {
            name: "My Awesome dApp",
        },
    },
    modalWalletConfig: { 
        loggedIn: { 
            action: { 
                key: "sharing", 
                options: { 
                    link: "https://my-app.com", 
                }, 
            }, 
        }, 
        metadata: { 
            logo: "https://my-app.com/logo.png", 
            homepageLink: "https://my-app.com", 
            position: "right", 
            i18n: { 
                "sharing.text": "Check out my app!", 
            }, 
        }, 
    }, 
};