Ενσωματώστε το Legalesign Document Viewer στον Ιστότοπό σας

Συμβουλή

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

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

Αυτό το plug and play συστατικό έχει σχεδιαστεί ώστε να μπορείτε να ενσωματώσετε βασικά μέρη της δημιουργίας εγγράφου στα εσωτερικά σας συστήματα, όπως σε CRM ή εφαρμογή επιχειρησιακής γραμμής.

Όσο το σύστημά σας μπορεί να αποδώσει και να υποστηρίξει HTML συστατικά, μπορείτε να χρησιμοποιήσετε το Document Viewer.

Εάν χρειάζεστε επιπλέον βοήθεια για την ενσωμάτωση του Document Viewer στην τεχνική σας στοίβα, παρακαλούμε επικοινωνήστε με το τμήμα υποστήριξής μας.

Μπορείτε να χρησιμοποιήσετε αυτά τα μεγαλύτερα widgets με ενσωματώσεις REST/GraphQL API για να παρέχετε απρόσκοπτες διαδικασίες υπογραφής εγγράφων για το προσωπικό και τους πελάτες σας.

Εγκατάσταση

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

npm install legalesign-document-viewer
# or
pnpm add legalesign-document-viewer

Για Έργα React

npm install legalesign-document-viewer-react
# or
pnpm add legalesign-document-viewer-react

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

HTML/JavaScript

Η έκδοση αυτού του συστατικού για HTML/Javascript μπορεί να χρησιμοποιηθεί με οποιαδήποτε στοίβα ανάπτυξης, όπως 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>

Ταυτοποίηση - Λήψη token

Θα χρειαστεί να χρησιμοποιήσετε κώδικα server-side για να λάβετε το YOUR_AUTH_TOKEN. Υπάρχουν τρεις επιλογές:

SRP JWT απευθείας — Αν το backend σας χρησιμοποιεί ήδη την ταυτοποίηση SRP, περάστε το JWT access token απευθείας στο widget.
GraphQL generateComponentToken — Καλέστε τη μετάλλαξη με το API κλειδί σας ή SRP JWT για να δημιουργήσετε ένα βραχυχρόνιο, περιορισμένο token συστατικού.
REST API — Καλέστε το GET /templatepdf/{pdfId}/component-token/ με το API κλειδί σας.

Επιλογή 2 (GraphQL):

const response = await fetch('https://graphql.uk.legalesign.com/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Authorization: `Bearer ${process.env.LEGALESIGN_API_KEY}`,
  },
  body: JSON.stringify({
    query: `mutation {
      generateComponentToken(input: { component: LS_DOCUMENT_VIEWER }) {
        token
        expiresIn
        expiresAt
      }
    }`,
  }),
});

const { data } = await response.json();
const token = data.generateComponentToken.token;

Επιλογή 3 (REST):

const response = await fetch(
  `https://eu-api.legalesign.com/api/v1/templatepdf/${pdfId}/component-token/`,
  {
    headers: {
      Authorization: `Bearer ${process.env.LEGALESIGN_API_KEY}`,
    },
  }
);

const { token } = await response.json();

Περάστε το επιστρεφόμενο token (ή το SRP JWT σας) στο widget. Δείτε Widget Authorization για περισσότερες λεπτομέρειες σχετικά με τις επιλογές 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

Το token ασφαλείας σας για ταυτοποίηση. Αυτό μπορεί να είναι είτε ένα SRP JWT access token είτε ένα βραχυχρόνιο token συστατικού από το generateComponentToken. Δείτε Widget Authorization για τη ροή ασφαλούς token.

token="eyJraWQiOiJBTkJIeT..."

templateid

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

templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"

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

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

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

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

Αυτή η λειτουργία είναι μια μέθοδος 'recipient-first' για να απλοποιήσει την εμπειρία χρήστη. Στην Web App της Legalesign αυτή είναι η λειτουργία 'Quick send'.

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

Η συνηθισμένη ροή εργασίας είναι να κλωνοποιήσετε ή να ανεβάσετε ένα PDF, στη συνέχεια να ενσωματώσετε τον viewer όπου ο χρήστης μπορεί να προσθέσει υπογραφές και πεδία φόρμας, και τελικά να προσφέρει ένα κουμπί για να στείλει το έγγραφο.

Κλώνος

Κλωνοποιήστε ένα υπάρχον πρότυπο χρησιμοποιώντας την μετάλλαξη copyTemplate:

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 CopyTemplate {
        copyTemplate(input: {
          groupId: "yourGroupId",
          templateId: "yourTemplateId",
          newTitle: "new document title",
          copyFields: true|false
        })
      }
    `
  })
});
const { data } = await response.json();
const templateId = data.copyTemplate;

Ή Ανεβάστε

Δημιουργήστε ένα πρότυπο και στη συνέχεια ανεβάστε το στο uploadUrl που παρέχεται. Χρησιμοποιήστε τίτλο [deleted] εάν δεν θέλετε το pdf στη βιβλιοθήκη σας. Θα διαγραφεί μέσα στις επόμενες 24 ώρες. Διαφορετικά χρησιμοποιήστε οποιονδήποτε τίτλο επιθυμείτε:

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: "yourGroupid", title: "[deleted]"}) {
          id
          uploadUrl
  }
}
    `
  })
});
const { data } = await response.json();
const templateId = data.createTemplate.id;
const uploadUrl = data.createTemplate.uploadUrl;

