Embedding

Embed signing in React

Embed the hosted signing form or template builder and handle lifecycle callbacks in a React application.

React and Next.js developers15 minutes

Before you begin

A React application
A network-reachable Signa host
A signing URL or builder token created on your server

What you will complete

A working embedded Signa surface with completion handling

Install and render

Create submissions and builder tokens on your server. Do not expose a Signa API key in browser JavaScript.

React signing form

import { SignaForm } from "@signajs/react";

export function SigningPanel({ signingUrl }: { signingUrl: string }) {
  return (
    <SignaForm
      src={signingUrl}
      onComplete={(event) => console.log(event)}
      onDecline={(event) => console.log(event)}
    />
  );
}

Prepare for production

Pass host for self-hosted routes when the package cannot infer it.
Pin the embed script or package version.
Handle load, complete, decline, and error callbacks.
Use a stable container height and test mobile keyboard behavior.
Confirm iframe and Content Security Policy rules allow the Signa host.

Continue with

Embedding reference Create requests with the API