Installation

Framework-specific guides for adding hooman.live to your website.

Next.js Integration

Add hooman.live to your Next.js application using the Script component for optimal loading performance.

Step 1: Add the Script Tag

Add the hooman.live script to your root layout file. Using strategy="lazyOnload" ensures the widget loads after the page is interactive.

app/layout.tsxTypeScript

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://your-domain.com/sdk/liveconnect.js"
          data-key="lck_YOUR_EMBED_KEY"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

Step 2: Configure Permissions Policy

Required for Video Calls

Video calls require camera and microphone access. You must configure the Permissions-Policy header to allow these features.

Add or update your next.config.ts to include the Permissions-Policy header:

next.config.tsTypeScript

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Permissions-Policy',
            value: 'camera=(self), microphone=(self), geolocation=()',
          },
        ],
      },
    ];
  },
};

export default nextConfig;

Important Notes:

camera=(self) allows camera access for your domain
microphone=(self) allows microphone access for your domain
Using camera=() or microphone=() (empty) will block video calls

Step 3: Deploy and Test

Deploy your changes to your hosting platform
Visit your website and look for the hooman.live widget in the corner
Click the widget to test requesting a call
Verify that camera and microphone permissions are requested