Add Frak to a custom website

For a custom-built site, adding Frak is a matter of loading one script, setting one config object, and dropping in the components you want. Pick the setup that matches your stack below.

Before you start

Register your site and add your domain in the business dashboard first. Your merchant ID is then resolved automatically from your domain, so the config below stays short. See Register your site.

Rewards need a backend confirmation

Tracking on the page tells Frak an order might be coming. Rewards only go out once your server confirms the sale with a signed webhook. See Validate purchases from your backend.

The components

All three components are framework-agnostic web components, so they work the same whether you write plain HTML, use a bundler, or build with React.

Component	Where it goes	What it does
<frak-button-share>	Product page, homepage	Lets customers share your store and earn rewards
<frak-banner>	Top of the page	Welcomes referred visitors
<frak-post-purchase>	Order confirmation page	Prompts a share right after checkout, and tracks the order

Attribute names use dashes

In HTML and JSX, multi-word attributes must be written with dashes, not camelCase: use customer-id, not customerId. Browsers lowercase attribute names, so a camelCase attribute is silently ignored.

Add Frak to your site

HTML / Vanilla JS

Load and configure Frak

Add this to the <head> of your pages. The config object is read by Frak when it loads, so set it before the script tag.

index.html

<head>
  <!-- 1. Configure Frak (domain defaults to the current host) -->
  <script>
    window.FrakSetup = {
      config: {
        metadata: {
          name: "Your Store",
          currency: "eur",
        },
      },
    };
  </script>

  <!-- 2. Avoid a flash of unstyled elements while the script loads -->
  <style>
    frak-button-share:not(:defined),
    frak-banner:not(:defined),
    frak-post-purchase:not(:defined) { display: none !important; }
  </style>

  <!-- 3. Load the components (auto-registers them and boots the SDK) -->
  <link rel="dns-prefetch" href="https://sdk.frak.id">
  <link rel="preconnect" href="https://sdk.frak.id">
  <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
  <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
  <script
    src="https://sdk.frak.id/components.js"
    defer="defer"
    onerror="var s=document.createElement('script');s.src='https://cdn.jsdelivr.net/npm/@frak-labs/components@latest/cdn/components.js';s.defer=true;document.head.appendChild(s)"
  ></script>
</head>

sdk.frak.id is Frak’s first-party CDN pointer: a release reaches you in minutes, and onerror falls back to jsDelivr if it is ever unreachable. See the CDN / Browser integration guide for how the fallback and preconnects work.

Add the components

Place the banner near the top of your <body>, and the share button wherever you want customers to share:

<body>
  <!-- Welcomes referred visitors -->
  <frak-banner></frak-banner>

  <!-- Inherits your theme's .button styles via classname -->
  <frak-button-share classname="button"></frak-button-share>
</body>

Track the purchase

On your order confirmation page, add the post-purchase card with your order details. When customer-id, order-id, and token are all present, the card also registers the order with Frak automatically:

<frak-post-purchase
  customer-id="cust_123"
  order-id="order_456"
  token="a-unique-order-token"
></frak-post-purchase>

If you do not want to show the card, register the order directly instead. The action becomes available once Frak is ready:

<script>
  window.addEventListener("frak:client", () => {
    window.FrakSetup.core.trackPurchaseStatus({
      customerId: "cust_123",
      orderId: "order_456",
      token: "a-unique-order-token",
    });
  });
</script>

npm / bundler

Install

npm install @frak-labs/components @frak-labs/core-sdk

Configure Frak

Set the config in its own module so it runs first:

frak-setup.ts

import type { FrakWalletSdkConfig } from "@frak-labs/core-sdk";

declare global {
  interface Window {
    FrakSetup: { config?: FrakWalletSdkConfig };
  }
}

window.FrakSetup = {
  config: {
    metadata: {
      name: "Your Store",
      currency: "eur",
    },
  },
};

Register the components

Import your config module first, then import each component you use. Importing a component registers its custom element and boots the SDK from window.FrakSetup.config:

main.ts

import "./frak-setup";
import "@frak-labs/components/banner";
import "@frak-labs/components/buttonShare";
import "@frak-labs/components/postPurchase";

Then drop the elements into your markup, exactly like the HTML tab:

<frak-banner></frak-banner>
<frak-button-share classname="button"></frak-button-share>
<frak-post-purchase
  customer-id="cust_123"
  order-id="order_456"
  token="a-unique-order-token"
></frak-post-purchase>

Track the purchase

The post-purchase card tracks the order automatically when given all three attributes. To track without rendering the card, call the action directly:

import { trackPurchaseStatus } from "@frak-labs/core-sdk/actions";

await trackPurchaseStatus({
  customerId: "cust_123",
  orderId: "order_456",
  token: "a-unique-order-token",
});

React

The visual components are the same web components, used inside JSX. Install them and (optionally) @frak-labs/core-sdk for direct action calls:

npm install @frak-labs/components @frak-labs/core-sdk

Configure and register

Set the config in its own module, then import it (and the components) before you render your app:

frak-setup.ts

import type { FrakWalletSdkConfig } from "@frak-labs/core-sdk";

declare global {
  interface Window {
    FrakSetup: { config?: FrakWalletSdkConfig };
  }
}

window.FrakSetup = {
  config: {
    metadata: {
      name: "Your Store",
      currency: "eur",
    },
  },
};

main.tsx

import "./frak-setup";
import "@frak-labs/components/banner";
import "@frak-labs/components/buttonShare";
import "@frak-labs/components/postPurchase";

import { createRoot } from "react-dom/client";
import { App } from "./App";

createRoot(document.getElementById("root")!).render(<App />);

Use the components in JSX

App.tsx

export function App() {
  return (
    <>
      <frak-banner />
      <frak-button-share classname="button" />

      {/* On your order confirmation route */}
      <frak-post-purchase
        customer-id="cust_123"
        order-id="order_456"
        token="a-unique-order-token"
      />
    </>
  );
}

The post-purchase card tracks the order automatically. To track without the card, call trackPurchaseStatus from @frak-labs/core-sdk/actions after the order is placed.

TypeScript

TypeScript may not recognize the <frak-*> tags in JSX. Add a small declaration so it does:

frak.d.ts

import type { HTMLAttributes } from "react";

declare global {
  namespace JSX {
    interface IntrinsicElements {
      "frak-banner": HTMLAttributes<HTMLElement>;
      "frak-button-share": HTMLAttributes<HTMLElement> & { classname?: string; text?: string };
      "frak-post-purchase": HTMLAttributes<HTMLElement> & {
        "customer-id"?: string;
        "order-id"?: string;
        token?: string;
      };
    }
  }
}

On React 19, declare the same namespace JSX inside declare module "react" instead of declare global.

Need programmatic control?

For custom flows (wallet status, referral hooks, opening the modal yourself), @frak-labs/react-sdk exposes React hooks and providers. See the React integration guide.

Every option

The full attribute list for each component lives in the developer reference: share button, banner, post-purchase, and the FrakSetup config.

Next steps

Backend validationConfirm real orders with a signed webhook, so rewards fire on genuine sales.

Mobile appsAdd Frak to your native Android and iOS apps.

Components referenceEvery attribute for each Frak component.

Vanilla JS / CDN guideA deeper walkthrough of the script-tag setup.