React

The React package wraps the SDK in a provider and adds hooks. It starts the widget in an effect, so it's safe with server rendering in Next.js and Remix.

Both come from one package, @skavelo/sdk on npm.

npm install @skavelo/sdk

SkaveloProviderCopy Anchor Link

Put it once at the root of your app. It accepts every init option as a prop.

import { SkaveloProvider } from '@skavelo/sdk/react';

<SkaveloProvider agentId="YOUR_AGENT_ID" user={currentUser && { id: currentUser.id, plan: currentUser.plan }}>
  <App />
</SkaveloProvider>

When the user prop changes, for example after sign-in, the provider calls identify for you.

useSkaveloCopy Anchor Link

Open the widget or ask a question from any component inside the provider.

import { useSkavelo } from '@skavelo/sdk/react';

function ExportHelp() {
  const { ask } = useSkavelo();
  return <button onClick={() => ask('How do I export invoices?')}>Help with exports</button>;
}

It returns open, close, ask, isReady and sk, the underlying widget.

useSkaveloEventCopy Anchor Link

Run code when something happens in the widget. The handler doesn't need to be memoized.

import { useSkaveloEvent } from '@skavelo/sdk/react';

useSkaveloEvent('walkthrough_complete', ({ workflowId }) => {
  analytics.track('guide_completed', { workflowId });
});

SkaveloLauncherCopy Anchor Link

Your own button that opens the widget, for example a Help item in your navigation. It renders nothing until the widget is ready, so it doesn't flash during page load.

import { SkaveloLauncher } from '@skavelo/sdk/react';

<SkaveloLauncher label="Help" className="nav-link" />

SkaveloIdentifyCopy Anchor Link

Identifies the signed-in user from anywhere inside the provider, for apps that only know the user deep in the component tree.

import { SkaveloIdentify } from '@skavelo/sdk/react';

<SkaveloIdentify user={{ id: user.id, plan: user.plan }} />