Intégrer le widget Recorder

Comme dans « Effectuer votre première requête API », envoyez un POST sur /containers pour obtenir l’urid du conteneur et son editKey. L’editKey n’est renvoyé qu’à la création : conservez-le dès maintenant, vous en aurez besoin à une étape suivante.

curl -X POST https://client-api.v5.livstick.com/api/v3/containers \
  -H "Authorization: Bearer {ACCESS_TOKEN}" \
  -H "Content-Type: application/json" \
  -d '{ "crid": "welcome-message" }'

Le package propose trois façons de le monter : un composant React compatible SSR pour les applications React, un Custom Element en Shadow DOM pour toute autre stack, ou le loader classique sur une page fullpage.html pour une intégration en iframe. Choisissez celle qui correspond à votre contexte. Si vous le montez dans une iframe, la page hôte doit accorder allow="camera; microphone" — sans cela, la caméra et le micro échouent silencieusement au démarrage.

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

defineLivstickWidget();

// then in your markup:
// <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 — le widget ne les lit jamais dans des attributs HTML. Définissez-les dès que vous disposez d’une référence à l’élément, avec l’editKey conservé lors de la création du conteneur.

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

Le widget émet quatre événements « composed » : livstick:ready, livstick:route-change, livstick:recorded et livstick:error. Écoutez livstick:recorded pour savoir qu’un message a été enregistré, puis mettez à jour votre propre interface.

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