Πήγαινε στο κύριο περιεχόμενο

Ενσωμάτωση του Legalesign Document Viewer στον Ιστότοπό σας

συμβουλή

Μπορείτε να δείτε αυτό το στοιχείο σε δράση ως Quick Send στο Console.

Το Legalesign Document Viewer είναι ένα ανεξάρτητο πλατφόρμας web component που σας επιτρέπει να επεξεργάζεστε, να προεπισκοπείτε και να προσαρμόζετε πρότυπα για την υπογραφή εγγράφων. Κατασκευασμένο με StencilJS, λειτουργεί αρμονικά με vanilla JavaScript, React, Vue, Angular ή οποιοδήποτε web framework.

Αυτό το plug and play στοιχείο έχει σχεδιαστεί ώστε να μπορείτε να ενσωματώσετε βασικά μέρη της δημιουργίας εγγράφων στα εσωτερικά σας συστήματα, όπως ένα CRM ή μια εφαρμογή επιχειρησιακής γραμμής. Εφόσον το σύστημά σας μπορεί να αποδώσει και να υποστηρίξει HTML components, μπορείτε να χρησιμοποιήσετε το Document Viewer. Εάν χρειάζεστε πρόσθετη βοήθεια για την ενσωμάτωση του Document Viewer στο τεχνικό σας stack, παρακαλούμε επικοινωνήστε με το support desk μας. Μπορείτε να χρησιμοποιήσετε αυτά τα μεγαλύτερα widgets με ενσωματώσεις REST/GraphQL API για να παρέχετε αδιάλειπτες διαδικασίες υπογραφής εγγράφων για το προσωπικό και τους πελάτες σας.

Εγκατάσταση​

Εγκατάσταση μέσω NPM​

npm install legalesign-document-viewer

Για έργα React​

npm install legalesign-document-viewer-react

Βασική Ενσωμάτωση​

Vanilla HTML/JavaScript​

