# React SPA install

> React SPA guidance for installing the v1 widget once and updating context on router changes.

## Agent-ready snippet

```
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;
}
```

## Public API note

The public API may be account-gated. For most clients, install the AnswerLattice widget first.