@tirs/recorder

The Tirs recorder panel. When a customer opens a Tirs Customer Care link that points at your site, this package shows the floating recording panel — Start, pause, stop, preview, send — on your page, and connects it to the capture runtime.

What it does

• Watches for a care link token on your site. Without one it does nothing — no DOM, no listeners beyond the initial check.
• When a token is present, it displays the Tirs recording panel as a small floating window over your app. The panel is served from Tirs — your page never handles the recording, the video data, or any upload.
• Coordinates the session: capture starts the instant the customer hits record and stops when they finish, so logs and video stay in sync.
• Resizes itself as the customer moves through the flow, and removes itself when the session completes or the panel is closed.

How to use

npm i @tirs/core @tirs/care @tirs/recorder

import { init } from '@tirs/core';
import { care } from '@tirs/care';
import { mountRecorder } from '@tirs/recorder';

const tirs = init({ key: 'YOUR-KEY', plugins: [care()] });
mountRecorder(tirs);

mountRecorder() is safe to call unconditionally — it is a no-op unless a care link token is present.

Optional configuration

Pass placement options as the second argument. All are optional.

| Option | Type | Default | What it does | | --- | --- | --- | --- | | position | 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' | 'bottom-right' | Corner the panel docks to. Move it if a chat widget or cookie banner already occupies that corner. | | offset | number (px) | 16 | Distance from the two edges of that corner. | | zIndex | number | 2147483000 | Stacking order. High enough to clear typical overlays; lower it if a modal of yours must sit on top. |

mountRecorder(tirs, {
  position: 'bottom-left',   // our chat widget owns bottom-right
  offset: 24,
});

With the script-tag install, the same options are data- attributes on the recorder tag:

<script src="https://cdn.try-trs.com/v1/recorder.js" defer
        data-tirs-position="bottom-left"
        data-tirs-offset="24"></script>

| Attribute | Maps to | | --- | --- | | data-tirs-position | position | | data-tirs-offset | offset | | data-tirs-z | zIndex |

Removing the panel

mountRecorder() returns a handle (or null when there is no token):

const handle = mountRecorder(tirs);
handle?.destroy();   // removes the panel and its listeners

Content-Security-Policy

If your site sets a CSP, allow the panel to load:

frame-src 'self' https://app.try-trs.com;

If you use the framework packages (@tirs/react, @tirs/nextjs, @tirs/angular) or the script-tag install, the panel is already wired up; you don't need this package directly.

MIT © Tirs