Aller au contenu principal

Intégrer le Visualiseur de Documents Legalesign sur Votre Site Web

astuce

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

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

Ce composant plug and play 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 rendre et supporter des composants HTML, vous pouvez utiliser le Visualiseur de Documents. Si vous avez besoin d’aide supplémentaire pour intégrer le Visualiseur de Documents dans votre stack technique, veuillez contacter notre support. Vous pouvez utiliser ces widgets plus larges avec des intégrations API REST/GraphQL pour offrir des processus de signature de documents sans couture à 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 Basique​

HTML/JavaScript Vanilla​

La version HTML/Javascript de ce composant peut être utilisée avec n’importe quelle stack de développement, comme PHP, ASP .Net, etc. Vous pouvez référencer directement le 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-document-viewer-example].

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 le token pour le compte que vous souhaitez utiliser.

Intégration React​

Nous avons également généré 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. Pour plus de documentation sur la façon d’obtenir un jeton de manière sécurisée sans exposer vos identifiants, consultez les exemples dans le guide d’authentification.

token="eyJraWQiOiJBTkJIeT..."

templateid​

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

templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"

Modes du Widget​

Mode Éditeur​

Création et édition de modèle complète avec tous les outils disponibles. Ce mode est destiné aux flux de travail où un modèle hautement réutilisable avec 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 document a déjà rempli toutes les informations client), vous pouvez envisager le mode compose à la place.

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

Mode Compose​

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 :

  1. Votre application génère un PDF
  2. Le télécharge 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;
  1. Téléchargez le fichier PDF vers S3 en utilisant l’ID du modèle
  2. Intégrez le visualiseur en mode compose avec les détails des destinataires
  3. Votre utilisateur ajoute les 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 effectue automatiquement :

  • Détecte les destinataires pré-générés
  • Cache l’expéditeur dans le menu déroulant
  • Cache les options du document
  • Affiche par défaut les champs requis
  • Supprime l’expéditeur et les champs d’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 parcourir les pages.

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

Le mode compose effectue automatiquement :

  • Cache la barre d’outils
  • Cache les options du document
  • Cache la boîte à outils
  • Rend les participants et les 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 tubes. Si aucune valeur n’est fournie, la boîte à outils sera supposée non filtrée et toutes les options seront disponibles.

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

endpoint​

Votre point de terminaison API GraphQL, si un point de terminaison spécifique client vous a été attribué.

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 optionnellement le rôle et le phonenumber pour chaque destinataire. Ne pas préciser de rôle signifie que le destinataire sera traité comme un signataire distinct, pour changer cela vous pouvez passer role: "WITNESS" et inclure un index de signataire spécial pour indiquer quel est leur parent, ainsi, par exemple si vous souhaitez 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 changements :

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

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

Vous pouvez suivre si un modèle devient 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 en React​

Utiliser 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 en supprimant des champs. Fournit non seulement l’événement qui l’a déclenché mais aussi l’état à 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 le détail montre 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>

Dépannage

Si vous rencontrez des problèmes avec le composant, assurez-vous que :

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

Support Navigateur​

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​

Obtenir de l’Aide​

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

Export This Article

Save a copy of this page as PDF or plain text.