Developer Feature

Embedded Signing

Let your users sign documents without ever leaving your app. Embed the full Abundera Sign experience in an iframe — complete with real-time events, white-label branding, and all the evidence features that make signatures legally defensible.

How it works

Iframe embedding

Create an envelope via API, then pass the signing URL to our SDK. It opens a secure iframe — inline or as a modal overlay. The signer sees the full signing experience: document preview, fields, AI summary, signature capture. One line of code.

Real-time events

The iframe communicates via postMessage. Your app receives events for every stage: ready, document loaded, signed, declined, and errors. React instantly — update your UI, trigger workflows, or close the modal automatically on completion.

White-label ready

On Business plans, the signing experience uses your brand colors, logo, and custom domain. Your users see your brand — not ours. Combined with embedded mode, it looks and feels like a native part of your product.

Quick start

// 1. Include the SDK (1.2 KB, no dependencies)
<script src="https://sign.abundera.ai/js/sdk.js"></script>

// 2. Create an envelope via your backend
const res = await fetch('/api/v1/envelopes', {
  method: 'POST',
  headers: { Authorization: `Bearer ${token}` },
  body: JSON.stringify({ /* envelope config */ })
});
const { signing_urls } = await res.json();

// 3. Open embedded signing
const session = AbunderaSign.open({
  url: signing_urls[0],
  container: '#sign-container',
  onSigned: (data) => {
    console.log('Signed!', data);
    session.close();
  },
  onDeclined: (data) => {
    console.log('Declined', data.reason);
  }
});

Why embed signing in your app?

Seamless user experience

No redirects, no new tabs, no context switching. Users stay in your app from start to finish. Signing feels like a native step in your workflow, not an external detour.

Faster completion rates

Every redirect is a drop-off point. Embedded signing removes the friction of leaving your app, reducing abandonment and getting documents signed faster.

Brand consistency

With white-label branding, the signing page matches your app. Your logo, your colors, your domain. Users never know they left your product — because they didn't.

Built for these integrations

SaaS platforms

Add legally binding signatures to your product. Onboarding flows, subscription agreements, service terms — signed without leaving your app.

HR portals

Offer letters, NDAs, policy acknowledgments. New hires sign everything in your HR system. No separate e-sign login, no email chase.

CRM integrations

Sales reps send contracts and watch them get signed — all inside the CRM. Deal velocity improves when signing is one click away.

Marketplaces

Vendor agreements, buyer contracts, rental waivers. Embed signing at the point of transaction where both parties are already engaged.

Works with every framework

<div id="sign-container" style="height:600px"></div>
<script src="https://sign.abundera.ai/js/sdk.js"></script>
<script>
  AbunderaSign.open({
    url: signingUrl,
    container: '#sign-container',
    onSigned: () => alert('Done!')
  });
</script>
import { useEffect, useRef } from 'react';

function SigningEmbed({ signingUrl, onComplete }) {
  const ref = useRef();
  const session = useRef();

  useEffect(() => {
    if (!signingUrl) return;
    session.current = AbunderaSign.open({
      url: signingUrl,
      container: ref.current,
      onSigned: (data) => onComplete(data),
    });
    return () => session.current?.close();
  }, [signingUrl]);

  return <div ref={ref} style={{ height: 600 }} />;
}
<template>
  <div ref="container" style="height:600px" />
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const props = defineProps(['signingUrl']);
const emit = defineEmits(['signed']);
const container = ref();
let session;

onMounted(() => {
  session = AbunderaSign.open({
    url: props.signingUrl,
    container: container.value,
    onSigned: (data) => emit('signed', data),
  });
});
onUnmounted(() => session?.close());
</script>

SDK event reference

onReady

Iframe has loaded and the signing page is initializing. Safe to show loading indicators until this fires.

onDocumentLoaded

Document data has been fetched and rendered. The signer can now see and interact with the document.

onSigned

Signer has completed the signing process. Receives envelope ID and signer details. Close the iframe or show a success state.

onDeclined

Signer has declined with a reason. Handle gracefully — show an alternative action or close the modal.

onError

Something went wrong — expired token, network issue, or access denied. Receive error details for debugging.

onClose

Modal overlay was closed by the user (Escape key or close button). Only fires in modal mode, not inline mode.

Start embedding in minutes

The SDK is a single script tag. Create an envelope, pass the URL, and your users sign without leaving your app. Full API docs cover every option.

API Documentation Try the Demo