Components

@outlevo/components 0.3.0: Readiness Cards, Revenue Actions, approval status and the assistant for your own app, as React components and as Web Components. MIT licensed.

Install

npm install https://developers.outlevo.com/outlevo-components-0.3.0.tgz

Version 0.3.0 of @outlevo/sdk and @outlevo/components is coming to npm; until then it installs from the developer hub, and the import is the same. npm still has 0.2.0, without the assistant. No Node project? Every call is plain HTTPS: see the API with fetch.

Peer dependencies: react and react-dom 18 or later.

A route on your server holds the key

The components never see an API key. They fetch through a route on your server that adds the key and forwards only the paths you allow. Copy one: Next.js, Express or a Supabase Edge Function.

React

import { OutlevoProvider, ReadinessCard, RevenueActionList, ApprovalStatus } from '@outlevo/components';

<OutlevoProvider fetcher={(path, init) => fetch(`/api/outlevo${path}`, init)}>
  <ReadinessCard handoffId={id} onDecision={(d) => console.log(d)} />
  <RevenueActionList status="queued" />
</OutlevoProvider>

Accepting or rejecting a Readiness Card needs a key created with "Acts as me", so the decision is recorded under the signed-in rep. Approvals never happen inside your app: ApprovalStatus links to the Outlevo portal.

The assistant

import { OutlevoProvider, OutlevoAssistant } from '@outlevo/components';

<OutlevoProvider fetcher={(path, init) => fetch(`/api/outlevo${path}`, init)}>
  <OutlevoAssistant campaignId={campaign.id} />
</OutlevoProvider>

The key needs assistant:read and assistant:write plus the scopes of the work, and your route must forward /v1/assistant/* with POST bodies. A confirm card spends credits only when your user presses Confirm; the Smartlead key, CSV imports and starting a campaign open in Outlevo.

Web Components

<script type="module">import '@outlevo/components/element';</script>
<outlevo-readiness-card handoff-id="…" endpoint="/api/outlevo"></outlevo-readiness-card>
<outlevo-revenue-actions status="queued" endpoint="/api/outlevo"></outlevo-revenue-actions>
<outlevo-assistant endpoint="/api/outlevo" campaign-id="…"></outlevo-assistant>

A decision on a Readiness Card fires an outlevo-decision event.

Theming

Set these CSS variables on a parent element: --ol-font, --ol-radius, --ol-surface, --ol-text, --ol-muted, --ol-accent, --ol-danger.

A whole page built from them: the reference dashboard.