Vue

InstalaciónCopiar link al encabezado

npm install @digitogroup/embed-vue

Firma con el token de destinatarioCopiar link al encabezado

<script setup lang="ts">
  import { EmbedSignDocument } from '@digitogroup/embed-vue';

  const props = defineProps<{ token: string }>();

  function onCompleted(data: { documentId: number }) {
    console.log('Documento del evento:', data.documentId);
  }
</script>

<template>
  <EmbedSignDocument host="https://business.digito.do" :token="props.token" @document-completed="onCompleted" />
</template>

Autenticación y resultadoCopiar link al encabezado

El firmante se autentica de nuevo con Digito ID antes de cada acción de firma. Una sesión abierta en Business, una clave de API, un token de destinatario o un token presign no sustituye esta autenticación.

Obtén el token del destinatario desde tu servidor después de comprobar su acceso al sobre. Conserva la clave de API en el servidor. El componente recibe solo el token del destinatario autorizado.

Un callback del embed permite actualizar la interfaz; tu servidor debe consultar el sobre y su destinatario para confirmar el resultado. Los eventos pueden repetirse; evita actualizar el proceso dos veces.

PersonalizaciónCopiar link al encabezado

<script setup lang="ts">
  import { EmbedSignDocument } from '@digitogroup/embed-vue';

  const token = 'token_de_destinatario_ejemplo';

  const customCss = `
  .embed--Root {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
`;

  const cssVars = {
    primary: '#0000FF',
    background: '#F5F5F5',
    radius: '8px',
  };
</script>

<template>
  <EmbedSignDocument
    host="https://business.digito.do"
    :token="token"
    :css="customCss"
    :cssVars="cssVars"
    :darkModeDisabled="true"
  />
</template>

Consulta apariencia del embed para conocer las variables admitidas. css, cssVars y los controles de apariencia dependen de la configuración habilitada para tu integración.

Continúa con el embedCopiar link al encabezado

• Embed de firma: flujo, propiedades y callbacks.
• Apariencia del embed: CSS, variables y modos de color.
• Embed del editor: creación y edición con EmbedCreateEnvelope y EmbedUpdateEnvelope.