Integrieren Sie den Legalesign Document Viewer in Ihre Website

Tipp

Sie können diese Komponente in Aktion als Quick Send in der Console sehen.

Der Legalesign Document Viewer ist eine plattformunabhängige Webkomponente, mit der Sie Vorlagen für die Dokumentenunterzeichnung bearbeiten, anzeigen und anpassen können. Entwickelt mit StencilJS funktioniert sie nahtlos mit Vanilla JavaScript, React, Vue, Angular oder jedem anderen Webframework.

Diese Plug-and-Play-Komponente ist so konzipiert, dass Sie wichtige Teile der Dokumentenerstellung in Ihre internen Systeme integrieren können, wie z. B. ein CRM oder eine Geschäftsanwendung. Solange Ihr System HTML-Komponenten rendern und unterstützen kann, können Sie den Document Viewer verwenden. Wenn Sie zusätzliche Hilfe bei der Integration des Document Viewer in Ihren technischen Stack benötigen, wenden Sie sich bitte an unseren Support. Sie können diese größeren Widgets mit REST/GraphQL-API-Integrationen verwenden, um nahtlose Dokumentenunterzeichnungsprozesse für Ihre Mitarbeiter und Kunden bereitzustellen.

Installation

NPM Installation

npm install legalesign-document-viewer

Für React-Projekte

npm install legalesign-document-viewer-react

Grundlegende Integration

Vanilla HTML/JavaScript

Die HTML/JavaScript-Version dieser Komponente kann mit jedem Entwicklungs-Stack verwendet werden, wie z. B. PHP, ASP .Net usw. Sie können direkt von npm auf die Komponente verlinken, wenn Ihre Umgebung keine Installation ermöglicht. Sie können eine Demonstrationsseite aus dem Beispiel-Repository hier ausprobieren: [https://github.com/legalesign/ls-document-viewer-example].

Fügen Sie die Komponenten-Skripte zu Ihrem HTML hinzu:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="node_modules/legalesign-document-viewer/dist/ls-document-viewer/ls-document-viewer.css" />
    <script type="module" src="node_modules/legalesign-document-viewer/dist/ls-document-viewer/ls-document-viewer.esm.js"></script>
    <script nomodule src="node_modules/legalesign-document-viewer/dist/ls-document-viewer/ls-document-viewer.js"></script>
  </head>
  <body>
    <ls-document-viewer
      id="my-editor"
      templateid="YOUR_TEMPLATE_ID"
      token="YOUR_AUTH_TOKEN"
    ></ls-document-viewer>
  </body>
</html>

Sie müssen serverseitigen Code verwenden, um das token für das Konto zu erhalten, das Sie verwenden möchten.

React Integration

Wir haben auch eine Version der Komponente erstellt, die direkt in React-Frameworks integriert werden kann.

import { LsDocumentViewer } from 'legalesign-document-viewer-react';

function App() {
  return (
    <LsDocumentViewer
      templateid="YOUR_TEMPLATE_ID"
      token="YOUR_AUTH_TOKEN"
      mode="compose"
    />
  );
}

Erforderliche Attribute

token

Ihr Sicherheitstoken zur Authentifizierung. Dies verifiziert Ihre Identität und den Zugriff auf die Vorlage. Weitere Dokumentation darüber, wie Sie sicher ein Token erhalten, ohne Ihre Zugangsdaten offenzulegen, finden Sie in den Beispielen im Authentifizierungsleitfaden.

token="eyJraWQiOiJBTkJIeT..."

templateid

Die API-ID der Vorlage, die Sie den Nutzern präsentieren möchten. Diese finden Sie ganz einfach, indem Sie in der URL nachsehen, wenn Sie die Vorlage in der Console-Anwendung bearbeiten.

templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"

Bearbeitungsmodus

Voll ausgestattetes Erstellen und Bearbeiten von Vorlagen mit allen verfügbaren Werkzeugen. Dies ist für Workflows gedacht, bei denen eine hochgradig wiederverwendbare Vorlage mit Rollen hilfreich ist. Wenn Sie das Dokument nur einmal verwenden möchten (vielleicht hat Ihr Dokumentengenerierungssystem bereits alle Kundendaten eingefügt), sollten Sie stattdessen den Compose-Modus in Betracht ziehen.

<ls-document-viewer mode="editor" ...></ls-document-viewer>

Compose-Modus

Ein schlanker Modus, um schnell Signaturfelder zu vorgefertigten Vorlagen hinzuzufügen. Ideal für integrierte Kunden, bei denen die Empfänger bereits definiert sind.

Der typische Ablauf ist:

Ihre Anwendung generiert ein PDF
Laden Sie es über die API hoch, um eine Vorlage zu erstellen:

const response = await fetch('https://graphql.uk.legalesign.com/graphql', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    query: `
      mutation CreateTemplate {
        createTemplate(input: {
          groupId: "${groupId}"
          title: "${documentTitle}"
        })
      }
    `
  })
});
const { data } = await response.json();
const templateId = data.createTemplate;

