JSPM – @kamyarme/ticketing-widget@1.0.0

Package Exports

@kamyarme/ticketing-widget
@kamyarme/ticketing-widget/dist/index.esm.js
@kamyarme/ticketing-widget/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@kamyarme/ticketing-widget) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

A beautiful, easy-to-use bug reporting and feedback widget for React applications with automatic console log capture and Linear integration.

Features

🎯 Floating Button Widget - Unobtrusive floating button that can be positioned anywhere
📝 Automatic Console Capture - Automatically captures console logs, warnings, and errors
🔐 License-Based Activation - Secure license validation system
📸 File Upload Support - Upload images and documents with your reports
🔗 Linear Integration - Automatically creates issues in Linear
💾 Database Storage - All submissions stored in your database
🌐 Automatic Data Capture - Captures URL, user token, browser info, and screen size
🎨 Customizable - Light/dark themes and custom positioning
🌍 Bilingual - Supports Persian and English

Installation

npm install @ticketing/react-widget
# or
yarn add @ticketing/react-widget

Quick Start

import React from 'react';
import { TicketingWidget } from '@ticketing/react-widget';

function App() {
  return (
    <div>
      <h1>Your Application</h1>
      
      <TicketingWidget
        apiUrl="https://your-api-url.com"
        licenseKey="your-license-key"
        getUserToken={() => localStorage.getItem('authToken')}
      />
    </div>
  );
}

export default App;

Props

Prop	Type	Required	Default	Description
`apiUrl`	`string`	Yes	-	URL of your ticketing API server
`licenseKey`	`string`	Yes	-	Your license key
`getUserToken`	`() => string \| null`	No	`undefined`	Function to retrieve user's auth token
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	No	`'bottom-right'`	Position of the floating button
`theme`	`'light' \| 'dark'`	No	`'light'`	Color theme
`customStyles`	`React.CSSProperties`	No	`{}`	Custom CSS styles for the button

Advanced Usage

Custom Positioning

<TicketingWidget
  apiUrl="https://api.example.com"
  licenseKey="your-key"
  position="top-left"
/>

Dark Theme

<TicketingWidget
  apiUrl="https://api.example.com"
  licenseKey="your-key"
  theme="dark"
/>

Custom Styles

<TicketingWidget
  apiUrl="https://api.example.com"
  licenseKey="your-key"
  customStyles={{
    backgroundColor: '#ff6b6b',
    width: '70px',
    height: '70px',
  }}
/>

With User Authentication

<TicketingWidget
  apiUrl="https://api.example.com"
  licenseKey="your-key"
  getUserToken={() => {
    // Return the user's authentication token
    return localStorage.getItem('token');
    // or from your auth context
    // return authContext.token;
  }}
/>

What Gets Captured?

When a user submits a ticket, the following information is automatically captured:

Console Logs: Last 100 console messages (log, warn, error, info)
Current URL: The page where the issue occurred
User Token: Authentication token (if provided)
User Agent: Browser and OS information
Screen Size: Current viewport dimensions
Timestamp: Exact time of submission
Error Stack Traces: Full stack traces for errors
Custom Description: User-provided details
Files/Screenshots: User-uploaded files

Server Setup

You'll need to set up the backend API server. See @ticketing/api package for details.

npm install @ticketing/api

License

This package requires a valid license key to operate. Contact us for licensing information.

Support

For issues and questions, please visit our GitHub repository or contact support.