Ενσωματώστε τον Υπογράφοντα Legalesign στον Ιστότοπό σας

Ενεργοποίηση για την ομάδα σας

Το συστατικό Υπογράφων απαιτεί ενεργοποίηση. Επικοινωνήστε με την υποστήριξη για να το ενεργοποιήσετε για την ομάδα σας.

Ο Υπογράφων Legalesign είναι ένα πλατφορμοανεξάρτητο web συστατικό που παρέχει μια ολοκληρωμένη και ομαλή εμπειρία υπογραφής εγγράφων μέσα από τη δική σας εφαρμογή. Λειτουργεί με απλό HTML, React, Vue, Angular ή οποιοδήποτε web framework.

Ενσωματώστε αυτό το συστατικό όπου οι χρήστες σας χρειάζεται να υπογράψουν έγγραφα — μέσα σε CRM, portal πελατών ή οποιαδήποτε εσωτερική εφαρμογή που αποδίδει HTML.

Εγκατάσταση

Φορτώστε απευθείας από το CDN (δεν απαιτείται εγκατάσταση):

<script type="module" src="https://cdn.legalesign.io/signer/latest/ls-signer.esm.js"></script>

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

Εγκαταστήστε μέσω διαχειριστή πακέτων:

npm install legalesign-signer
# or
pnpm add legalesign-signer

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

HTML & JavaScript

<ls-signer
  recipient-id="abc123"
  private-key="key"
  session-id="session"
></ls-signer>

<script>
  const signer = document.querySelector('ls-signer');
  signer.addEventListener('signingSuccess', (e) => console.log('Signed:', e.detail.eventType, e.detail.documentId));
  signer.addEventListener('signingFail', (e) => console.error('Failed:', e.detail.failureReason, e.detail.error));
  signer.addEventListener('fieldChange', (e) => console.log('Field event:', e.detail.eventType));
</script>

React

import { useEffect, useState } from 'react';
import { LsSigner } from 'legalesign-signer/react';
import 'legalesign-signer/react.css';

function SigningPage() {
  const [signerData, setSignerData] = useState(null);

  useEffect(() => {
    fetch('/your-backend/to-get-token')
      .then(res => res.json())
      .then(setSignerData);
  }, []);

  if (!signerData) return <p>Loading...</p>;

  return (
    <LsSigner
      recipientId={signerData.recipientId}
      privateKey={signerData.token}
      sessionId={signerData.sessionId}
      onSuccess={({ eventType, documentId }) => console.log(eventType, documentId)}
      onFail={({ eventType, failureReason, error }) => console.error(eventType, failureReason, error)}
      onChange={({ eventType, uuid, saved, field, document }) => console.log('Event:', eventType)}
    />
  );
}

Το React απαιτεί react και react-dom (έκδοση 18 ή 19) ως peer dependencies.

Vue

<template>
  <ls-signer
    ref="signer"
    :recipient-id="recipientId"
    :private-key="privateKey"
    :session-id="sessionId"
  />
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const signer = ref(null);

function handleSuccess(e) {
  console.log('Signed:', e.detail);
}
function handleFail(e) {
  console.error('Failed:', e.detail);
}

onMounted(() => {
  signer.value.addEventListener('signingSuccess', handleSuccess);
  signer.value.addEventListener('signingFail', handleFail);
});

onBeforeUnmount(() => {
  signer.value?.removeEventListener('signingSuccess', handleSuccess);
  signer.value?.removeEventListener('signingFail', handleFail);
});
</script>

Συμβουλή

Αν χρησιμοποιείτε Vue με Vite, προσθέστε isCustomElement: (tag) => tag.startsWith('ls-') στη ρύθμιση του Vue plugin για να καταστείλετε τις προειδοποιήσεις σχετικά με άγνωστα στοιχεία.

Προειδοποίηση

Το Vue 3 μετατρέπει σε πεζά τα ονόματα συμβάντων σε προσαρμοσμένα στοιχεία, επομένως το @signingSuccess δεν θα λειτουργήσει. Χρησιμοποιήστε addEventListener στο ref του στοιχείου όπως φαίνεται παραπάνω.

Nuxt 3

Εγκλωβίστε το <ls-signer> μέσα σε <ClientOnly> για να αποφύγετε σφάλματα SSR. Προσθέστε τη ρύθμιση του προσαρμοσμένου στοιχείου στο nuxt.config.ts:

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith('ls-'),
    },
  },
});

Πιστοποίηση

Το συστατικό υπογράφοντος απαιτεί ένα βραχυπρόθεσμο token από το backend σας. Υπάρχουν δύο επιλογές:

