Afficher le parcours dans votre page

Le parcours peut s’afficher dans une page de votre site, dans un cadre (iframe), au lieu d’ouvrir un lien ou une fenêtre. La personne ne quitte pas votre site ; votre page suit son avancement.

1. Autorisez vos domaines

Dans la console, page Développeurs, section Parcours dans vos pages, ajoutez les origines de vos pages : https://www.votre-site.com (une origine : ni chemin, ni paramètre). Pour développer, ajoutez http://localhost:5173. Par l’API :

POST /v1/journey-embedding
{"origins": ["https://www.votre-site.com"]}

Tant que la liste est vide, personne ne peut intégrer votre parcours.

2. Créez la session, côté serveur

Comme pour un lien : POST /v1/sessions rend url. Donnez-la à votre page.

3. Affichez le parcours

Le cadre pointe vers l’adresse d’intégration : même origine que url, chemin /embed, même fragment. Il doit déléguer la caméra (allow="camera").

<iframe id="tano" allow="camera" style="width:100%;height:700px;border:0"></iframe>
<script>
  const url = new URL(sessionUrl);          // https://verify.tano.africa/#…
  url.pathname = "/embed";
  const cadre = document.getElementById("tano");
  cadre.src = url.toString();

  window.addEventListener("message", (e) => {
    if (e.source !== cadre.contentWindow || e.origin !== url.origin) return;
    if (e.data.type === "tano:hello") {
      // La poignée de main : sans cette réponse, le parcours ne s'affiche pas.
      cadre.contentWindow.postMessage({ type: "tano:init", version: 1 }, url.origin);
      return;
    }
    if (e.data.type === "tano:resize") cadre.style.height = e.data.height + "px";
    if (e.data.type === "tano:completed") afficherMerci();
  });
</script>

Le parcours ne s’affiche qu’après la poignée de main, et seulement si l’origine de votre page — attestée par le navigateur, impossible à contrefaire — figure dans votre liste. Encadré par une autre page, il affiche un refus et ne lui envoie rien.

Les événements

Événement	Quand
tano:ready	Le parcours est affiché.
tano:step	Une étape commence : step vaut consent, applicant, questionnaire, document, face, check, uploading ou help.
tano:completed	La personne a tout envoyé. Lisez le dossier côté serveur, ou attendez case.decided.
tano:ended	Le parcours s’arrête sans envoi : reason vaut declined, expired, invalid_link ou later.
tano:resize	La hauteur du parcours a changé (height, en pixels).

Aucun événement ne porte de résultat ni de donnée personnelle : un message de navigateur se falsifie. La décision se lit côté serveur — webhook case.decided ou GET /v1/cases/{case_id}/results.

Lien expiré

Un lien vaut une heure au plus. Sur tano:ended avec expired, créez une nouvelle session pour le même dossier et remplacez src du cadre : le parcours reprend là où la personne en était.

Avec le SDK

Le SDK web fait tout cela en une ligne — mount("#tano", { url, onCompleted, onExpired }) — et @tano-africa/react fournit <TanoVerification />. Leur publication sur npm est prochaine.