Laden Sie die PDF-Datei mithilfe der Vorlage-ID auf S3 hoch
Betten Sie den Viewer im Compose-Modus mit Empfängerdetails ein
Ihr Nutzer fügt Signaturfelder hinzu und sendet

Weitere Informationen zu Empfängern finden Sie unter Recipients.

<ls-document-viewer 
    mode="compose" 
    recipients='[
        {"email": "user@example.com", "firstname": "John", "lastname": "Doe", "signerIndex": 1},
        {"email": "user2@example.com", "firstname": "Jane", "lastname": "Smith", "signerIndex": 2}
    ]'
    ...></ls-document-viewer>

Der Compose-Modus:

Erkennt vorgefertigte Empfänger automatisch
Blendet den Absender im Dropdown-Menü aus
Blendet Dokumentoptionen aus
Zeigt Standardmäßig erforderliche Felder an
Entfernt Absender und Absenderfelder aus dem Editor
Erleichtert die schnelle Auswahl der erforderlichen Felder für jeden Empfänger

Vorschaumodus

Eine hilfreiche Dokumentenvorschau, die das Dokument mit allen aktuellen Feldern anzeigt und dem Nutzer das Blättern durch Seiten ermöglicht.

<ls-document-viewer mode="preview" ...></ls-document-viewer>

Der Compose-Modus:

Blendet die Werkzeugleiste aus
Blendet Dokumentoptionen aus
Blendet die Werkzeugbox aus
Macht Teilnehmer und Felder schreibgeschützt

Erweiterte Konfiguration

Werkzeugkasten filtern

Begrenzen Sie verfügbare Feldtypen mit pipe-getrennten Werten. Wenn kein Wert angegeben ist, wird angenommen, dass der Werkzeugkasten ungefiltert ist und alle Optionen zur Verfügung stehen.

<ls-document-viewer
  filtertoolbox="signature|initials|date|text"
  ...
></ls-document-viewer>

endpoint

Ihr GraphQL-API-Endpunkt, falls Sie einen klientenspezifischen Endpunkt erhalten haben.

endpoint="https://your-api.appsync-api.region.amazonaws.com/graphql"

Empfänger

Definieren Sie Dokumentempfänger im JSON-Format. Beachten Sie, dass die erforderlichen Elemente für einen Empfänger firstname, lastname, email und signerIndex sind; optional können Sie auch die Rolle und Telefonnummer für jeden Empfänger angeben. Wird keine Rolle angegeben, wird der Empfänger als eigenständiger Unterzeichner behandelt. Um dies zu ändern, können Sie role: "WITNESS" angeben und einen speziellen signerIndex einfügen, der zeigt, welcher Unterzeichner sein „Elternteil“ ist, sodass zum Beispiel ein Zeuge für Unterzeichner 2 den signerIndex 102 hätte.

<ls-document-viewer
  recipients='[
    {"email": "user@example.com", "firstname": "John", "lastname": "Doe", "signerIndex": 1},
    {"email": "user2@example.com", "firstname": "Jane", "lastname": "Smith", "signerIndex": 2}
    {"email": "user3@example.com", "firstname": "Joan", "lastname": "Mitchell", "signerIndex": 102, roleType: "WITNESS"}
  ]'
  ...
></ls-document-viewer>

Benutzerdefinierte Tasten mit Slots

Fügen Sie der Werkzeugleiste benutzerdefinierte Tasten mit Slots hinzu:

<ls-document-viewer ...>
  <style>
    .custom-button {
      padding: 2px 12px;
      border-radius: 1rem;
      background-color: #9df5d4;
      color: #125241;
      font-weight: 500;
    }
  </style>
  <span slot="left-button">
    <button class="custom-button">Cancel</button>
  </span>
  <span slot="right-button">
    <button class="custom-button">Send Document</button>
  </span>
</ls-document-viewer>

Ereignisbehandlung

Hören Sie auf Komponentenevents, um Änderungen zu verfolgen:

const editor = document.querySelector('ls-document-viewer');

editor.addEventListener('update', (event) => {
  console.log('Template changed:', event.detail);
});

Sie können verfolgen, ob eine Vorlage gültig oder ungültig geworden ist, mithilfe des validate-Events.

const editor = document.querySelector('ls-document-viewer');

editor.addEventListener('validate', (event) => {
  console.log('Template validation changed:', event.detail.valid);
});

Beispiel zur Ereignisbehandlung in React

Die Verwendung eines Events in React fügt das bekannte on<EventName>-Präfix hinzu.

<LsDocumentViewer
  onUpdate={(event) => {
    console.log('Template changed:', event.detail);
  }}
  ...
/>

Event-Typen

`update`-Event

Wird ausgelöst, wenn die Dokumentvorlage geändert wird, z. B. durch Hinzufügen oder Entfernen von Feldern. Liefert nicht nur das Ereignis, das es verursacht hat, sondern auch den aktualisierten Zustand des Vorlagenobjekts als JSON.

