Developer quickstarts

Add in-app support without building a support stack.

Use the v1 script once, then send safe page context from the app screens where users need help.

Install once

Global script in the app shell, not page-by-page embeds

Context shape

Path, title, feature, workflow, role, locale

Verification

Loaded, origin allowed, route allowed, context received

Send

path, title, feature, workflow, role, and locale

Do not send

passwords, tokens, payment data, emails, phone numbers, raw customer records

Env values

public widget key and optional script URL only; never service accounts or private API keys

Screenshots

user upload or paste only; no automatic page capture or DOM scraping

Verify

widget loaded, origin allowed, route allowed, context received

Private beta workspaces can use the exact dashboard snippet immediately. AnswerLattice supports the stable v1 script URL and browser global for client installs.

Environment setup

Keep install values out of committed code.

Put only the public AnswerLattice widget key and optional script URL in client-safe env variables. AnswerLattice does not need your Firebase credentials, service account, tenant IDs, store IDs, or user data inside the browser app.

Next.js / Vercel

NEXT_PUBLIC_ANSWERLATTICE_WIDGET_KEY=al_your_widget_key
NEXT_PUBLIC_ANSWERLATTICE_WIDGET_SCRIPT_SRC=https://answerlattice.com/widget/v1/answerlattice-widget.js

Vite / React SPA

VITE_ANSWERLATTICE_WIDGET_KEY=al_your_widget_key
VITE_ANSWERLATTICE_WIDGET_SCRIPT_SRC=https://answerlattice.com/widget/v1/answerlattice-widget.js

Nuxt

NUXT_PUBLIC_ANSWERLATTICE_WIDGET_KEY=al_your_widget_key
NUXT_PUBLIC_ANSWERLATTICE_WIDGET_SCRIPT_SRC=https://answerlattice.com/widget/v1/answerlattice-widget.js

Next.js App Router

Load the widget once in your app shell and send route context from a small client component.

'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"
    />
  );
}

React SPA

Initialize once, then call page() from your router or product screen component.

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function loadAnswerlattice(widgetKey) {
  if (document.querySelector('script[data-answerlattice-widget="v1"]')) return;
  const script = document.createElement('script');
  script.src = 'https://answerlattice.com/widget/v1/answerlattice-widget.js';
  script.async = true;
  script.setAttribute('data-answerlattice-widget', 'v1');
  script.setAttribute('data-answerlattice-key', widgetKey);
  document.head.appendChild(script);
}

export function AnswerlatticeInstall() {
  const location = useLocation();
  const widgetKey = import.meta.env.VITE_ANSWERLATTICE_WIDGET_KEY;

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

  return null;
}

Vue / Nuxt

Use the same safe page context from mounted route components.

import { onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';

export function useAnswerlatticeInstall(widgetKey: string) {
  const route = useRoute();

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

  onMounted(() => {
    if (!document.querySelector('script[data-answerlattice-widget="v1"]')) {
      const script = document.createElement('script');
      script.src = 'https://answerlattice.com/widget/v1/answerlattice-widget.js';
      script.async = true;
      script.setAttribute('data-answerlattice-widget', 'v1');
      script.setAttribute('data-answerlattice-key', widgetKey);
      document.head.appendChild(script);
    }
    updateContext();
  });

  watch(() => route.path, updateContext);
}

Vanilla script

Paste the script and call the runtime directly when route context changes.

<script src="https://answerlattice.com/widget/v1/answerlattice-widget.js" data-answerlattice-key="al_your_widget_key" async></script>
<script>
  window.addEventListener("load", function () {
    window.AnswerlatticeWidget?.page({
      path: window.location.pathname,
      title: document.title,
      feature: "billing",
      workflow: "manage_subscription",
      role: "member",
      locale: navigator.language || "en"
    });
  });
</script>

Verify the install from AnswerLattice.

The Widget screen checks that the key exists, script loaded, origin is valid, route is allowed, and page context arrived.

View install guide Start support setup