Share Button Component

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. Include the `{REWARD}` placeholder to opt into the live reward flow (the SDK substitutes the estimated reward amount).
`classname`	`string`	—	CSS class names applied to the button.
`placement`	`string`	—	Placement ID for backend-driven configuration.
`clickAction`	`"embedded-wallet"` \| `"sharing-page"`	`"sharing-page"`	Which UI to open when the button is clicked. Legacy values like `"share-modal"` are accepted at runtime and routed to the sharing page.
`noRewardText`	`string`	—	Fallback text used when `text` contains `{REWARD}` but no reward is available.
`targetInteraction`	`string`	—	Target interaction type used to calculate the displayed reward.
`preview`	`string`	—	Render in preview mode (e.g. Shopify/WordPress theme editor): the button stays visually enabled and the click handler is a no-op.

Usage Examples

<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

Include the {REWARD} placeholder in text to display the live estimated reward. Provide noRewardText as a fallback for when no reward is available.

<frak-button-share
    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 a full sharing page (default) -->
<frak-button-share clickAction="sharing-page"></frak-button-share>

<!-- Opens the embedded wallet panel -->
<frak-button-share clickAction="embedded-wallet"></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 business 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 business dashboard.

Share Button