Turn Visitors into Customers with Interactive Video

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

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

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.