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.

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

Add Frak to your site

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.

<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) -->
  <script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@frak-labs/components@latest"
    defer="defer"
  ></script>
</head>

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>

Install

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

Configure Frak

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

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:

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",
});

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:

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

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

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

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

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 may not recognize the <frak-*> tags in JSX. Add a small declaration so it does:

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.

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.