Τώρα κάντε PUT το αρχείο σας στο uploadUrl. Ο τύπος περιεχομένου πρέπει να είναι application/pdf.

Ενσωματώστε τον viewer

Το κύριο χαρακτηριστικό είναι το 'recipients'. Θα χρειαστείτε επιπλέον λεπτομέρειες για τους εγκρίνοντες ή μάρτυρες - για περισσότερες πληροφορίες δείτε 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>

Η λειτουργία προεπισκόπησης αυτομάτως:

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

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

Φιλτράρισμα Toolbox

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

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

Διαθέσιμες τιμές φίλτρου:

Τιμή	Περιγραφή
`signature`	Πεδίο υπογραφής (μόνο για υπογράφοντα)
`auto sign`	Πεδίο αυτόματης υπογραφής (μόνο για αποστολέα)
`text`	Ελεύθερη εισαγωγή κειμένου
`signing date`	Ημερομηνία που συμπληρώνεται αυτόματα κατά την υπογραφή (μόνο για υπογράφοντα)
`date`	Πεδίο επιλογής ημερομηνίας
`email`	Εισαγωγή email
`initials`	Πεδίο αρχικών
`number`	Αριθμητική εισαγωγή
`dropdown`	Επιλογή από dropdown
`checkbox`	Checkbox
`regex`	Εισαγωγή με έλεγχο regex (μόνο για υπογράφοντα)
`image`	Ανέβασμα εικόνας (μόνο για υπογράφοντα)
`file`	Ανέβασμα αρχείου (μόνο για υπογράφοντα)
`drawn`	Πεδίο σχεδίου/χειρόγραφου (μόνο για υπογράφοντα)

Παραλήπτες

Ορίστε τους παραλήπτες εγγράφων σε μορφή JSON.

Τα απαιτούμενα στοιχεία για κάθε παραλήπτη είναι firstname, lastname, email και signerIndex.

Προαιρετικά μπορείτε να περάσετε το ρόλο και τον αριθμό τηλεφώνου για κάθε παραλήπτη. Η παράλειψη ενός ρόλου σημαίνει ότι ο παραλήπτης θα θεωρείται υπογράφων.

Μπορείτε να περάσετε ρόλο "WITNESS" ή "APPROVER". Για τον ρόλο "WITNESS", προσθέστε 100 στον signerIndex αριθμό του υπογράφοντά τους. Για παράδειγμα, αν χρειάζεστε μάρτυρα για τον υπογράφοντα 2 (signerIndex: 2), ο WITNESS θα έχει 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`

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

Γεγονός `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>

Μπορείτε να χρησιμοποιήσετε τη μετάλλαξη send του GraphQL client-side αν χρησιμοποιείτε το SRP JWT token, αλλά σε αντίθετη περίπτωση server-side με το API Key σας είτε με το GraphQL είτε με το REST interface.

Μετάλλαξη Send — αποστολή ενός εγγράφου
Δομή Input Send — πλήρης αναφορά εισόδου
REST Αποστολή - αναφορά αποστολής εγγράφου REST

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

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

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

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

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

Chrome/Edge (τελευταίες εκδόσεις)
Firefox (τελευταίες εκδόσεις)
Safari (τελευταίες εκδόσεις)
Mobile browsers (iOS Safari, Chrome Mobile)

Πόροι

Οδηγός Ενσωμάτωσης GraphQL — πώς να συνδέσετε τον viewer με το GraphQL API για αποστολή
Τεκμηρίωση GraphQL API
Πακέτο NPM
Πακέτο React
Υποστήριξη

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

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

Ενσωματώστε το Legalesign Document Viewer στον Ιστότοπό σας

Εγκατάσταση

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

Για Έργα React

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

HTML/JavaScript

Ταυτοποίηση - Λήψη token

Ενσωμάτωση React

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

token

templateid

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

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

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

Κλώνος

Ή Ανεβάστε

Ενσωματώστε τον viewer

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

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

Φιλτράρισμα Toolbox

Παραλήπτες

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

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

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

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

Γεγονός `update`

Γεγονός `validate`

Γεγονός `selectFields`

Γεγονός `addParticipant`

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

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

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

Πόροι

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

Export This Article

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

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

Για Έργα React​

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

HTML/JavaScript​

Ταυτοποίηση - Λήψη token​

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

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

token​

templateid​

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

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

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

Κλώνος​

Ή Ανεβάστε​

Ενσωματώστε τον viewer​

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

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

Φιλτράρισμα Toolbox​

Παραλήπτες​

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

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

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

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

Γεγονός update​

Γεγονός validate​

Γεγονός selectFields​

Γεγονός addParticipant​

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

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

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

Πόροι​

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

Export This Article

Εγκατάσταση

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

Για Έργα React

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

HTML/JavaScript

Ταυτοποίηση - Λήψη token

Ενσωμάτωση React

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

token

templateid

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

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

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

Κλώνος

Ή Ανεβάστε

Ενσωματώστε τον viewer

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

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

Φιλτράρισμα Toolbox

Παραλήπτες

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

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

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

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

Γεγονός `update`

Γεγονός `validate`

Γεγονός `selectFields`

Γεγονός `addParticipant`

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

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

Πόροι

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