Intégrez le Visualiseur de Documents Legalesign à Votre Site Web

astuce

Vous pouvez voir ce composant en action en tant que Quick Send dans Console.

Le Visualiseur de Documents Legalesign est un composant web indépendant de la plateforme qui vous permet d’éditer, prévisualiser et personnaliser des modèles pour la signature de documents. Construit avec StencilJS, il fonctionne parfaitement avec vanilla JavaScript, React, Vue, Angular ou tout autre framework web.

Ce composant prêt à l’emploi est conçu pour que vous puissiez intégrer les parties clés de la création de documents dans vos systèmes internes, tels qu’un CRM ou une application métier. Tant que votre système peut afficher et supporter les composants HTML, vous pouvez utiliser le Visualiseur de Documents. Si vous avez besoin d’aide supplémentaire pour intégrer le Visualiseur dans votre pile technique, veuillez contacter notre service d’assistance. Vous pouvez utiliser ces widgets plus grands avec des intégrations API REST/GraphQL pour offrir des processus de signature de documents fluides à votre personnel et à vos clients.

Installation

Installation NPM

npm install legalesign-document-viewer

Pour les projets React

npm install legalesign-document-viewer-react

Intégration de base

Vanilla HTML/JavaScript

La version HTML/JavaScript de ce composant peut être utilisée avec n’importe quelle pile de développement, comme PHP, ASP .Net, etc. Vous pouvez lier directement au composant depuis npm si votre environnement ne permet pas son installation. Vous pouvez essayer une page de démonstration depuis le dépôt d'exemples ici [https://github.com/legalesign/ls-viewer-demo].

Ajoutez les scripts du composant à votre HTML :

<!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>

Vous devrez utiliser du code côté serveur pour obtenir YOUR_AUTH_TOKEN. Le token peut être un JWT SRP ou un token de composant à courte durée généré avec generateComponentToken. Voir Widget Authorization.

Intégration React

Nous avons également créé une version du composant qui s’intègre directement avec les frameworks React.

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

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

Attributs requis

token

Votre jeton de sécurité pour l’authentification. Cela vérifie votre identité et l’accès au modèle. Utilisez du code côté serveur pour fournir soit un JWT SRP soit un token de composant à courte durée. Voir Widget Authorization pour le flux sécurisé des tokens.

token="eyJraWQiOiJBTkJIeT..."

templateid

L’ID API du modèle que vous souhaitez présenter aux utilisateurs. Vous pouvez facilement le trouver en regardant l'URL lorsque vous éditez le modèle dans l’application Console.

templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"

Mode Éditeur

Création et édition complète du modèle avec tous les outils disponibles. Ce mode est destiné aux flux de travail où un modèle hautement réutilisable avec des rôles est utile. Si votre intention est d’utiliser votre document une seule fois (peut-être que votre système de génération de documents a déjà rempli toutes les informations client), vous pouvez préférer utiliser le mode compose.

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

Mode Composer

Mode simplifié pour ajouter rapidement des zones de signature à des modèles pré-générés. Idéal pour les clients intégrés où les destinataires sont déjà définis.

Le flux de travail typique est :

Votre application génère un PDF
Téléversez-le via l’API pour créer un modèle :

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;

Téléversez le fichier PDF sur S3 en utilisant l’ID du modèle
Intégrez le visualiseur en mode compose avec les détails des destinataires
Votre utilisateur ajoute des champs de signature et envoie

Pour plus d’informations sur les destinataires, voir Destinataires.

<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>

Le mode compose automatiquement :

Détecte les destinataires pré-générés
Cache l'expéditeur dans la liste déroulante
Cache les options de document
Affiche par défaut les champs requis
Supprime l'expéditeur et les champs de l’expéditeur de l’éditeur
Favorise la sélection rapide des champs requis pour chaque destinataire

Mode Prévisualisation

Une prévisualisation utile du document qui montre le document avec tous les champs actuels et permet à l’utilisateur de naviguer entre les pages.

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

Le mode compose automatiquement :

Cache la barre d’outils
Cache les options de document
Cache la boîte à outils
Rend les participants et champs en lecture seule

Configuration avancée

Filtrer la boîte à outils

Restreignez les types de champs disponibles en utilisant des valeurs délimitées par des barres verticales. Si aucune valeur n’est fournie, la boîte à outils ne sera pas filtrée et toutes les options seront disponibles.

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

endpoint

Votre point d’accès API GraphQL, si un endpoint spécifique au client vous a été donné.

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

