Recorder — Custom Element

defineLivstickWidget enregistre l’élément personnalisé dans le document. Appelez cette fonction une seule fois, avant d’insérer la balise.

import { defineLivstickWidget } from "@livstick/widget-react-v2/element";

defineLivstickWidget();

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.

<livstick-widget-v2 uid="code" domain="example.com"></livstick-widget-v2>

config, editKey et replyToken sont exclusivement des propriétés JavaScript de l’élément — ils ne sont jamais reflétés en attributs HTML. Définir editKey comme attribut HTML n’a strictement aucun effet : c’est l’erreur la plus fréquente avec ce mode de montage. Définissez-les dès que vous disposez d’une référence à l’élément.

const widget = document.querySelector("livstick-widget-v2");
widget.config = { version: 2, behavior: { messageEnabled: true } };
widget.editKey = editKey;

Tout ce que le widget lit dans le balisage est un véritable attribut HTML : lang, api-key, api-url, sender-email, autogenerate-urid, debug, fullscreen-desktop, use-media-recorder-on-mobile, edit et instance-id, en plus de uid et domain vus à l’étape précédente. style-url est aussi un attribut ; il remplace l’URL de la feuille de style.

<livstick-widget-v2
  uid="code"
  domain="example.com"
  lang="en"
  fullscreen-desktop="true"
></livstick-widget-v2>

L’élément émet quatre événements composés : livstick:ready, livstick:route-change, livstick:recorded et livstick:error. Il expose aussi trois méthodes : record(), reset() et cancelUpload(). L’élément est isolé par Shadow DOM : les feuilles de style de la page hôte ne l’atteignent pas — le widget se stylise via sa propre feuille de style, pas avec des sélecteurs au niveau de la page.

widget.addEventListener("livstick:recorded", () => {
  // message captured — update your interface here
});