Η έκδοση HTML/JavaScript αυτού του στοιχείου μπορεί να χρησιμοποιηθεί με οποιοδήποτε development stack, όπως PHP, ASP .Net κ.ά. Μπορείτε να συνδεθείτε στο στοιχείο απευθείας από το npm αν το περιβάλλον σας δεν επιτρέπει την εγκατάσταση. Μπορείτε να δοκιμάσετε μια σελίδα παρουσίασης από το αποθετήριο παραδειγμάτων εδώ [https://github.com/legalesign/ls-viewer-demo].

Προσθέστε τα scripts του στοιχείου στο 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>

Θα χρειαστεί να χρησιμοποιήσετε κώδικα server-side για να πάρετε το YOUR_AUTH_TOKEN. Το token μπορεί να είναι SRP JWT ή ένα βραχύβιο component token που δημιουργείται με generateComponentToken. Δείτε Widget Authorization.

Ενσωμάτωση React​

Έχουμε επίσης δημιουργήσει μια έκδοση του στοιχείου που ενσωματώνεται απευθείας με πλαίσια React.

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

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

Απαιτούμενα Χαρακτηριστικά​

token​

Το token ασφαλείας σας για αυθεντικοποίηση. Αυτό επιβεβαιώνει την ταυτότητα και την πρόσβασή σας στο πρότυπο. Χρησιμοποιήστε κώδικα server-side για να παρέχετε είτε SRP JWT είτε βραχύβιο component token. Δείτε Widget Authorization για τη ροή ασφαλούς token.

token="eyJraWQiOiJBTkJIeT..."

templateid​

Το API ID του προτύπου που θέλετε να παρουσιάσετε στους χρήστες. Μπορείτε εύκολα να το βρείτε κοιτάζοντας τη διεύθυνση URL όταν επεξεργάζεστε το πρότυπο στην εφαρμογή Console.

templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"

Λειτουργίες Widget​

Λειτουργία Επεξεργασίας​

Πλήρως εξοπλισμένη δημιουργία και επεξεργασία προτύπων με όλα τα διαθέσιμα εργαλεία. Αυτό προορίζεται για ροές εργασίας όπου ένα ιδιαίτερα επαναχρησιμοποιήσιμο πρότυπο με ρόλους είναι χρήσιμο. Αν ο σκοπός σας είναι να χρησιμοποιήσετε το έγγραφο μόνο μία φορά (ίσως το σύστημα δημιουργίας εγγράφων σας έχει ήδη συμπληρώσει όλες τις πληροφορίες του πελάτη), τότε ίσως να θέλετε να εξετάσετε τη λειτουργία compose.

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

Λειτουργία Σύνθεσης​

Απλοποιημένη λειτουργία για γρήγορη προσθήκη πεδίων υπογραφής σε προ-δημιουργημένα πρότυπα. Ιδανική για ενσωματωμένους πελάτες όπου οι παραλήπτες έχουν ήδη οριστεί.

Η συνήθης ροή εργασίας είναι:

  1. Η εφαρμογή σας δημιουργεί ένα PDF
  2. Το ανεβάζει μέσω API για να δημιουργήσει ένα πρότυπο:
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. Ανεβάστε το αρχείο PDF στο S3 χρησιμοποιώντας το ID προτύπου
  2. Ενσωματώστε τον viewer σε λειτουργία compose με στοιχεία παραληπτών
  3. Ο χρήστης σας προσθέτει πεδία υπογραφής και αποστέλλει

Για περισσότερες πληροφορίες σχετικά με τους παραλήπτες, δείτε 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>

Η λειτουργία compose αυτόματα:

  • Εντοπίζει προ-δημιουργημένους παραλήπτες
  • Κρύβει τον αποστολέα από το dropdown
  • Κρύβει τις επιλογές εγγράφου
  • Εμφανίζει προεπιλεγμένα τα απαιτούμενα πεδία
  • Αφαιρεί από τον επεξεργαστή τον αποστολέα και τα πεδία αποστολέα
  • Προωθεί την γρήγορη επιλογή των απαιτούμενων πεδίων για κάθε παραλήπτη

Λειτουργία Προεπισκόπησης​

Μια βοηθητική προεπισκόπηση εγγράφου που εμφανίζει το έγγραφο με όλα τα τρέχοντα πεδία και επιτρέπει στον χρήστη να περιηγηθεί στις σελίδες.

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

Η λειτουργία compose αυτόματα:

  • Κρύβει τη γραμμή εργαλείων
  • Κρύβει τις επιλογές εγγράφου
  • Κρύβει το toolbox
  • Καθιστά τους συμμετέχοντες και τα πεδία μόνο για ανάγνωση

Προηγμένη Διαμόρφωση​

Φίλτρο Toolbox​

Περιορίστε τους διαθέσιμους τύπους πεδίων χρησιμοποιώντας τιμές διαχωρισμένες με pipe. Αν δεν δοθεί καμία τιμή, θεωρείται ότι το toolbox δεν είναι φιλτραρισμένο και όλες οι επιλογές είναι διαθέσιμες.

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

endpoint​

Το endpoint του GraphQL API σας, αν σας έχει δοθεί ένα πελατειακό endpoint.

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

Παραλήπτες​

Ορίστε τους παραλήπτες εγγράφων σε μορφή JSON. Σημειώστε ότι τα απαιτούμενα στοιχεία για ένα παραλήπτη είναι firstname, lastname, email και signerIndex· προαιρετικά μπορείτε επίσης να περάσετε το role και το phonenumber για κάθε παραλήπτη. Η παράλειψη ρόλου σημαίνει ότι ο παραλήπτης θα αντιμετωπιστεί ως ξεχωριστός υπογράφων, για να αλλάξετε αυτό μπορείτε να περάσετε role: "WITNESS" και να συμπεριλάβετε ένα ειδικό signer index που δείχνει ποιος είναι ο γονέας τους, οπότε για παράδειγμα αν θέλετε να συμπεριλάβετε έναν μάρτυρα για τον υπογράφοντα 2, εκείνος ο μάρτυρας θα έχει signerIndex 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>

Προσαρμοσμένα Κουμπιά με Slots​

Προσθέστε προσαρμοσμένα κουμπιά στη γραμμή εργαλείων χρησιμοποιώντας 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>

Χειρισμός Συμβάντων​

Ακούστε τα συμβάντα του στοιχείου για να παρακολουθείτε αλλαγές:

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

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

Μπορείτε να παρακολουθείτε αν ένα πρότυπο έχει γίνει έγκυρο ή άκυρο χρησιμοποιώντας το event validate.

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

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

Παράδειγμα Χειρισμού Συμβάντων σε React​

Η χρήση ενός event σε react έχει το πρόθεμα on<EventName>.

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

Τύποι Συμβάντων​

update event​

Εκτελείται όταν το πρότυπο εγγράφου αλλάζει, όπως η προσθήκη ή αφαίρεση πεδίων. Παρέχει όχι μόνο το συμβάν που το προκάλεσε αλλά και την ενημερωμένη κατάσταση του αντικειμένου προτύπου σε JSON.

validate event​

Εκτελείται όταν το πρότυπο εγγράφου αλλάζει, η ιδιότητα valid στο detail δείχνει αν το πρότυπο έχει γίνει έγκυρο ή άκυρο.

selectFields event​

Εκτελείται όταν ένα πεδίο επιλέγεται στον επεξεργαστή.

addParticipant event​

Εκτελείται όταν προστίθεται ρόλος συμμετέχοντα στο πρότυπο.

Πλήρες Παράδειγμα​

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

Επίλυση Προβλημάτων

Αν αντιμετωπίσετε προβλήματα με το στοιχείο, βεβαιωθείτε ότι:

  • μπορείτε να έχετε πρόσβαση ή έχετε εισάγει στη λευκή λίστα τον τομέα αποθήκευσης εγγράφων https://s3.amazonaws.com/*

Υποστήριξη Περιηγητών​

Το στοιχείο χρησιμοποιεί σύγχρονα πρότυπα web και υποστηρίζει:

  • Chrome/Edge (τελευταία έκδοση)
  • Firefox (τελευταία έκδοση)
  • Safari (τελευταία έκδοση)
  • Κινητούς περιηγητές (iOS Safari, Chrome Mobile)

Πόροι​

Λήψη Βοήθειας​

Για τεχνική υποστήριξη ή ερωτήσεις σχετικά με την ενσωμάτωση, επικοινωνήστε με την ομάδα υποστήριξης Legalesign ή επισκεφτείτε την API documentation.

Export This Article

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