Recorder — pleine page et iframe
Quand la page hôte ne peut rien monter elle-même — une page de checkout tierce, un client e-mail, un site partenaire que vous ne maîtrisez pas —, le Recorder fournit une page fullpage autonome à intégrer dans une iframe. Elle ne dépend de la page hôte que par l’iframe elle-même.
Prérequis
Une clé d’API publique et l’URL de la page fullpage, toutes deux fournies avec votre accès Livstick — voir Clés d’API et scopes.
Intégrer la page fullpage dans une iframe
Son URL publique n’est pas publiée ici : elle vous est fournie avec votre accès Livstick. L’attribut allow est obligatoire : sans allow="camera; microphone", le navigateur refuse à l’iframe l’accès à la caméra et au micro, et le parcours d’enregistrement échoue silencieusement — aucune erreur ne remonte à la page hôte.
<iframe
src="{WIDGET_FULLPAGE_URL}"
allow="camera; microphone"
style="width: 100%; height: 100%; border: 0;"
></iframe>Injecter la configuration côté serveur
La page fullpage lit sa configuration dans un élément <template id="livstick-widget-v2-config">, sous la forme d’un objet JSON dont la clé widgetProps contient les mêmes props que celles acceptées par le composant React et le Custom Element. Quand vous rendez ce template côté serveur, encodez chaque chevron ouvrant du JSON en \u003c au lieu de <. Sans cela, une valeur de configuration contenant </template> — un corps de message, un nom — ferme prématurément la balise template et casse la page.
<template id="livstick-widget-v2-config">{"widgetProps":{"uid":"code","domain":"example.com","apiKey":"{PUBLIC_API_KEY}","overrides":{"version":2}}}</template>
<!-- server-rendered: any "<" inside the JSON values above must be written as \u003c -->Choisir la langue via l’URL
La page fullpage ne lit dans l’URL que son paramètre de requête lang, et n’accepte que des valeurs au format d’un code de langue — tout le reste est ignoré. Aucun autre paramètre d’URL n’atteint le widget : l’API, le domaine, la clé publique et les capacités d’édition ou de réponse proviennent exclusivement de la configuration injectée côté serveur à l’étape précédente. C’est une garantie de sécurité, pas une limitation : une page hôte peut transmettre librement une URL (un lien partagé, une cible de redirection) sans que celle-ci puisse jamais rediriger le widget vers une autre API, un autre domaine ou une autre clé.
<iframe
src="{WIDGET_FULLPAGE_URL}?lang=fr"
allow="camera; microphone"
></iframe>Gérer le retour
La page fullpage ne renvoie ni son événement livstick:recorded ni aucun autre signal à la page hôte à travers la frontière de l’iframe : tout reste interne au document de l’iframe. Pour savoir quand un message a été enregistré, interrogez régulièrement, depuis votre backend, le conteneur créé pour cet enregistrement.
curl https://client-api.v5.livstick.com/api/v3/containers/{crid} \
-H "Authorization: Bearer {ACCESS_TOKEN}"Étapes suivantes
L’objet de configuration accepté par widgetProps est le même que celui documenté pour les autres modes de montage — consultez la référence complète de ce qu’il peut contenir.