1. GraphQL generateComponentToken — Κλήση με component: LS_SIGNER και είτε recipientId είτε sessionId στο scope του υπογράφοντα (δώστε μόνο το ένα, όχι και τα δύο).
2. REST API — Κλήση GET /signer/{signerId}/component-token/ με το API key σας.

Και οι δύο επιστρέφουν το token και το sessionId που χρειάζεται το συστατικό. Δείτε Έγκριση Widget για τη λεπτομερή ροή token από διακομιστή.

Επιλογή 1: GraphQL (Node.js)

Χρήση recipientId (η πιο συνηθισμένη – χρησιμοποιήστε όταν γνωρίζετε τον παραλήπτη αλλά δεν έχετε ακόμη συνεδρία):

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 MintSignerToken($input: GenerateComponentTokenInput!) {
      generateComponentToken(input: $input) {
        token
        tokenType
        sessionId
        expiresIn
        expiresAt
      }
    }`,
    variables: {
      input: {
        component: 'LS_SIGNER',
        signer: { recipientId: '<recipient-id>' }
      }
    }
  })
});

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

Εναλλακτικά, αν ήδη έχετε sessionId από προηγούμενη κλήση:

variables: {
  input: {
    component: 'LS_SIGNER',
    signer: { sessionId: '<session-id>' }
  }
}

Επιλογή 2: REST API

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

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

Δώστε το token ως private-key και το sessionId ως session-id στο συστατικό.

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

Χαρακτηριστικό	Τύπος	Περιγραφή
recipient-id	string	Αναγνωριστικό παραλήπτη (base64, πρόθεμα rec ή UUID)
private-key	string	Token που επιστρέφεται από το generateComponentToken
session-id	string	Αναγνωριστικό συνεδρίας που επιστρέφεται από το generateComponentToken

Προαιρετικά Χαρακτηριστικά

Χαρακτηριστικό	Τύπος	Προεπιλογή	Περιγραφή
colour	string	blue	Όνομα χρώματος θέματος (δείτε Θεματισμός)
style	string	``	Τροποποιήσεις στυλ (δείτε Προσαρμοσμένο CSS)
branding	boolean	true	Αφαίρεση branding Legalesign
language	string	—	Καταναγκαστική χρήση συγκεκριμένης γλώσσας και απόκρυψη επιλογέα γλώσσας (δείτε Διεθνοποίηση)

Συμβάντα

Web component συμβάν	React prop	eventType	Πότε
signingSuccess	onSuccess	"success"	Το έγγραφο υπογράφτηκε με επιτυχία
signingFail	onFail	"failure"	Η υπογραφή απέτυχε, απορρίφθηκε, έληξε, ακυρώθηκε, διαγράφηκε ή αφαιρέθηκε
fieldChange	onChange	"ready"	Το έγγραφο και οι εικόνες φορτώθηκαν πλήρως
fieldChange	onChange	"save"	Μια τιμή πεδίου αποθηκεύτηκε
fieldChange	onChange	"select"	Ένα πεδίο επιλέχθηκε ή πήρε εστίαση

signingSuccess / onSuccess

{
  eventType: 'success';
  documentId: string;
  recipientId: string;
}

signingFail / onFail

{
  eventType: 'failure';
  failureReason: FailureReason;
  error: string;
  documentId?: string;
  recipientId: string;
}

failureReason	Αιτία
documentExpired	Το έγγραφο έχει λήξει ή η ημερομηνία λήξης είναι στο παρελθόν
sessionExpired	Το API επέστρεψε 401 ή 403
cancelled	Η κατάσταση εγγράφου είναι "cancelled"
deleted	Το έγγραφο έχει διαγραφεί
rejected	Ο παραλήπτης απέρριψε το έγγραφο
removed	Το API επέστρεψε 404
signingError	Οποιοδήποτε άλλο σφάλμα κατά το φόρτωμα ή την υπογραφή

fieldChange / onChange

και τα τρία eventType μοιράζονται το ίδιο συμβάν. Χρησιμοποιήστε το eventType για να διαφοροποιήσετε:

// eventType: 'ready' — document fully loaded
{ eventType: 'ready'; document: { documentId, name, state, recipientId, pageCount, expires?, isApprover, isWitness, canReassign, doOfferReject } }

// eventType: 'save' — field value saved
{ eventType: 'save'; uuid: string; saved: boolean; field: Record<string, any> }

// eventType: 'select' — field selected or focused
{ eventType: 'select'; uuid: string; field: Record<string, any> }

React Props

Το React component χρησιμοποιεί camelCase props και callback props αντί για DOM events:

Prop	Τύπος	Απαραίτητο	Περιγραφή
recipientId	string	✅	Αναγνωριστικό παραλήπτη
privateKey	string	✅	Ιδιωτικό κλειδί από το mutation generateComponentToken
sessionId	string	✅	Αναγνωριστικό συνεδρίας
colour	LsSignerColour	❌	Χρώμα θέματος
branding	boolean	❌	Εμφάνιση branding Legalesign. Από προεπιλογή true.
language	string	❌	Καταναγκαστική χρήση συγκεκριμένης γλώσσας (δείτε Διεθνοποίηση)
onSuccess	(data: { eventType: 'success'; documentId: string; recipientId: string }) => void	❌	Καλείται σε επιτυχή υπογραφή
onFail	(data: { eventType: 'failure'; failureReason: FailureReason; error: string; documentId?: string; recipientId: string }) => void	❌	Καλείται σε αποτυχία υπογραφής
onChange	(data: { eventType: 'ready' | 'save' | 'select'; document?: DocumentSummary; uuid?: string; saved?: boolean; field?: Record<string, any> }) => void	❌	Καλείται σε γεγονότα πεδίων και σε φόρτωση εγγράφου

Γενικός χειριστής (για debugging & πρωτοτυποποίηση)

Καθώς κάθε συμβάν περιλαμβάνει eventType, μπορείτε να συνδέσετε μια ενιαία λειτουργία σε όλα τα συμβάντα:

React:

const handleSignerEvent = (e) => {
  switch (e.eventType) {
    case 'success': console.log('Signed:', e.documentId); break;
    case 'failure': console.log('Failed:', e.failureReason, e.error); break;
    case 'ready':   console.log('Ready:', e.document?.name); break;
    case 'save':    console.log('Saved field:', e.uuid, e.saved); break;
    case 'select':  console.log('Selected field:', e.uuid); break;
  }
};

<LsSigner
  onSuccess={handleSignerEvent}
  onFail={handleSignerEvent}
  onChange={handleSignerEvent}
/>

Web component:

const handleSignerEvent = (e) => {
  switch (e.detail.eventType) {
    case 'success': console.log('Signed:', e.detail.documentId); break;
    case 'failure': console.log('Failed:', e.detail.failureReason, e.detail.error); break;
    case 'ready':   console.log('Ready:', e.detail.document?.name); break;
    case 'save':    console.log('Saved field:', e.detail.uuid, e.detail.saved); break;
    case 'select':  console.log('Selected field:', e.detail.uuid); break;
  }
};

signer.addEventListener('signingSuccess', handleSignerEvent);
signer.addEventListener('signingFail', handleSignerEvent);
signer.addEventListener('fieldChange', handleSignerEvent);

Θεματισμός

Ορίστε χρωματικό θέμα με το prop colour. Όλες οι αποχρώσεις παράγονται αυτόματα.

Διαθέσιμα Χρώματα

pink · blue · purple · indigo · teal · green · lightblue · burnt · aubergine · red · yellow · cyan · lime · trueGreen

Παραλείψτε το prop για το προεπιλεγμένο μπλε.

<ls-signer colour="pink" ...></ls-signer>

<LsSigner colour="pink" ... />

Το prop colour ορίζει την ιδιότητα data-ls-theme στη ρίζα του component. Τα CSS custom properties ορίζουν μια κλίμακα σκιάς 10–100 για κάθε χρώμα:

Απόχρωση	Χρήση
10	Ανοιχτά φόντα, λεπτοί γεμίσματα
20	Λεπτά περιγράμματα
30	Δακτύλιοι εστίασης
60	Κύριο χρώμα (κουμπιά, σύνδεσμοι, ενεργές καταστάσεις)
70	Κατάσταση hover
80	Σκούρες/ισχυρές τονίσεις

Προσαρμοσμένο CSS

Το συστατικό εκθέτει CSS custom properties που μπορούν να παρακαμφθούν για να προσαρμόσετε την εμφάνιση πέρα από το χρωματικό θέμα. Αυτό το σύνολο ιδιοτήτων είναι για την ώρα περιορισμένο, επικοινωνήστε μαζί μας για περισσότερα.

<ls-signer
  style="--ls-font-family: 'Inter', sans-serif; --ls-color-primary-60: #e91e63;"
  recipient-id="abc123"
  private-key="key"
  session-id="session"
></ls-signer>

Διαθέσιμες Ιδιότητες

Ιδιότητα	Προεπιλογή	Περιγραφή
--ls-font-family	'IBM Plex Sans', sans-serif	Κύρια οικογένεια γραμματοσειράς
--ls-color-primary-10 έως --ls-color-primary-100	—	Πλήρης κλίμακα κύριου χρώματος (υπερισχύει του θέματος)
--ls-color-error	#f64a44	Χρώμα κατάστασης σφάλματος
--ls-color-error-light	#fff0f0	Φόντο σφάλματος
--ls-color-success	#46dbaa	Χρώμα κατάστασης επιτυχίας
--ls-color-success-light	#effff9	Φόντο επιτυχίας
--ls-color-warning	#fad232	Χρώμα κατάστασης προειδοποίησης
--ls-color-warning-light	#fffcef	Φόντο προειδοποίησης
--ls-color-border	#d8d9dc	Προεπιλεγμένο χρώμα περιγράμματος
--ls-color-border-subtle	#e0e2e5	Λεπτό χρώμα περιγράμματος
--ls-color-bg-subtle	#f7f8fa	Λεπτό χρώμα φόντου

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

Διεθνοποίηση

Το συστατικό υποστηρίζει 17 γλώσσες με μεταφράσεις ενσωματωμένες στο build. Η γλώσσα ανιχνεύεται αυτόματα από τον browser. Ένας ενσωματωμένος επιλογέας γλώσσας στο UI υπογραφής επιτρέπει στον παραλήπτη να αλλάζει γλώσσα ανά πάσα στιγμή.

Ορίστε το χαρακτηριστικό language για να επιβάλετε συγκεκριμένη γλώσσα. Όταν παρέχεται, ο ενσωματωμένος επιλογέας γλώσσας αποκρύπτεται και αγνοείται η ανίχνευση browser.

<ls-signer language="fr" recipient-id="abc123" private-key="key" session-id="session"></ls-signer>

<LsSigner language="fr" recipientId="abc123" privateKey="key" sessionId="session" />

Προτεραιότητα σειράς: prop language → γλώσσα browser → Αγγλικά ως προεπιλογή.

Κωδικός	Γλώσσα	Κωδικός	Γλώσσα
en	Αγγλικά	nl	Ολλανδικά
fr	Γαλλικά	fi	Φινλανδικά
bg	Βουλγαρικά	it	Ιταλικά
es	Ισπανικά	he	Εβραϊκά
de	Γερμανικά	sv	Σουηδικά
gs	Σκωτσέζικα Γαελικά	cy	Ουαλικά
ar	Αραβικά	is	Ισλανδικά
el	Ελληνικά	iw	Εβραϊκά (παλαιά)
pt	Πορτογαλικά
ro	Ρουμανικά

Έκδοση CDN

Το URL του CDN υποστηρίζει τόσο το latest όσο και αριθμούς δεσμευμένων εκδόσεων:

<!-- Always get the most recent version (recommended) -->
<script type="module" src="https://cdn.legalesign.io/signer/latest/ls-signer.esm.js"></script>

<!-- Pin to a specific version -->
<script type="module" src="https://cdn.legalesign.io/signer/v1.1.0/ls-signer.esm.js"></script>

Συνιστούμε τη χρήση latest — αυτό εξασφαλίζει ότι η ενσωμάτωση σας λαμβάνει αυτόματα διορθώσεις σφαλμάτων, ενημερώσεις ασφαλείας και νέα χαρακτηριστικά. Χρησιμοποιήστε σταθερή έκδοση αν χρειάζεστε να κλειδώσετε σε γνωστή λειτουργική έκδοση κατά τη διάρκεια περιόδου QA freeze ή ελεγχόμενης διανομής. Δείτε το πλήρες ιστορικό εκδόσεων στο npm για διαθέσιμες εκδόσεις.

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document Signing</title>
    <script type="module" src="https://cdn.legalesign.io/signer/latest/ls-signer.esm.js"></script>
  </head>
  <body>
    <ls-signer
      recipient-id="abc123"
      private-key="key"
      session-id="session"
      colour="teal"
    ></ls-signer>

    <script>
      const signer = document.querySelector('ls-signer');

      signer.addEventListener('signingSuccess', (event) => {
        console.log('Document signed:', event.detail.documentId);
        window.location.href = '/thank-you';
      });

      signer.addEventListener('signingFail', (event) => {
        console.error('Signing failed:', event.detail.failureReason, event.detail.error);
      });

      signer.addEventListener('fieldChange', (event) => {
        if (event.detail.eventType === 'ready') {
          console.log('Ready to sign:', event.detail.document.name);
        }
      });
    </script>
  </body>
</html>

Υποστήριξη Browser

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

Πόροι

• NPM Πακέτο
• Έγκριση Widget
• Τεκμηρίωση API GraphQL
• Μετάβαση από iframe υπογραφή
• Υποστήριξη

Βίντεο: Μετάβαση από iframe στο Συστατικό Υπογράφοντα