Recorder — script tag

The loader looks for an element with id="livstick-plugin" and mounts the widget inside it. Add this container wherever the recording flow should appear on the page.

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

widget.v2.latest.js is the classic loader: it imports the fingerprinted ESM runtime for you, so there is nothing else to load. Its public URL is not published here — it is provided with your Livstick access, alongside your API key.

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

The loader reads data-* attributes from the script tag itself, not from #livstick-plugin or the mounted element. 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, and data-instance-id map onto the widget's attributes. data-edit-key and data-reply-token are read once and then removed from the DOM — they never linger as visible attributes, because editKey and replyToken are exclusively JavaScript properties on the mounted element, never HTML attributes.

<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>

Once the loader has run, query the mounted element the same way you would for a hand-defined Custom Element, and set config and editKey as properties. Posting editKey as an HTML attribute does nothing — it must be assigned in JavaScript.

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