numcast

A React component to display live viewer counts on your website in real-time. Show real-time online users to create urgency, build trust, and boost conversions.

Website: numcast.io

NumCast helps you add social proof to your product pages by displaying live viewer counts. When customers see others viewing your products, they're more likely to buy.

Get Started

1. Sign up at numcast.io to get your tracking ID
2. Install the package:

   npm install numcast

   or

   yarn add numcast

   or

   pnpm add numcast

3. Add the widget to your product pages (see usage below)

Usage

Basic Usage

import { LiveVisitorsWidget } from "numcast";

function MyPage() {
  return (
    <div>
      <h1>My Product Page</h1>
      <LiveVisitorsWidget trackingId="your-tracking-id" />
    </div>
  );
}

Custom Styling

You can customize the appearance using className or style props:

<LiveVisitorsWidget
  trackingId="your-tracking-id"
  className="my-custom-class"
  style={{
    backgroundColor: "#f0f0f0",
    border: "2px solid #000",
  }}
/>

Props

| Prop | Type | Default | Description | | ------------ | --------------------- | ---------------------- | --------------------------------------------- | | trackingId | string | required | Your NumCast tracking ID | | page | string | Current page path | Custom page path to track | | readOnly | boolean | false | If true, only displays stats without tracking | | apiUrl | string | 'https://www.numcast.io' | API base URL | | className | string | - | Custom CSS class name | | style | React.CSSProperties | - | Custom inline styles |

How It Works

1. Viewer Tracking: When a viewer visits a page, the widget sends a ping to NumCast (default every 30 minutes) to keep their session alive. Use pingIntervalMs to customize.
2. Live Updates: The widget fetches viewer counts (default every 1 minute). Use fetchIntervalMs to customize.
3. Session Management: Each viewer gets a unique session ID stored in localStorage, which persists across page navigations.
4. Automatic Cleanup: Viewers are automatically removed after the active window (e.g. 30 minutes) of inactivity on the server.

Getting Your Tracking ID

1. Visit numcast.io and sign up
2. Create a website in your dashboard
3. Copy your tracking ID from the dashboard
4. Use it in the trackingId prop

Pricing

NumCast offers flexible pricing plans:

• Starter: $9/month - Up to 10,000 visitors/month
• Growth: $19/month - Up to 50,000 visitors/month
• Business: $29/month - Up to 100,000 visitors/month
• Scale: $99/month - Up to 1,000,000 visitors/month

Visit numcast.io to see all plans and features.

Support

• Website: numcast.io
• Email: [email protected]
• Documentation: Available in your dashboard after signing up

Requirements

• React 16.8.0 or higher
• React DOM 16.8.0 or higher

Example Use Cases

• E-commerce: Show live viewer counts on product pages to create urgency
• SaaS Landing Pages: Display real-time interest on feature pages
• Event Pages: Show how many people are viewing an event
• Course Pages: Display live interest in educational content

License

MIT

Made with ❤️ by NumCast