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.

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

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.