Embedding Beamer Script in Next.js

Embedding the Beamer script in your React application can be done differently based on whether you’re using a vanilla React setup or a Vite + React setup or Nextjs. This guide will help you integrate Beamer with your Next.js setup.

Embedding the Beamer script in your Next.js application can be done differently based on whether you’re using the traditional /pages directory or the new App Router with the /app directory. This guide will help you integrate Beamer with your Next.js project.

Embedding Beamer Script Without App Router

For a Next.js setup using the traditional /pages directory, you need to embed the Beamer script using the next/script component in your pages or _app.js.

Step 1 : Locate to your `_app.js`:

Open your Next.js project directory.
Navigate to the pages folder.
If it doesn’t exist, create a new file named _app.js.

Step 2 : Embed the Beamer Script:

Add the following script tags using the next/script component:

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import Script from "next/script";
export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Script id="beamer-config" strategy="beforeInteractive">
        {`var beamer_config={product_id:"your_product_id",feedback_button:true,feedback_button_position:"right"};`}
      </Script>
      <Script 
        src="https://app.getbeamer.com/js/beamer-embed.js" 
        strategy="beforeInteractive" 
      />
      <Component {...pageProps} />
    </>
  );
}

Step 3 : Save and Run:

Save the changes to the _app.js file.
Start your Next.js application using npm run dev or yarn dev.‍

Click Here to know about How to Inject User Data into Beamer script in React

Embedding Beamer Script With App Router

For a Next.js setup using the new App Router with the /app directory, you need to embed the Beamer script in the app/layout.tsx file.

Step 1. Locate or Create `layout.tsx`:

Open your Next.js project directory.
Navigate to the app folder.
If it doesn’t exist, create a new file named layout.tsx.

Step 2. Embed the Beamer Script:

Add the following script tags using the next/script component:

import type { Metadata } from "next";
import Script from "next/script";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};
export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en">
      <head>
        <Script id="beamer-config">
          {`var beamer_config={product_id:"your_product_id",feedback_button:true,feedback_button_position:"right"};`}
        </Script>
        <Script src="https://app.getbeamer.com/js/beamer-embed.js" />
      </head>
      <body>{children}</body>
    </html>
  );
}

Step 3. Save and Run:

Save the changes to the layout.tsx file.
Start your Next.js application using npm run dev or yarn dev.

By following these steps, you can effectively embed the Beamer script in your Next.js application, whether you’re using the traditional /pages directory or the new App Router with the /app directory.‍

Click Here to know about How to Inject User Data into Beamer script in React

Was this helpful?

Help us help you more

Help Center