Skip to content

ButtonShare

ButtonShare(args): Element | null

Defined in: vendor/wallet/sdk/components/src/components/ButtonShare/ButtonShare.tsx:59

Button to share the current page

Parameters

Section titled “Parameters”

args

Section titled “args”

classname?

Section titled “classname?”

string = ""

Classname to apply to the button

clickAction?

Section titled “clickAction?”

"embedded-wallet" | "sharing-page"

Which UI to open on click.

Legacy values (e.g. "share-modal") are accepted at runtime and gracefully route to the full-page sharing UI — the modal-flow share path was retired in favour of displaySharingPage.

Default Value

"sharing-page"

noRewardText?

Section titled “noRewardText?”

string

Fallback text when text contains the {REWARD} placeholder but no reward is available.

placement?

Section titled “placement?”

string

preview?

Section titled “preview?”

string

When set, renders the button in preview mode (e.g. Shopify/WP editor). Skips the client-ready gating so the button is always enabled visually, and no-ops the click handler so merchants can see the final layout with their configured copy even when no Frak client is initialized.

targetInteraction?

Section titled “targetInteraction?”

"referral" | "create_referral_link" | "purchase" | `custom.${string}`

Target interaction behind this sharing action (will be used to get the right reward to display)

text?

Section titled “text?”

string

Text to display on the button.

Including the placeholder {REWARD} (e.g. Share and earn up to \{REWARD\}!) opts the button into the live reward flow: the SDK fetches the estimated reward and substitutes the placeholder. When no reward is available, noRewardText is used as a fallback (or the placeholder is stripped if no fallback is provided).

When omitted, a built-in localized default is used based on the resolved language ("Share and earn!" / "Partagez et gagnez !").

Returns

Section titled “Returns”

Element | null

The share button with <button> tag

Examples

Section titled “Examples”

Basic usage:

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

Using a custom text:

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

Using a custom class:

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

Embedding the live reward amount. Include {REWARD} in text and the SDK fetches + substitutes the estimated reward at render time. Provide no-reward-text as a fallback when no reward is available:

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

Same as above, scoped to a specific interaction type so the reward estimate matches that flow:

<frak-button-share text="Share and earn up to {REWARD}!" no-reward-text="Share and earn!" target-interaction="custom.customerMeeting"></frak-button-share>

See

Section titled “See”