Recorder — balise script

Le loader cherche un élément portant id="livstick-plugin" et y monte le widget. Placez ce conteneur à l’endroit de la page où le parcours d’enregistrement doit apparaître.

<div id="livstick-plugin"></div>

widget.v2.latest.js est le loader classique : il importe pour vous le runtime ESM versionné par empreinte, il n’y a donc rien d’autre à charger. Son URL publique n’est pas publiée ici : elle vous est fournie avec votre accès Livstick, en même temps que votre clé d’API.

<script src="{WIDGET_LOADER_URL}"></script>

Le loader lit les attributs data-* sur la balise script elle-même, pas sur #livstick-plugin ni sur l’élément monté. data-uid, data-domain, data-api-key, data-lang, data-sender-email, data-autogenerate-urid, data-debug, data-fullscreen-desktop, data-use-media-recorder-on-mobile, data-edit et data-instance-id correspondent aux attributs du widget. data-edit-key et data-reply-token sont lus une seule fois puis retirés du DOM : ils ne restent jamais visibles comme attributs, car editKey et replyToken sont exclusivement des propriétés JavaScript de l’élément monté, jamais des attributs HTML.

<script
  src="{WIDGET_LOADER_URL}"
  data-uid="code"
  data-domain="example.com"
  data-api-key="{PUBLIC_API_KEY}"
  data-lang="en"
  data-edit-key="{EDIT_KEY}"
></script>

Une fois le loader exécuté, récupérez l’élément monté comme vous le feriez pour un Custom Element défini à la main, et définissez config et editKey en propriétés. Passer editKey comme attribut HTML n’a aucun effet : il doit être affecté en JavaScript.

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