Intégration iframe

Signlift expose une iframe /sign/:token que vous pouvez intégrer directement dans votre interface. Le signataire ne quitte jamais votre app.

Whitelist du domaine

Avant tout, ajoutez votre domaine (https://app.yourcompany.com) dans Paramètres → Domaines autorisés. Signlift positionne dynamiquement le header CSP frame-ancestors par organisation : seuls vos domaines whitelistés peuvent embed l'iframe.

Récupération de l'URL de signature

Après avoir créé une signature_request côté serveur, chaque signataire reçoit un sign_url directement utilisable comme src d'iframe. Pas besoin d'extraire le token, ni de reconstruire l'URL.

const res = await fetch('https://api.signlift.io/api/v1/signature_requests', {
  method: 'POST',
  headers: { 'X-Api-Key': process.env.SIGNLIFT_API_KEY, 'Content-Type': 'application/json' },
  body: JSON.stringify({ /* … */ }),
})
const { signers } = await res.json()
const signUrl = signers[0].sign_url
// → https://app.signlift.io/sign/eyJhbGciOiJIUzI1NiJ9...

Transmettez ce signUrl au client (via un endpoint de votre app, un cookie HttpOnly, ou directement dans la page rendue serveur) et utilisez-le tel quel.

Intégration de l'iframe

<iframe
  src="https://app.signlift.io/sign/eyJhbGciOiJIUzI1NiJ9..."
  width="100%"
  height="800"
  sandbox="allow-scripts allow-same-origin allow-forms"
  title="Signature électronique Signlift"
></iframe>

En React :

<iframe
  src={signUrl}
  width="100%"
  height="800"
  sandbox="allow-scripts allow-same-origin allow-forms"
  title="Signature électronique Signlift"
/>

postMessage events

L'iframe envoie des postMessage à votre window parent, tous signés HMAC-SHA256 avec le webhook_secret de votre external application.

Event	Quand
`signlift:signature:ready`	Iframe prête, signataire authentifié.
`signlift:signature:scrolled`	Signataire a lu tout le document.
`signlift:signature:otp_sent`	OTP envoyé par email/SMS.
`signlift:signature:completed`	Signature finalisée.
`signlift:signature:error`	Erreur (token expiré, OTP invalide, etc.).

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://app.signlift.io') return
  const { event: type, payload, signature } = event.data

  // Vérifier la signature côté serveur via /api/v1/webhooks/verify, ou
  // recevoir la confirmation finale via webhook HTTP serveur-à-serveur.

  if (type === 'signlift:signature:completed') {
    showSuccessScreen()
  }
})

Pitfalls courants

sandbox attribute : allow-same-origin et allow-scripts sont nécessaires.
Third-party cookies : Signlift n'utilise pas de cookies tiers (JWT en URL), donc Safari ITP / Chrome 3PCD ne posent pas de problème.
Mobile : l'iframe est responsive, mais l'expérience est meilleure si vous lui donnez au moins 100vh sur mobile.