Referrals Embed

Learn how to install the CodeQR Referrals Embed in your application.

With CodeQR Partners, you can build a white-labeled referral dashboard that lives directly inside your app in just a few lines of code.

This way, your users can automatically enroll in your partner program without needing to leave your app and sign up on a third-party platform.

In this guide, we’ll walk you through the steps to get started with the CodeQR Referrals Embed.

Step 1: Generate embed token

First, you need to create a server API route that generates a public token, which will be used by the CodeQR Referrals Embed to fetch real-time conversions and earnings data from the client-side.

Using server-side SDKs

If you’re using our server-side SDKs, you can generate an embed token using the codeqr.embedTokens.referrals method.

TypeScript

const { publicToken } = await codeqr.embedTokens.referrals({
  programId: "prog_xxx", // program ID from your CodeQR dashboard (in the URL)
  tenantId: user.id, // the user's ID within your application
  partner: {
    name: user.name, // the user's name
    email: user.email, // the user's email
    image: user.image, // the user's image/avatar
    tenantId: user.id, // the user's ID within your application
  },
});

Using REST API

If you’re not using our server-side SDKs, you can generate an embed token using our REST API instead (via the POST /tokens/embed/referrals endpoint).

JavaScript

const response = await fetch("https://api.codeqr.co/tokens/embed/referrals", {
  method: "POST",
  body: JSON.stringify({
    programId: "prog_xxx", // program ID from your CodeQR dashboard
    tenantId: user.id, // the user's ID within your application
    partner: {
      name: user.name, // the user's name
      email: user.email, // the user's email
      image: user.image, // the user's image/avatar
      tenantId: user.id, // the user's ID within your application
    },
  }),
});

const data = await response.json();

const { publicToken } = data;

Refer to the full API reference to learn more about the properties you can pass to the POST /tokens/embed/referrals endpoint.

Step 2: Install the embed

Then, with the publicToken from Step 1, you can install and initialize the CodeQR Referrals Embed. There are two ways to do this:

React component

First, install the NPM package:

npm

npm install @codeqr/embed-react

Then use the component in your React application:

import { useState, useEffect } from "react";
import { CodeQREmbed } from "@codeqr/embed-react";

export default function App() {
  const [publicToken, setPublicToken] = useState("");

  useEffect(() => {
    const fetchPublicToken = async () => {
      // fetching from the server API route you created in Step 1
      const response = await fetch("/api/embed-token");
      const data = await response.json();
      setPublicToken(data.publicToken);
    };

    fetchPublicToken();
  }, []);

  if (!publicToken) {
    return <div>Loading...</div>;
  }

  return <CodeQREmbed data="referrals" token={publicToken} />;
}

Iframe embed

Alternatively, if you’re not using React (or you’re not on React v18.2.0 or higher), you can add the iframe directly to your HTML:

import { useState, useEffect } from "react";

export default function App() {
  const [publicToken, setPublicToken] = useState("");

  useEffect(() => {
    const fetchPublicToken = async () => {
      // fetching from the server API route you created in Step 1
      const response = await fetch("/api/embed-token");
      const data = await response.json();
      setPublicToken(data.publicToken);
    };

    fetchPublicToken();
  }, []);

  if (!publicToken) {
    return <div>Loading...</div>;
  }

  return (
    <iframe
      src={`https://app.codeqr.co/embed/referrals?token=${publicToken}`}
      allow="clipboard-write"
      class="h-screen w-full"
    />
  );
}

Embed options

The CodeQR Referrals Embed supports the following options for styling and behavior:

data · referrals | analytics · required

The type of embed to use. In this case, we’re using the referrals type.

theme · light | dark | system · default: "light"

The theme of the embed.

themeOptions · JSON-stringified object

Available options:

• backgroundColor: The background color of the embed.

Depending on the embed type, you can use the following examples to initialize the embed options:

React component

import { CodeQREmbed } from "@codeqr/embed-react";

const publicToken = "...";

<CodeQREmbed
  data="referrals"
  token={publicToken}
  theme="light"
  themeOptions={{
    backgroundColor: "#F5F5F5",
  }}
/>;