Quick Start
Get Helpway's AI support widget running in your React app in under five minutes — no backend required.
Installation
Install the @helpway/react package using your preferred package manager. It ships with TypeScript types, zero runtime dependencies, and works with React 18 and 19.
npm install @helpway/react
Add the Widget
Wrap your application root with HelpwayWidget. The component renders the floating chat button and manages the WebSocket connection to Helpway's edge network. It has no effect on your existing layout.
import { HelpwayWidget } from "@helpway/react"
export default function App() {
return (
<HelpwayWidget
workspaceId="wsp_your_workspace_id"
>
<Router />
</HelpwayWidget>
)
}Where to find your Workspace ID
YourworkspaceId is available in Dashboard → Settings → Widget. It looks like wsp_01hx.... Never commit this to source control — use an environment variable instead.
Passing user identity
When your user is signed in, pass their identity so Helpway can connect conversations to contacts and skip the email capture step.
<HelpwayWidget
workspaceId="wsp_your_workspace_id"
user={{
userId: "u_123",
name: "Aria Chen",
email: "aria@example.com",
}}
>Connect Your Knowledge Base
Helpway's AI answers questions by reading your documentation, help articles, and FAQs. Connect at least one source to enable AI responses — without a knowledge base the agent will escalate every conversation to your team.
Go to Dashboard → Settings → Knowledge Base. This is where you manage all content sources the AI is allowed to read from. Access requires the Admin or Editor role on your workspace.
Click Add source and choose from the available connectors:
- URL Crawler — paste your docs URL and Helpway crawls all linked pages automatically.
- Sitemap — provide a sitemap.xml for precise control over which pages are indexed.
- File upload — upload PDFs, Markdown, or plain text files directly.
- Notion — connect your Notion workspace and select specific pages or databases.
Once you save a source, Helpway begins crawling and vectorizing the content in the background. Small sites (under 50 pages) typically index in under 60 seconds. Large crawls may take a few minutes.
You'll receive an email notification when indexing finishes. The AI will not use partial content — it waits for the full index before answering questions from that source.
Test the AI
Open your app in the browser and click the Helpway widget button in the corner. Type a question that your documentation answers — for example, "How do I reset my password?" or "What are your pricing plans?" The AI should respond within one to two seconds using your indexed content.
You can also test directly from the dashboard without opening your app. Go to Dashboard → Inbox → Test conversation to simulate a visitor session and inspect the AI's reasoning in real time.
Testing in development mode
Test conversations are logged and count toward your workspace's conversation quota, even onlocalhost. Use the testMode prop on HelpwayWidget during development — test-mode conversations are free, clearly labeled in the inbox, and automatically purged after 24 hours.
Next Steps
Your AI agent is live. Here is what to explore next:
- Helpway Inbox — manage all customer conversations in one place with AI copilot drafts, assignment rules, and team collaboration.
- Helpway Outreach — run targeted outbound campaigns to trial users, churned accounts, or ICP leads discovered via AI enrichment.
- Helpway Help Center — publish a branded, SEO-optimized help center powered by the same knowledge base the widget reads from.
- Widget Configuration — customize colors, launcher position, welcome message, and localization settings.
- Webhooks — receive real-time events when conversations are created, resolved, or escalated to your team.