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`	`string`	`"sharing-page"`	Kept for backwards compatibility; every click opens the sharing page. Legacy values (`"embedded-wallet"`, `"share-modal"`) are accepted and routed there, and the resolved value is reported on the `share_button_clicked` event.
`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

Every click opens the sharing page. clickAction no longer selects a surface — the embedded wallet and the share modal were both retired in components 1.2.0 — but it stays accepted so a stored merchant config keeps working:

<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 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