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;
    /**
     * Default attribution params (UTM / via / ref) appended to outbound sharing URLs.
     * Per-call `displaySharingPage` overrides win, then backend config, then this default.
     * `utmContent` is intentionally excluded (it is per-content, never a merchant-wide default).
     */
    attribution?: {
        utmSource?: string;
        utmMedium?: string;
        utmCampaign?: string;
        utmTerm?: string;
        via?: string;
        ref?: string;
    };
    /**
     * Preload specific UI views inside the listener iframe for better UX.
     * @defaultValue ["sharing"]
     */
    preload?: ("modal" | "sharing")[];
}>;

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'; // [!code focus]

window.FrakSetup = { // [!code focus]
    config: { /* ... */ },
    modalWalletConfig: DisplayEmbeddedWalletParamsType; // [!code focus]
} // [!code focus]

The DisplayEmbeddedWalletParamsType has the following properties:

Parameter	Type	Description
loggedIn	object	Configuration for the wallet view when user is logged in
loggedIn.action	object	The main action to display. Set key: "sharing" for a share button, or key: "referred" for a referred state
loggedIn.action.options.link	string	The link to be shared (suffixed with Frak sharing context). Only for key: "sharing"
loggedOut	object	Configuration for the wallet view when user is logged out
metadata	object	Metadata to customize the embedded wallet
metadata.logo	string	Logo URL displayed on the embedded wallet
metadata.homepageLink	string	Link to the homepage of the calling website
metadata.targetInteraction	string	The target interaction behind this modal
metadata.position	"left" | "right"	Position of the wallet component
metadata.i18n	I18nConfig	i18n overrides for the embedded wallet text

Example

JavaScript

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