Welcome to example Vanilla JS



1. Placement on Components

Components with a placement attribute read trigger config (text, position, clickAction) from the backend-resolved placement. Configure placements via the business dashboard's merchant sdkConfig.

Placement IDs must match entries in the merchant's sdkConfig.placements. If no match, components fall back to HTML attributes / defaults.

No placement (default)

placement="hero-share"

placement="sidebar-promo"

placement="footer-cta"

2. Placement on Modals

Programmatic displayModal() calls with an optional placement parameter. The listener applies placement-scoped translations and CSS on top of global config.

3. Sharing Page

Programmatic displaySharingPage() call opens a full-page sharing UI with product info, estimated rewards, sharing steps, FAQ, and share/copy buttons.

The promise resolves on first share/copy action. The page stays visible for additional interactions.

[Ready] Click a button to trigger the sharing page

4. Post-Purchase Component

The <frak-post-purchase> web component renders an inline card on thank-you / order-status pages. It shows referral rewards and a share CTA.

Fetches referral status and merchant info automatically. Variant is determined by the user's referral state (referrer vs referee).

Default (auto-detect variant)

With sharing URL override

5. Banner Component

The <frak-banner> web component auto-detects its mode: in-app browser detection (priority) or referral success banner. Uses Light DOM to inherit merchant styles.

The in-app browser banner only appears in in-app browsers (Instagram, TikTok, etc.). The referral banner appears after a successful referral.

Default (auto-detect mode)

With placement

With interaction filter (purchase only)

Identity Merge Demo

This demonstrates cross-browser identity linking. Useful when users navigate from social app browsers (Instagram, TikTok) to external browsers via SSO/OAuth flows.

Note: Token generation requires backend running with a merchant configured for "localhost".

Your anonymousId: Loading...

[Ready] Merge token demo initialized