Choisir un mode d’intégration

Le widget Recorder se monte de quatre façons différentes. Cette page vous aide à trancher sans avoir à lire les quatre pages détaillées : c’est ce dont vous disposez déjà qui détermine le mode de montage adapté.

Votre situation → le mode de montage

Partez de ce dont vous disposez déjà — une application React, une étape de build, ou ni l’une ni l’autre — et lisez la ligne correspondante.

Choisir un mode de montage
Votre situation	Mode de montage	Avantages	Contreparties
Vous avez déjà React et une étape de build	Composant React	Import compatible SSR — le module ne touche jamais à window, document, navigator ni au stockage	L’arbre de composants et ses props restent sous votre responsabilité
Vous avez un build sans React, ou voulez l’isolation par Shadow DOM	Custom Element	Une balise que n’importe quel framework peut enregistrer, isolée par Shadow DOM	config, editKey et replyToken sont uniquement des propriétés JavaScript — les définir comme attributs HTML n’a aucun effet
Vous n’avez pas d’étape de build	Balise script	Un loader classique monté sur un conteneur existant, configuré par des attributs data-	Pas d’étape d’import, pas de configuration pilotée par un bundler
Vous ne voulez rien intégrer, ou votre page ne peut pas gérer la capture média	Iframe pleine page	Tout le parcours d’enregistrement s’exécute sur la page de Livstick, isolé de la vôtre	L’iframe doit recevoir une autorisation explicite pour la caméra et le micro, sinon l’enregistrement échoue silencieusement

Recorder : composant React: Import compatible SSR pour une application qui dispose déjà de React et d’une étape de build.
Recorder : Custom Element: Une balise que n’importe quel framework peut enregistrer, isolée par Shadow DOM.
Recorder : balise script: Un loader classique pour une page sans aucune étape de build.
Recorder : iframe pleine page: Tout le parcours d’enregistrement s’exécute sur la page de Livstick, isolé de la vôtre.

Composant React

Vous avez déjà React et une étape de build. Le composant est compatible SSR : il rend une coquille déterministe côté serveur, et le parcours s’initialise après l’hydratation.

tsx

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

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

Custom Element

Vous avez une étape de build mais pas React, ou vous voulez isoler le Recorder des styles de votre page. L’élément s’enregistre sous le nom livstick-widget-v2, et son balisage est isolé par Shadow DOM.

js

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

defineLivstickWidget();
const widget = document.querySelector("livstick-widget-v2");
widget.editKey = editKey;

Balise script

Aucune étape de build. Le loader classique, widget.v2.latest.js, importe pour vous le runtime ESM versionné par empreinte et se monte sur un conteneur existant, via l’id historique #livstick-plugin et des attributs data-.

Iframe pleine page

Vous ne voulez rien intégrer à votre page, ou votre page ne peut pas du tout accueillir la capture audio et vidéo. Tout le parcours du Recorder s’exécute sur la page fullpage.html de Livstick, dans une iframe que vous intégrez.

html

<iframe src="https://widget.example.com/fullpage.html" allow="camera; microphone"></iframe>

Le Viewer offre une surface plus réduite

Le Viewer ne fait qu’afficher un message enregistré — il n’en enregistre pas. Sa surface d’intégration le reflète : un composant React, et rien d’autre. Le Viewer n’a ni Custom Element, ni montage par balise script, ni iframe pleine page.

tsx

import { LivstickViewer } from "@livstick/widget-viewer";

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

Viewer : composant React: La page de référence du Viewer, avec la liste complète de ses props et son comportement.