Prerequisites
- Next.js Page or App Router project
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
App Router: Access Your Nextjs Project
- Find your layout.jsx/tsx location where you want to embed
- Add the Script component to your app
View on desktop to see code
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>
)
}Page Router: Access Your Nextjs Project
- Find your _document.js file
- Add the Script component to your app
View on desktop to see code
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>
)
}You’re All Set!
Your VideoQi widget is now embedded and ready to use on your Next.js site.