Embedded Signing

Embedded signing lets you drop signID’s signer UI directly into your own product via an iframe. Signers stay inside your app, meaning they never see signID’s marketing chrome or navigate away from your brand.

Key characteristics:

• Chromeless signer UI at /embed/sign/:token
• Compact “Secured by signID” trust bar retained
• Tenant branding applied (logo, accent color, sender name)
• Responsive to iframe width
• Communicates with host page via postMessage events

The embedded signer is a stripped-down version of the standard signer app:

• No top marketing bar
• No footer with links elsewhere
• Retains the signing canvas, field navigation, and finish flow
• Retains the “Secured by signID” trust attribution (mandatory, for legal reasons)

The chromeless mode makes the signer feel like a native part of your product rather than an external tool.

To generate an embed URL, call:

POST /api/v1/partner/v1/envelopes/{id}/embed-sessions

Request body:

{
  "signerEmail": "[email protected]",
  "allowedOrigins": ["https://your-app.com"],
  "expiresInSeconds": 3600
}

Response includes:

• embedUrl: the URL to load in an iframe
• embedToken: the underlying token
• expiresAt: when the session expires
• allowedOrigins: hosts allowed to embed this token

Embed tokens have two critical security properties:

• Short-lived. Default lifetime is 1 hour; bounded between 5 minutes and 24 hours. After expiration, the embed URL stops working, mint a new session.
• Origin-bound. Tokens only work when embedded on an allow-listed host origin. If your app is https://your-app.com, the token won’t function embedded on any other domain.

Together, these properties limit the blast radius if a token leaks: it expires quickly and only works from your app.

signID provides a hosted embed.js loader that makes iframe integration simple:

<script src="https://signid.brandid.app/embed.js"></script>
<div id="signid-embed"></div>
<script>
  SignID.embed({
    container: '#signid-embed',
    embedUrl: 'https://signid.brandid.app/embed/sign/...',
    onSigned: function() {
      // handle completion
    },
    onDeclined: function() {
      // handle decline
    }
  });
</script>

The loader handles iframe creation, sizing, and postMessage plumbing behind a simple API.

If you prefer to manage the iframe yourself (or you’re not using the hosted loader), listen for postMessage events directly:

window.addEventListener('message', function(event) {
  if (event.origin !== 'https://signid.brandid.app') return;
  var data = event.data;
  if (data.type === 'signid:envelope:signed') {
    // completion
  } else if (data.type === 'signid:envelope:declined') {
    // decline
  } else if (data.type === 'signid:signer:opened') {
    // signer landed on the page
  }
});

signID uses a versioned postMessage protocol, so message shapes are stable across signID releases. Always check event.origin for security.

The origin allowlist is the set of host origins allowed to embed your signID envelopes. Configure per envelope (at embed-session creation time) or globally at the workspace level.

• Origins must be full URLs including protocol: https://your-app.com
• Wildcards are not supported (https://*.your-app.com would be rejected)
• You can add multiple origins (e.g. production, staging, development)

Even in embedded mode, the “Secured by signID” trust bar remains visible at the bottom of the signer UI. It shows:

• The signID wordmark (compact)
• A link to the public verify page for the envelope
• A brief “Secured by signID” attribution

This is intentional and cannot be removed: it’s what signals to the signer that the document they’re signing is going through a legitimate e-signature service, not just an unverified form on your website. It’s a small footprint (a thin bar) but non-negotiable.

The embedded signer adapts to iframe width. It’s tested and supported at widths as narrow as ~360px (small mobile) and as wide as your host page allows.

What signID does at narrow widths:

• Simplifies the toolbar (compact icons instead of labeled buttons)
• Collapses the recipient list into a dropdown
• Adjusts field-tap targets for touch
• Uses vertical scrolling for the PDF instead of side-by-side layouts

You do not need to specify a size manually, just let the iframe fill its container and signID responds.

When the signer clicks Finish, the embedded signer:

1. Sends a signid:envelope:signed postMessage to the host
2. Shows a brief success confirmation inside the iframe
3. Waits for the host to decide the next step

Your host page can:

• Close the iframe and show your own success screen
• Redirect to a follow-up page (e.g. “Next step in your onboarding”)
• Keep the iframe open and let the signer download the sealed PDF from within it

Additionally, signID fires an envelope.signed webhook to your backend for server-side workflow processing.