Integration

UI blocks

React components that render your Seentics data inside your own app.

Not published to npm yet

@seentics/ui lives in the Seentics repository under ui/blocks at version 0.1.0 and is not on the npm registry. Until it is published, use it from source — an npm install will fail.

Earlier docs referred to @seentics/ui-blocks and the landing page to @seentics/react. Neither name has ever existed.

Using it from source

Clone the repository and point your package manager at the workspace folder, or build it and install the tarball.

bash

git clone https://github.com/Seentics/seentics.git
cd seentics/ui/blocks
npm install
npm run build

# then, from your own project:
npm install /path/to/seentics/ui/blocks

Components

The full export list. SeenticsProvider supplies the website ID and API key to everything below it; useSeentics exposes the same context if you would rather render your own charts.

Export	Renders
`SeenticsProvider`	Context. Wrap your app or the subtree that uses the blocks.
`useSeentics`	Hook for the provider’s context — build your own visuals on the same data.
`AnalyticsSummary`	The headline metrics row.
`TrafficChart`	Visitors and pageviews over time.
`TopPages`	Most-viewed pages.
`TopSources`	Referrers and campaigns.
`FunnelChart`	A funnel and its step drop-off.
`RealtimeCounter`	Live visitor count.
`HeatmapViewer`	A click or scroll map for a page.
`SessionReplayPlayer`	The replay player.

Example

Dashboard.tsx

import {
  SeenticsProvider,
  AnalyticsSummary,
  TrafficChart,
  RealtimeCounter,
} from '@seentics/ui';

export function Dashboard() {
  return (
    <SeenticsProvider
      websiteId="YOUR_WEBSITE_ID"
      apiKey={process.env.SEENTICS_API_KEY!}
      apiHost="https://app.seentics.com"
    >
      <RealtimeCounter />
      <AnalyticsSummary />
      <TrafficChart granularity="daily" />
    </SeenticsProvider>
  );
}

Keep the key server-side

These components read the REST API, so they need a key. A key in client-side JavaScript is readable by anyone — proxy the requests through your own backend, or restrict the key to the narrowest scopes it needs. See API keys.

If you would rather not use the package

Read the REST API and render with your own chart library.
Share a dashboard read-only with a public link, from the site's settings — no code at all.