Next.js

DemoPenguin seamlessly integrates with Next.js applications. Follow this guide to add DemoPenguin to your Next.js project.

Installation

Note

Make sure that react and react-dom are version 18 or higher.


npm install demo-penguin


pnpm add demo-penguin


yarn add demo-penguin


bun add demo-penguin

Or using pnpm:


pnpm add demo-penguin

Basic Setup

Note

Get your client token from the DemoPenguin dashboard after creating an application here .

App Router

For Next.js 13+ with the App Router, add DemoPenguin to your root layout:

app/layout.tsx


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

Using Dynamic Imports for SSR layout pages

If you are using Next js and you are building your site at build with ISR, you can use dynamic imports to build your site without DemoPenguin and load it in at runtime.

Create a new file called DemoPenguinWrapper.tsx while will be used in your layout.tsx file. This will ensure that DemoPenguin is only loaded in the browser and not during the build process.


'use client';
 
import dynamic from 'next/dynamic';
// Dynamically import DemoPenguin with SSR disabled
 
const DemoPenguinClient = dynamic(
  () => import('demo-penguin').then(mod => ({ default: mod.DemoPenguin })),
  { ssr: false }
);
 
export function DemoPenguinWrapper({ children }: { children: React.ReactNode }) {
  return (
    <DemoPenguinClient
      clientToken={process.env.NEXT_PUBLIC_DEMO_PENGUIN_CLIENT_TOKEN || ""}
      userInfo={{
        userId: "user-id",
        userFirstName: "John",
        userLastName: "Doe",
        userEmail: "john.doe@example.com",
        userType: "admin",
      }}
      variables={{
        [key: string]: string;
      }}
      devMode={false}
    >
      {children}
    </DemoPenguinClient>
)}

Then in your layout.tsx file, import the DemoPenguinWrapper component and use it as the wrapper for your layout.

app/layout.tsx


import { DemoPenguinWrapper } from './DemoPenguinWrapper';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <DemoPenguinWrapper>{children}</DemoPenguinWrapper>;
}

Pages Router

For the Pages Router, add DemoPenguin to your _app.tsx:

pages/_app.tsx


import type { AppProps } from 'next/app'
import { DemoPenguin } from "demo-penguin"
 
export default function App({ Component, pageProps }: AppProps) {
  return (
    <DemoPenguin
        clientToken="client-token"
        userInfo={{
            userId: "user-id",
            userFirstName: "John",
            userLastName: "Doe",
            userEmail: "john.doe@example.com",
            userType: "admin",
        }}
        variables={{
            [key: string]: string;
        }}
        devMode={false}
    >
        <Component {...pageProps} />
    </DemoPenguin>
  )
}

Configuration Options

Required Props

Prop	Type	Description
`clientToken`	`string`	Your DemoPenguin application token
`userInfo`	`object`	User information
`variables`	`object`	Variables to be used in the DemoPenguin

User Information

The userInfo object can optionally include:


interface UserInfo {
  userId?: string;
  userFirstName?: string;
  userLastName?: string;
  userEmail?: string;
  userType?: string;
}

Variables

Variables are used to pass data to the DemoPenguin. They are passed in as an object with a key of the variable name and a value of the variable value. You can reference variables in your DemoPenguin flows by using the {{variableName}} syntax.


interface Variables {
  [key: string]: string;
}

💡

Tip

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