Next.js
DemoPenguin seamlessly integrates with Next.js applications. Follow this guide to add DemoPenguin to your Next.js project.
Installation
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
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:
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.
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
:
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;
}
Use the DemoPenguin dashboard to monitor user interactions and demo performance in real-time.