@peepalytics/peepstick-react

A drop-in React widget for PeepsTick: a floating button that opens a modal with your project's ticket submission form. Unlike the Express/FastAPI/Django integrations, this talks to PeepsTick directly from the browser — there's nothing to run on your own server.

Install

npm install @peepalytics/peepstick-react

Requires React 17+.

Usage

import { PeepsTickWidget } from "@peepalytics/peepstick-react";

function App() {
  return (
    <>
      {/* ...your app... */}
      <PeepsTickWidget apiKey="tk_..." baseUrl="https://your-peepstick-instance.com" />
    </>
  );
}

Renders a floating button; clicking it fetches your project's live form schema and shows it in a modal. Submitting posts straight to PeepsTick.

If the project's form has a file upload field (toggled on from the form builder in the dashboard — it's just another field type), the widget shows a native multi-file picker and switches the submission to multipart/form-data automatically; plain submissions with no files attached still go out as JSON, unchanged. Each file is capped at 10MB and the total across all files at 20MB — enforced both here (for instant feedback) and again on the server.

Before shipping to production, add your site's domain to the project's Allowed origins list in the PeepsTick dashboard (Project → Allowed origins). By default that list is empty, meaning any origin can use the key (so the widget works immediately in local dev) — once you add at least one origin, PeepsTick only accepts browser requests for this key from origins on that list, which is what keeps a copied key from being usable from an arbitrary site.

Props

| Prop | Default | Description | | ------------- | -------------------- | -------------------------------------------------------- | | apiKey | (required) | Your project's API key, from the PeepsTick dashboard. | | baseUrl | (required) | Your PeepsTick instance's URL, no trailing slash. | | buttonLabel | "Get help" | Text on the floating button. | | heading | "Submit a ticket" | Modal heading. | | position | "bottom-right" | "bottom-right" or "bottom-left". | | accentColor | "#3452FF" | Button background color. |

Security note

apiKey ships inside your page's JavaScript, so anyone can read it via "View Source" — that's expected, not a bug. Treat it as a publishable key, not a secret one: it can only read this project's form schema and submit a ticket, nothing else. Two things narrow what a copied key can be used for:

• Allowed origins (see above) restrict which domains can use the key from a browser at all — enforced by CORS, so the browser itself blocks unauthorized origins before your app ever sees a response.
• Rate limiting caps ticket submissions per key regardless of origin, so a leaked key can't be used to flood your project with tickets.

If you'd rather keep the key server-side entirely, use the Express, FastAPI, or Django integration instead and build your own frontend against your own proxy routes.