Insightful Button

A React button component that tracks user actions and sends them to your Convex backend.

Installation

npm install visitory

Usage

First, get your API key from the Visitory dashboard. Then initialize the tracking with your API key:

import { InsightfulButton, initInsightful } from 'visitory'

// Initialize with your API key
initInsightful({
  apiKey: 'your-api-key-from-dashboard',
  // Optional: Override the default Convex URL
  convexUrl: 'https://your-custom-convex-backend.convex.cloud',
})

// Use the button component
function App() {
  return <InsightfulButton text="Click Me" variant="primary" size="medium" />
}

Features

• Tracks user actions (clicks, form submissions, page views, etc.)
• Sends tracked actions to your Convex backend
• Customizable button appearance
• TypeScript support
• API key authentication
• Pre-configured with a default Convex backend

Props

The InsightfulButton component accepts the following props:

| Prop | Type | Default | Description | | -------------- | ------------------------------------ | ---------- | ---------------------------------- | | text | string | "Click Me" | Text to display on the button | | id | string | undefined | Optional ID for the button element | | className | string | "" | Optional CSS class name | | onClick | function | undefined | Optional click handler | | variant | 'primary' | 'secondary' | 'danger' | "primary" | Button style variant | | size | 'small' | 'medium' | 'large' | "medium" | Button size | | disabled | boolean | false | Disabled state | | enableTracking | boolean | true | Enable/disable action tracking |

Tracked Actions

The component tracks various user actions and sends them to your Convex backend:

• Button clicks
• Page views
• Form submissions
• Page exits
• General clicks on the page

Each tracked action includes:

• Action type
• Timestamp
• Page path
• Element information (when applicable)
• Mouse coordinates (for clicks)
• Additional context-specific details

API

initInsightful(config: InsightfulConfig)

Initialize the Insightful tracking with your configuration.

interface InsightfulConfig {
  apiKey: string // Your API key from the Visitory dashboard
  convexUrl?: string // Optional: Your Convex backend URL
}

trackAction(type: string, details?: Record<string, any>)

Manually track a custom action.

getTrackedActions(): TrackedAction[]

Get all currently tracked actions.

clearTrackedActions(): void

Clear all tracked actions.

License

MIT