VideoQi
VideoQi
GuideBlogChangelog

How to embed widget on Next.js

Prerequisites

  • Active VideoQi account
  • Next.js Page or App Router project


Step 1: Get Your VideoQi Embed Code

Sign in to your VideoQi account and pen the Widget you want to embed.

Share button

Click the Share Button in the top-right corner of the navigation Copy the personalized embed script that appears

Script

Step 2a: Access Your Nextjs (App Router) Project

  • Find your layout.jsx/tsx location where you want to embedok
  • Add the Script component to your app
import Script from 'next/script'
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
          <Script
            id="videoqi"
            data-website-id="APP_ID_HERE"
            src="https://share.videoqi.com/v1/embed.js"
            strategy="afterInteractive"
          />
      </body>
    </html>
  )
}

Step 2b: Access Your Nextjs (Page Router) Project

  • Find your _document.js file.
  • Add the Script component to your app
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'
 
export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
          <Script
            id="videoqi"
            data-website-id="APP_ID_HERE"
            src="https://share.videoqi.com/v1/embed.js"
            strategy="afterInteractive"
          />
      </body>
    </Html>
  )
}

Step 4: You’re All Set!

Your VideoQi widget is now embedded and ready to use on your Next.js site.

Back