trueticket-form-react

Embeddable React component for submitting support tickets to the TrueTicket platform.

Installation

npm install trueticket-form-react

Quick Start

import { ExternalTicketForm } from 'trueticket-form-react';

function App() {
  return (
    <ExternalTicketForm
      clientSecret="your-client-secret"
      defaultCategory="General"
    />
  );
}

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | clientSecret | string | Yes | — | API key for authenticating with TrueTicket | | defaultCategory | string | Yes | — | Default category for submitted tickets | | apiUrl | string | No | https://ticket.truedata.com.mx/api/tickets/external | API endpoint URL | | title | string | No | "Submit Support Ticket" | Form heading | | subtitle | string | No | — | Text displayed below the title | | emailPlaceholder | string | No | "[email protected]" | Placeholder for the email field | | titlePlaceholder | string | No | "Brief description of your issue" | Placeholder for the subject field | | bodyPlaceholder | string | No | "Please provide detailed information..." | Placeholder for the description field | | submitButtonText | string | No | "Submit Ticket" | Label for the submit button | | loadingButtonText | string | No | "Submitting..." | Label shown while submitting | | theme | ColorTheme | No | defaultTheme | Custom color theme object | | showSuccessMessage | boolean | No | true | Show success alert after submission | | showErrorMessage | boolean | No | true | Show error alert on failure | | autoClearOnSuccess | boolean | No | true | Clear the form after successful submission | | onSuccess | (result: SubmitResult) => void | No | — | Callback on successful submission | | onError | (result: SubmitResult) => void | No | — | Callback on failed submission | | className | string | No | — | CSS class for the outer container | | style | CSSProperties | No | — | Inline styles for the outer container |

Theming

Import and extend defaultTheme, or provide your own ColorTheme object:

import { ExternalTicketForm, defaultTheme } from 'trueticket-form-react';

const myTheme = {
  ...defaultTheme,
  primary: '#0070f3',
  primaryHover: '#005bb5',
};

<ExternalTicketForm
  clientSecret="your-client-secret"
  defaultCategory="General"
  theme={myTheme}
/>

License

MIT