Next.js install

Agent instructions

• Use app/layout.tsx plus a small client component for App Router.
• Use _app.tsx or the shared shell for Pages Router.
• Use NEXT_PUBLIC_ANSWERLATTICE_WIDGET_KEY for the public al_* key.
• Do not create separate allowed-origin or blocked-route settings in the product; AnswerLattice dashboard owns them.

'use client';

import Script from 'next/script';
import { usePathname } from 'next/navigation';
import { useEffect } from 'react';

export function AnswerlatticeInstall() {
  const pathname = usePathname() || '/';
  const widgetKey = process.env.NEXT_PUBLIC_ANSWERLATTICE_WIDGET_KEY;

  useEffect(() => {
    if (!widgetKey) return;
    window.AnswerlatticeWidget?.page({
      path: pathname,
      title: document.title,
      feature: pathname.split('/').filter(Boolean)[0] || 'app',
      role: 'member',
      locale: navigator.language || 'en',
    });
  }, [pathname, widgetKey]);

  if (!widgetKey) return null;

  return (
    <Script
      id="answerlattice-widget"
      src="https://answerlattice.com/widget/v1/answerlattice-widget.js"
      data-answerlattice-key={widgetKey}
      strategy="afterInteractive"
    />
  );
}