Desenvolvedores

Elementos incorporados

Componha a UI de assinatura em seu produto React com primitivos digitados - Provedor + status + signatário + componentes de captura de assinatura que você renderiza dentro de seu próprio shell de página.

Integrar elementos em quatro etapas

  1. 1

    Instale o pacote

    Adicione @endorsed/elements ao seu projeto React 18+. As dependências de pares são apenas React e React DOM - sem expansão de fornecedores SDK.

  2. 2

    Criar um token de sessão de assinatura no lado do servidor

    No seu back-end, POST /api/signing-sessions com o ID do envelope + e-mail do signatário. A resposta contém um token de sessão de assinatura de curta duração com escopo para esse assinante.

  3. 3

    Wrap sua rota de assinatura em <EndorsedProvider>

    O provedor carrega sua configuração API para os primitivos - sem perfuração de prop. Resgate o token de sessão com useSigningSession() e renderize <EnvelopeStatus>, <SignerInfo> e <SignatureField> dentro de seu próprio layout.

  4. 4

    Lidar com envio de assinatura + retornos de chamada de status

    useSignatureSubmit() publica a assinatura capturada em /api/signing-sessions/:id/signature. Ouça as transições de status e encaminhe o signatário para suas próprias páginas de sucesso/declínio quando SigningSessionStatus mudar.

Exemplo mínimo de incorporação

Uma superfície de assinatura combinável usando os primitivos enviados. Pré-requisitos: React 18+ e um token de sessão de assinatura criado no lado do servidor. Resultado esperado: um signatário vê o status do envelope, sua identidade e um bloco de assinatura – tudo dentro do cromo do produto.

tsx
import {
  EndorsedProvider,
  EnvelopeStatus,
  SignerInfo,
  SignatureField,
  useSigningSession,
} from '@endorsed/elements';

// 1. Wrap once at the app root (or per-signing-route).
export function App({ children }: { children: React.ReactNode }) {
  return (
    <EndorsedProvider
      baseUrl={process.env.NEXT_PUBLIC_ENDORSED_BASE_URL}
      // No API key in the browser. The provider only holds config.
    >
      {children}
    </EndorsedProvider>
  );
}

// 2. Render the signing surface. Compose these primitives into your
//    own page shell — headers, footers, and layout stay yours.
export function SigningPage({ sessionToken }: { sessionToken: string }) {
  const { status, envelope, signer } = useSigningSession(sessionToken);

  if (status === 'loading') return <p>Loading signing session…</p>;
  if (status === 'expired' || status === 'revoked') return <p>This link has expired.</p>;

  return (
    <section>
      <EnvelopeStatus value={envelope.status} />
      <SignerInfo values={{ name: signer.name, email: signer.email }} />
      <SignatureField
        onSubmitted={(result) => {
          // Advance your product state — redirect, mark task done, etc.
          console.log('Signature captured', result.signatureId);
        }}
      />
    </section>
  );
}

Elements envia primitivos combináveis ​​(Provedor, exibição de status/assinatura, captura de assinatura). Componha as primitivas acima ou incorpore o signatário hospedado por meio do URL da sessão de assinatura.

Quais alças incorporadas para você

📄

Renderização de documentos

PDF renderização, zoom, rolagem e navegação de página — entre navegadores, incluindo Safari móvel.

✍️

Captura de assinatura

Desenhe, digite ou carregue a assinatura. Experiência de captura consistente em vários dispositivos sem problemas de navegador.

🔐

Verificação de identidade A verificação

OTP é tratada dentro da incorporação. Nenhuma UI de autenticação separada é necessária em seu produto.

📋

Navegação de campo

Navegação guiada campo por campo com aplicação de campo obrigatório antes do envio ser permitido.

Perguntas comuns

Elementos incorporados — dentro do seu produto

A superfície de assinatura é renderizada em linha em seu domínio com sua marca. O quadro do seu produto, seu cabeçalho, sua navegação - EndorsedSign cuida da interação entre documentos e campos.

Lista de documentos do signatário no portal do cliente com status e ações preenchidos
Elementos incorporados renderizados em um produto SaaS fictício. A superfície de assinatura fica dentro do cromo do produto – sem redirecionamento, sem iframe, sem marca EndorsedSign visível.

Experimente Elements em seu próprio locatário sandbox

Solicite um sandbox por meio do início rápido, crie um token de sessão de assinatura de seu back-end e coloque as primitivas acima em qualquer aplicativo React 18+.

Execute o início rápidoVeja o caminho sem cabeça