Dashboard Apps (Beta)

​

How to make a dashboard app

1. Create an app on whop (go to your company dashboard -> developer -> apps -> create)
2. Then in the app-details -> hosting section:
   • Base URL: https://your-domain.com
   • App Path: (Remove default value, make it empty)
   • Discover Path: (Leave empty)
   • Dashboard Path: /dashboard/[companyId] <- set this
3. Then click SAVE (top of page)
4. Then click on the little icon on the right of the dashboard path input field. This will open your dashboard view within whop.
5. Then create a nextjs app:

pnpm create next-app@latest example-dashboard-app -e https://github.com/whopio/whop-nextjs-app-template

6. Then add in a new file under: app/dashboard/[companyId]/page.tsx. Start with this template:

import { whopSdk } from "@/lib/whop-sdk";
import { headers } from "next/headers";
import { notFound } from "next/navigation";

export default async function DashboardPage({
  params,
}: {
  params: Promise<{ companyId: string }>;
}) {
  const { companyId } = await params;

  const { userId } = await whopSdk.verifyUserToken(await headers());
  const result = await whopSdk.access.checkIfUserHasAccessToCompany({
    userId,
    companyId,
  });
  if (result.accessLevel !== "admin") notFound();

  return (
    <div className="flex flex-col max-w-3xl mx-auto gap-2 text-gray-11 py-16 px-8">
      <h1 className="text-xl">
        Hi <strong>{userId}</strong>, welcome to your dashboard view
      </h1>
    </div>
  );
}

7. Run pnpm dev
8. In your dashboard app preview click on the settings icon in the top right and select localhost. You should now see this page.

​

How to fetch company data with your app api keys.

1. Change your lib/whop-sdk.ts file to look like this (remove the default companyId and agentUserId)

import { WhopServerSdk } from "@whop/api";

export const whopSdk = WhopServerSdk({
  // Add your app id here - this is required.
  // You can get this from the Whop dashboard after creating an app section.
  appId: process.env.NEXT_PUBLIC_WHOP_APP_ID ?? "fallback",

  // Add your app api key here - this is required.
  // You can get this from the Whop dashboard after creating an app section.
  appApiKey: process.env.WHOP_API_KEY ?? "fallback",
});

2. Go to your app developer dashboard. Next to the App Details tab there is a Permissions tab. Open it.
3. Request the permissions that your app needs to function. For example to list company payments / receipts, you need to request the payment:basic:read scope. Select the ones you want and click “Add”
4. For each permission, provide a justification of why your app needs it. Then also choose whether it is required (or optional). You can toggle the little switch at the top of each card. When complete, CLICK SAVE
5. Now go back to your dashboard app view and refresh. You will see a red “Approve Permissions” banner next to your app name. Click it and approve the requested permissions.

6. Now you can start making API requests for data on the companies that you have authorized. (We are adding more endpoints) But right now you can list the receipts (payments) for a company:

const companyReceipts = await whopSdk.payments.listReceiptsForCompany({
  companyId,
  first: 10, // If you have "complexity limits" issues, lower the amount here
});

payment:basic:read
access_pass:basic:read
member:basic:read
plan:basic:read
promo_code:basic:read

​

Coming soon

• Add more endpoints for different company data.
• For some endpoints, make permissions optional (but if you have them, you get extra data)
• For each SDK method, document the required permissions.
• For each permission, add nice descriptions / text and examples.