`validate`-Event

Wird ausgelöst, wenn die Dokumentvorlage geändert wird. Die Eigenschaft valid im Detail zeigt, ob die Vorlage gültig oder ungültig geworden ist.

`selectFields`-Event

Wird ausgelöst, wenn ein Feld im Editor ausgewählt wird.

`addParticipant`-Event

Wird ausgelöst, wenn eine Teilnehmerrolle der Vorlage hinzugefügt wird.

Komplette Beispiel

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document Editor</title>
    <link rel="stylesheet" href="https://unpkg.com/legalesign-document-viewer/ls-document-viewer.css" />
    <script type="module" src="https://unpkg.com/legalesign-document-viewer"></script>
  </head>
  <body style="padding: 0; margin: 0">
    <ls-document-viewer
      id="my-editor"
      templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"
      token="YOUR_TOKEN_HERE"
      mode="compose"
      recipients='[
        {"email": "signer@example.com", "firstname": "John", "lastname": "Doe", "signerIndex": 1}
      ]'
      filtertoolbox="signature|initials|date"
    >
      <span slot="left-button">
        <button onclick="handleCancel()">Cancel</button>
      </span>
      <span slot="right-button">
        <button onclick="handleSend()">Send</button>
      </span>
    </ls-document-viewer>

    <script>
      const editor = document.querySelector('ls-document-viewer');
      
      editor.addEventListener('update', (event) => {
        // shows the change event and the template details
        console.log('Document updated:', event.detail);
      });

      function handleCancel() {
        // Implement the cancel logic, e.g. go to a home page
        window.location.href = '/cancelpage';
      }

      function handleSend() {
        // Implement send logic if required.
        console.log('Sending document...');
      }
    </script>
  </body>
</html>

Fehlerbehebung

Wenn Sie Probleme mit der Komponente haben, stellen Sie sicher, dass:

Sie Zugriff auf die Dokumentenspeicher-Domain https://s3.amazonaws.com/* haben oder diese auf der Whitelist steht

Browser-Unterstützung

Die Komponente verwendet moderne Webstandards und unterstützt:

Chrome/Edge (neueste Version)
Firefox (neueste Version)
Safari (neueste Version)
Mobile Browser (iOS Safari, Chrome Mobile)

Ressourcen

GraphQL Integrationsleitfaden — wie man den Viewer mit der GraphQL-API für das Senden verbindet
GraphQL API Dokumentation
NPM Paket
React Paket
Support

Hilfe erhalten

Für technischen Support oder Integrationsfragen kontaktieren Sie das Legalesign-Supportteam oder besuchen Sie die API-Dokumentation.

Integrieren Sie den Legalesign Document Viewer in Ihre Website

Installation

NPM Installation

Für React-Projekte

Grundlegende Integration

Vanilla HTML/JavaScript

React Integration

Erforderliche Attribute

token

templateid

Widget-Modi

Bearbeitungsmodus

Compose-Modus

Vorschaumodus

Erweiterte Konfiguration

Werkzeugkasten filtern

endpoint

Empfänger

Benutzerdefinierte Tasten mit Slots

Ereignisbehandlung

Beispiel zur Ereignisbehandlung in React

Event-Typen

`update`-Event

`validate`-Event

`selectFields`-Event

`addParticipant`-Event

Komplette Beispiel

Fehlerbehebung

Browser-Unterstützung

Ressourcen

Hilfe erhalten

Export This Article

Installation​

NPM Installation​

Für React-Projekte​

Grundlegende Integration​

Vanilla HTML/JavaScript​

React Integration​

Erforderliche Attribute​

token​

templateid​

Widget-Modi​

Bearbeitungsmodus​

Compose-Modus​

Vorschaumodus​

Erweiterte Konfiguration​

Werkzeugkasten filtern​

endpoint​

Empfänger​

Benutzerdefinierte Tasten mit Slots​

Ereignisbehandlung​

Beispiel zur Ereignisbehandlung in React​

Event-Typen​

update-Event​

validate-Event​

selectFields-Event​

addParticipant-Event​

Komplette Beispiel​

Fehlerbehebung

Browser-Unterstützung​

Ressourcen​

Hilfe erhalten​

Export This Article

Installation

NPM Installation

Für React-Projekte

Grundlegende Integration

Vanilla HTML/JavaScript

React Integration

Erforderliche Attribute

token

templateid

Widget-Modi

Bearbeitungsmodus

Compose-Modus

Vorschaumodus

Erweiterte Konfiguration

Werkzeugkasten filtern

endpoint

Empfänger

Benutzerdefinierte Tasten mit Slots

Ereignisbehandlung

Beispiel zur Ereignisbehandlung in React

Event-Typen

`update`-Event

`validate`-Event

`selectFields`-Event

`addParticipant`-Event

Komplette Beispiel

Browser-Unterstützung

Ressourcen

Hilfe erhalten