Quick Start

Install @helpway/react, paste one line of JSX, and ship. The widget bootstraps itself, styles itself, and picks up every dashboard customization in real time.

Get a working Helpway widget on your site in about five minutes.

1. Install the SDK

npm install @helpway/react
# or
pnpm add @helpway/react
# or
bun add @helpway/react

The package is self-contained — CSS is bundled into the JS and injected at runtime the first time the widget mounts. You do not need a separate stylesheet import.

2. Grab your public API key

Sign in to app.helpway.ai, open Settings → API Keys, and copy the pk_live_… key. This key is safe to ship in client-side code — it only grants widget-scoped access, not dashboard access.

Tip: Working locally? The dashboard also ships with a pk_test_… key that points at your local API. Use it to test before going live.

3. Drop in one line

import { HelpwayWidget } from "@helpway/react";
 
export default function App() {
  return (
    <>
      {/* …your app… */}
      <HelpwayWidget apiKey="pk_live_xxxxxxxxxxxx" />
    </>
  );
}

That's it. Refresh — the launcher shows up bottom-right, uses the brand color and avatar from your dashboard, and is fully responsive on mobile.

4. Test it

Click the launcher. Send a message. Your AI agent responds using the knowledge base you configured in the dashboard. If there's no relevant KB content, the agent honestly says so and offers to connect a teammate — no hallucination.

Framework notes

Next.js (App Router)

Mount the widget in your root layout so it persists across navigation:

import { HelpwayWidget } from "@helpway/react";
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <HelpwayWidget apiKey={process.env.NEXT_PUBLIC_HELPWAY_KEY!} />
      </body>
    </html>
  );
}

Next.js (Pages Router)

import { HelpwayWidget } from "@helpway/react";
 
export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <HelpwayWidget apiKey={process.env.NEXT_PUBLIC_HELPWAY_KEY!} />
    </>
  );
}

Vite / CRA

import { HelpwayWidget } from "@helpway/react";
 
export default function App() {
  return (
    <>
      <YourApp />
      <HelpwayWidget apiKey={import.meta.env.VITE_HELPWAY_KEY} />
    </>
  );
}

Next steps

Customization → — change brand color, avatar, widget position, and welcome message from the dashboard.
React SDK → — hooks for building your own chat UI on top of Helpway's infrastructure.