Getting Started
Getting started with the Whop iFrame SDK
Whop apps are embedded into the site using iFrames. This SDK provides a type-safe way for you to communicate with the Whop application using a request/response style API powered by window.postMessage.
Since this package relies on window.postMessage, it only works in Client Components.
Setup
The main function exported from this package is the createAppIframeSDK function. When called, this function sets up a listener for messages from the main Whop site, using window.on('message', ...).
Next.js Setup
If you’re using Next.js, you’ll need to make sure that you’re only calling createAppIframeSDK on the client. You can do this by using a client layout defined in the root of your app.
Here is an example of the project structure:
app/
├─ layout.tsx
├─ layout.client.tsx
lib/
├─ iframe.ts
import { ClientLayout } from "./layout.client";
export default function RootLayout({
children,
}: {
children: React.ReactNode,
}) {
return (
<html lang="en">
<body>
<ClientLayout>{children}</ClientLayout>
</body>
</html>
);
}
Next.js Will mount this code on the client:
"use client"; // this line is important
import { FC, PropsWithChildren } from "react";
import "@/lib/iframe";
export const ClientLayout: FC<PropsWithChildren> = ({ children }) => {
return <>{children}</>;
};
We declare the SDK in a separate file, such that we can import it throughout the rest of the app.
import { createAppIframeSDK } from "@whop-apps/sdk";
export const WhopApp = createAppIframeSDK({
onMessage: {},
});
Was this page helpful?