Recorder — composant React

Le composant React, le Custom Element et le loader classique sont tous distribués dans le même package.

npm install @livstick/widget-react-v2

L’import du module ne touche ni à window, ni à document, ni à navigator, ni à aucun stockage — le serveur rend une coquille déterministe, et le parcours s’initialise après l’hydratation. Inutile d’écrire une garde SSR autour.

import { LivstickWidget } from "@livstick/widget-react-v2";
import "@livstick/widget-react-v2/style.css";

uid est l’urid du conteneur, et domain est l’hôte à partir duquel le widget résout les URL d’enregistrement et de ressources. LivstickWidget accepte aussi le reste de sa surface sous forme de props : lang, apiKey, edit, replyToken, apiUrl, senderEmail, autogenerateUrid, debug, fullscreenDesktop, useMediaRecorderOnMobile, instanceId, legacyFlagsMode, className et style, en plus des props de clé d’édition, de configuration et de callbacks présentées dans les deux étapes suivantes.

<LivstickWidget uid="code" domain="example.com" />

editKey donne un accès en écriture à ce seul conteneur depuis le navigateur — c’est la valeur que l’API des conteneurs ne renvoie qu’à la création. overrides transporte votre objet de configuration, et styleOverrides superpose des variables CSS à la feuille de style importée.

<LivstickWidget
  uid="code"
  domain="example.com"
  editKey={editKey}
  overrides={{ behavior: { messageEnabled: true } }}
/>

onReady, onRouteChange, onRecorded et onError reflètent les quatre événements composés que le widget émet dans tous les modes de montage. C’est dans onRecorded que vous réagissez à un message enregistré.

<LivstickWidget
  uid="code"
  domain="example.com"
  editKey={editKey}
  onRecorded={() => {
    // message captured — update your interface here
  }}
  onError={(error) => {
    // error.source is "client" or "server"
  }}
/>