Wallet Button

Summary

The <frak-button-wallet> component displays a floating button that opens the Frak Wallet interface, allowing for user interactions such as login, session management, and sharing.

Requirements

An initialized FrakSetup configuration object

More information about the FrakSetup object.

Parameters

Attribute	Type	Default	Description
`classname`	`string`	—	CSS class names applied to the button.
`placement`	`string`	—	Placement ID for backend-driven configuration.
`useReward`	`boolean`	`false`	Whether to display the reward amount on the button.
`targetInteraction`	`string`	—	Target interaction type used to calculate the displayed reward.

Position

The wallet button position (left or right side of the screen) can be configured via placements in the Frak Ads Manager dashboard, or through the FrakSetup object:

window.FrakSetup = {
    modalWalletConfig: {
        metadata: {
            position: "left" // default is "right"
        }
    }
};

Usage Examples

Basic Wallet Button

<frak-button-wallet></frak-button-wallet>

With Custom Class

<frak-button-wallet classname="button button-primary"></frak-button-wallet>

With Reward Display

<frak-button-wallet useReward></frak-button-wallet>

With Placement

<frak-button-wallet placement="global"></frak-button-wallet>

Position and styling are resolved from the placement configuration set in the Frak Ads Manager dashboard.

CSS

CSS can be used to style the button.

Some default styles are applied to the button, but they can be overridden with custom CSS.

Target the component using the frak-button-wallet .override selector.

frak-button-wallet .override {
  background-color: #000;
  color: #fff;
}

Component-specific CSS can also be configured via placements in the Frak Ads Manager dashboard.