Chat Widget

NavieoProvider renders a floating widget by default. The published package can load remote configuration, answer assistant questions, offer live guidance, and launch saved authored tours. Use the versions described in API & Authentication.

Built-in widget

<NavieoProvider>
  {children}
</NavieoProvider>

The widget includes a floating action button, panel, message area, suggestion chips, and automatic hiding while an authored tour is active.

Authored-tour suggestions

To launch an authored tour, name an active tour in the suggestion:

<NavieoProvider
  suggestions={[
    { label: "Open the reporting tour", tourSlug: "reporting-overview" },
    { label: "Learn account settings", tourSlug: "account-settings" },
  ]}
>
  {children}
</NavieoProvider>

A suggestion without tourSlug sends its label as an assistant request. A relevant answer does not guarantee a guide offer.

Visibility

Viewport requirement: below 768 CSS pixels, the SDK hides the widget and disables the assistant and live guidance; widen the browser window to use them.

Disable the built-in widget when providing a custom authored-tour launcher:

<NavieoProvider renderChat={false}>
  {children}
  <MyTourLauncher />
</NavieoProvider>

Use showWidget={false} to hide it for the current route. Dashboard widget settings can also disable the widget globally or list hidden routes; an explicit provider value can narrow the resulting presentation.

Custom authored-tour launcher

"use client";

import { useNavieo } from "@navieo/react";

export function TourLauncher() {
  const { playTour, tourState } = useNavieo();
  return (
    <button type="button" disabled={tourState !== "idle"} onClick={() => void playTour("reporting-overview")}>
      Show me reporting
    </button>
  );
}

Treat chatHistory as mounted UI state, not an audit log. The assistant supports bounded answer feedback without persisting client analytics state.

Live guidance

A question can produce an answer and a Take me there offer. Accept the offer to start guidance, then perform each highlighted action yourself. An answer alone does not start a guide. You can disable guidance while retaining informational answers; missing targets and provider failures do not cause Navieo to choose an unrelated target. Use Stop to end guidance. When asked to clarify, send a complete request naming the destination and scope. See Live Guidance & Privacy.