Support areas

Support tools

Launch support before users arrive.

Turn scattered docs, tickets, releases, screenshots, notes, and repeated replies into widget help, hosted docs, tickets, feedback, changelog support, and reviewed answers.

Create workspace

Demo Install Use Cases

Resources

Setup guides

Evaluate & trust

Prepare your support inputs before setup.

Use the pre-onboarding package to organize scattered docs, tickets, FAQs, screenshots, recordings, release notes, and repeated replies.

Open package

Pricing

Create workspace

Install AnswerLattice

Next.js install

App Router and Pages Router guidance for installing the v1 widget once and updating route context.

Install target

One v1 widget script in the app shell

Safe context

Path, title, feature, workflow, role, locale

Verification

Loaded, origin allowed, route allowed, context received

Download agent kit View Markdown

Install verification

The widget goes live only after runtime checks pass.

Script, allowed origin, blocked route, safe context, and fallback checks are visible before product users rely on support.

Install script

Add the v1 widget script and safe context adapter.

Run checks

Verify origin, route, context, and fallback readiness.

Launch widget

Go live only after the runtime checks pass.

AI agent Manual Next.js React Vue Plain HTML Shopify Webflow

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 { useCallback, useEffect } from 'react';

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

  const updateContext = useCallback(() => {
    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]);

  useEffect(() => {
    updateContext();
  }, [updateContext]);

  if (!widgetKey) return null;

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