navieo

Customization

Suggestion chips

Give a suggestion a tourSlug to launch a saved authored tour. Suggestions without a slug send the label as an assistant request, which may produce an answer and an appropriate guide offer.

<NavieoNextProvider
  suggestions={[
    { label: "Billing settings", tag: "Popular", tourSlug: "billing-settings" },
    { label: "Product tour", tourSlug: "product-tour" },
  ]}
>
  {children}
</NavieoNextProvider>

Framework navigation

Use NavieoNextProvider for Next.js App Router. It owns pathname observation and router.push() integration.

For another React SPA, use the generic provider and pass the router:

import { NavieoProvider } from "@navieo/react";
import { useNavigate } from "react-router-dom";

function Providers({ children }) {
  const navigate = useNavigate();
  return (
    <NavieoProvider onNavigate={(route) => navigate(route)}>
      {children}
    </NavieoProvider>
  );
}

Without onNavigate, the generic provider uses window.location.href.

Widget visibility

Use showWidget={false} for a host-controlled visibility decision. Dashboard configuration also supports a global enabled switch and scanner-derived hidden routes.

Hook controls

Use playTour(slug) for a saved authored tour. Use startTour(query) to send an assistant request; it does not directly play authored steps or guarantee a guide offer.

const {
  openChat,
  closeChat,
  playTour,
  endTour,
  nextStep,
  prevStep,
  goToStep,
} = useNavieo();

await playTour("first-project");

Step controls affect the currently active authored tour. They do not turn an assistant answer into authored steps.

Theming

Use theme="light", theme="dark", or a custom theme object. Explicit provider values win over remote dashboard appearance. See Themes.

Selector and product-code boundary

Navieo derives selectors from ordinary application semantics such as accessible names, existing IDs, links, roles, and form relationships. Build accessible product markup for users and tests, not Navieo-specific targeting attributes.

The scanner supplies indexed destinations and approved metadata; a live link can be eligible even without a scanner edge. Missing identity or policy evidence must not be repaired with site-specific selectors, labels, route exceptions, or targeting attributes just to make one integration pass.

The supported owner-denial annotation, data-navieo-navigation-intent="exclude", is different: it declares an action unsafe for dynamic guidance and never grants authority. See Live Guidance & Privacy.