Ενσωματώστε το Legalesign Document Viewer στην Ιστοσελίδα σας

συμβουλή

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

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

Αυτό το plug and play συστατικό έχει σχεδιαστεί ώστε να μπορείτε να ενσωματώσετε βασικά μέρη της δημιουργίας εγγράφων μέσα στα εσωτερικά σας συστήματα, όπως ένα CRM ή μια εφαρμογή line of business. Όσο το σύστημά σας μπορεί να αποδώσει και να υποστηρίξει HTML components, μπορείτε να χρησιμοποιήσετε το Document Viewer. Αν χρειάζεστε επιπλέον βοήθεια για την ενσωμάτωση του Document Viewer στο τεχνικό σας stack, παρακαλούμε επικοινωνήστε με το τμήμα υποστήριξής μας. Μπορείτε να χρησιμοποιήσετε αυτά τα μεγαλύτερα 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 αν το περιβάλλον σας δεν επιτρέπει την εγκατάσταση. Μπορείτε να δοκιμάσετε μια σελίδα επίδειξης από το παράδειγμα repository εδώ [https://github.com/legalesign/ls-document-viewer-example].

Προσθέστε τα 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 για να πάρετε το token για τον λογαριασμό που θέλετε να χρησιμοποιήσετε.

Ενσωμάτωση React

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

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

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

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

token

Το security token για την πιστοποίησή σας. Αυτό επαληθεύει την ταυτότητα και την πρόσβαση στο πρότυπο. Δείτε περισσότερη τεκμηρίωση σχετικά με το πώς να πάρετε με ασφάλεια ένα token χωρίς να εκθέσετε τα διαπιστευτήριά σας, δείτε τα παραδείγματα στο authentication guide

token="eyJraWQiOiJBTkJIeT..."

templateid

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

templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"

Editor Mode

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

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

Compose Mode

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

Η τυπική ροή εργασίας είναι:

Η εφαρμογή σας δημιουργεί ένα PDF
Το ανεβάζει μέσω του 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;

Ανεβάστε το αρχείο PDF στο S3 χρησιμοποιώντας το template ID
Ενσωματώστε τον viewer σε compose mode με στοιχεία παραληπτών
Ο χρήστης σας προσθέτει πεδία υπογραφής και στέλνει

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

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

Preview Mode

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

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

Ο compose mode αυτόματα:

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

Προηγμένη Ρύθμιση

Filter Toolbox

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

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

endpoint

Το GraphQL API endpoint σας, αν σας έχει δοθεί συγκεκριμένο endpoint πελάτη.

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

Recipients

Ορίστε τους παραλήπτες του εγγράφου σε μορφή JSON. Σημειώστε ότι τα απαιτούμενα στοιχεία για ένα παραλήπτη είναι το firstname, lastname, email και signerIndex· προαιρετικά μπορείτε επίσης να περάσετε το ρόλο και τον αριθμό τηλεφώνου για κάθε παραλήπτη. Η παράλειψη του ρόλου σημαίνει ότι ο παραλήπτης θα θεωρείται ως ξεχωριστός υπογράφων, για να αλλάξετε αυτό μπορείτε να περάσετε 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);
});

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

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

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

Παράδειγμα Διαχείρισης Γεγονότων σε React

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

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

Τύποι Γεγονότων

Γεγονός `update`

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

Γεγονός `validate`

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

Γεγονός `selectFields`

Εκτελείται όταν έχει επιλεγεί ένα πεδίο στον editor.

Γεγονός `addParticipant`

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

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

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

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

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

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

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

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

Chrome/Edge (τελευταία έκδοση)
Firefox (τελευταία έκδοση)
Safari (τελευταία έκδοση)
Mobile browsers (iOS Safari, Chrome Mobile)

Πόροι

GraphQL Integration Guide — πώς να συνδέσετε τον viewer με το GraphQL API για αποστολή
GraphQL API Documentation
NPM Package
React Package
Support

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

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

Ενσωματώστε το Legalesign Document Viewer στην Ιστοσελίδα σας

Εγκατάσταση

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

Για Έργα React

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

Vanilla HTML/JavaScript

Ενσωμάτωση React

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

token

templateid

Τρόποι Widget

Editor Mode

Compose Mode

Preview Mode

Προηγμένη Ρύθμιση

Filter Toolbox

endpoint

Recipients

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

Διαχείριση Γεγονότων

Παράδειγμα Διαχείρισης Γεγονότων σε React

Τύποι Γεγονότων

Γεγονός `update`

Γεγονός `validate`

Γεγονός `selectFields`

Γεγονός `addParticipant`

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

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

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

Πόροι

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

Export This Article

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

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

Για Έργα React​

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

Vanilla HTML/JavaScript​

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

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

token​

templateid​

Τρόποι Widget​

Editor Mode​

Compose Mode​

Preview Mode​

Προηγμένη Ρύθμιση​

Filter Toolbox​

endpoint​

Recipients​

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

Διαχείριση Γεγονότων​

Παράδειγμα Διαχείρισης Γεγονότων σε React​

Τύποι Γεγονότων​

Γεγονός update​

Γεγονός validate​

Γεγονός selectFields​

Γεγονός addParticipant​

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

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

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

Πόροι​

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

Export This Article

Εγκατάσταση

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

Για Έργα React

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

Vanilla HTML/JavaScript

Ενσωμάτωση React

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

token

templateid

Τρόποι Widget

Editor Mode

Compose Mode

Preview Mode

Προηγμένη Ρύθμιση

Filter Toolbox

endpoint

Recipients

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

Διαχείριση Γεγονότων

Παράδειγμα Διαχείρισης Γεγονότων σε React

Τύποι Γεγονότων

Γεγονός `update`

Γεγονός `validate`

Γεγονός `selectFields`

Γεγονός `addParticipant`

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

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

Πόροι

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