Destinataires

Définissez les destinataires du document au format JSON. Notez que les éléments requis pour un destinataire sont firstname, lastname, email et signerIndex ; vous pouvez également passer en option le rôle et le numéro de téléphone pour chaque destinataire. L’absence de rôle signifie que le destinataire sera traité comme un signataire distinct ; pour modifier cela, vous pouvez passer role: "WITNESS" et inclure un indice de signataire spécial pour indiquer à quel parent il appartient, ainsi par exemple, si vous voulez inclure un témoin pour le signataire 2, ce témoin aura un signerIndex de 102.

<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>

Boutons personnalisés avec slots

Ajoutez des boutons personnalisés à la barre d’outils en utilisant des slots :

<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>

Gestion des événements

Écoutez les événements du composant pour suivre les modifications :

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

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

Vous pouvez suivre si un modèle est devenu valide ou invalide en utilisant l'événement validate.

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

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

Exemple de gestion d’événements React

L’utilisation d’un événement en React le préfixe avec le familier on<EventName>.

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

Types d’événements

Événement `update`

Déclenché lorsque le modèle de document est modifié, par exemple en ajoutant ou supprimant des champs. Fournit non seulement l'événement qui l’a causé, mais aussi l’état mis à jour de l’objet modèle au format JSON.

Événement `validate`

Déclenché lorsque le modèle de document est modifié, la propriété valid dans detail indique si le modèle est devenu valide ou invalide.

Événement `selectFields`

Déclenché lorsqu’un champ est sélectionné dans l’éditeur.

Événement `addParticipant`

Déclenché lorsqu’un rôle de participant est ajouté au modèle.

Exemple complet

<!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>

Résolution des problèmes

Si vous rencontrez des problèmes avec le composant, vérifiez que :

vous pouvez accéder ou avez mis en liste blanche le domaine de stockage de documents à https://s3.amazonaws.com/*

Support des navigateurs

Le composant utilise des standards web modernes et supporte :

Chrome/Edge (dernière version)
Firefox (dernière version)
Safari (dernière version)
Navigateurs mobiles (iOS Safari, Chrome Mobile)

Ressources

Guide d’intégration GraphQL — comment connecter le visualiseur à l’API GraphQL pour l’envoi
Documentation API GraphQL
Package NPM
Package React
Support

Obtenir de l’aide

Pour un support technique ou des questions sur l’intégration, contactez l’équipe de support Legalesign ou visitez la documentation API.

Intégrez le Visualiseur de Documents Legalesign à Votre Site Web

Installation

Installation NPM

Pour les projets React

Intégration de base

Vanilla HTML/JavaScript

Intégration React

Attributs requis

token

templateid

Modes du widget

Mode Éditeur

Mode Composer

Mode Prévisualisation

Configuration avancée

Filtrer la boîte à outils

endpoint

Destinataires

Boutons personnalisés avec slots

Gestion des événements

Exemple de gestion d’événements React

Types d’événements

Événement `update`

Événement `validate`

Événement `selectFields`

Événement `addParticipant`

Exemple complet

Résolution des problèmes

Support des navigateurs

Ressources

Obtenir de l’aide

Export This Article

Installation​

Installation NPM​

Pour les projets React​

Intégration de base​

Vanilla HTML/JavaScript​

Intégration React​

Attributs requis​

token​

templateid​

Modes du widget​

Mode Éditeur​

Mode Composer​

Mode Prévisualisation​

Configuration avancée​

Filtrer la boîte à outils​

endpoint​

Destinataires​

Boutons personnalisés avec slots​

Gestion des événements​

Exemple de gestion d’événements React​

Types d’événements​

Événement update​

Événement validate​

Événement selectFields​

Événement addParticipant​

Exemple complet​

Résolution des problèmes

Support des navigateurs​

Ressources​

Obtenir de l’aide​

Export This Article

Installation

Installation NPM

Pour les projets React

Intégration de base

Vanilla HTML/JavaScript

Intégration React

Attributs requis

token

templateid

Modes du widget

Mode Éditeur

Mode Composer

Mode Prévisualisation

Configuration avancée

Filtrer la boîte à outils

endpoint

Destinataires

Boutons personnalisés avec slots

Gestion des événements

Exemple de gestion d’événements React

Types d’événements

Événement `update`

Événement `validate`

Événement `selectFields`

Événement `addParticipant`

Exemple complet

Support des navigateurs

Ressources

Obtenir de l’aide