Skip to Content
DemoPenguin is now in beta! 🎉
DocumentationInstallationNext.js

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

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

PropTypeDescription
clientTokenstringYour DemoPenguin application token
userInfoobjectUser information
variablesobjectVariables 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.

Last updated on