Share Button

Summary

The <frak-button-share> component opens a modal in the Frak Wallet interface with configurable steps, allowing for complex user interactions such as login, opening session and share.

Requirements

An initialized FrakSetup configuration object

More information about the FrakSetup object.

Parameters

Attribute	Type	Default	Description
`text`	`string`	`"Share and earn!"`	Text to display on the button. Use `{REWARD}` as placeholder for the reward amount.
`classname`	`string`	—	CSS class names applied to the button.
`placement`	`string`	—	Placement ID for backend-driven configuration.
`clickAction`	`"embedded-wallet"` \| `"share-modal"` \| `"sharing-page"`	`"embedded-wallet"`	Which UI to open when the button is clicked.
`useReward`	`boolean`	`false`	Whether to display the reward amount on the button.
`noRewardText`	`string`	—	Fallback text when no reward is available.
`targetInteraction`	`string`	—	Target interaction type used to calculate the displayed reward.

Usage Examples

Basic Share Button

<frak-button-share></frak-button-share>

With Custom Text

<frak-button-share text="Share and earn!"></frak-button-share>

With Custom Class

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

With Reward Display

<frak-button-share
    useReward
    text="Share and earn up to {REWARD}!"
    noRewardText="Share and earn!"
></frak-button-share>

With Click Action

Control which UI opens when the button is clicked:

<!-- Opens the embedded wallet panel (default) -->
<frak-button-share clickAction="embedded-wallet"></frak-button-share>
 
<!-- Opens a share modal -->
<frak-button-share clickAction="share-modal"></frak-button-share>
 
<!-- Opens a full sharing page -->
<frak-button-share clickAction="sharing-page"></frak-button-share>

With Placement

<frak-button-share placement="homepage"></frak-button-share>

Button text, click action, and styling are resolved from the placement configuration set in the Frak Ads Manager dashboard. HTML attributes override placement settings.

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-share .override selector.

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

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