Get Started

Quick Start with DemoPenguin

Get started with DemoPenguin by creating an account and setting up your application:

Create a DemoPenguin Account

Visit demopenguin.com to create your account and access the platform.

Create an Application

Once logged in:

Navigate to the Applications dashboard
Click “Create New Application”
Configure your application settings and obtain your client token

Install DemoPenguin Package


npm i demo-penguin


pnpm add demo-penguin


yarn add demo-penguin


bun add demo-penguin

Or using pnpm:


pnpm i demo-penguin

Add DemoPenguin to Your Application

Add the DemoPenguin wrapper to your root layout:

app/layout.tsx


import { DemoPenguin } from "demo-penguin"
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <DemoPenguin
          clientToken="client-token"
          userId="user-id"
          userInfo={{
            userId: "user-id",
            userFirstName: "John",
            userLastName: "Doe",
            userEmail: "john.doe@example.com",
            userType: "admin",
          }}
          variables={{
            [key: string]: string;
          }}
        >
          {children}
        </DemoPenguin>
      </body>
    </html>
  )
}

Define Application Routes and Flow Types

In your DemoPenguin dashboard:

Configure your application routes
Define flow types for different user journeys
Map routes to specific demo scenarios

Add Additional User Data (Optional)

Enhance your demo experiences by adding more user data through the userInfo prop:

Custom user roles
Organization details
Usage statistics
Feature flags

💡

Tip

Use the DemoPenguin dashboard to monitor user interactions and demo performance in real-time.