Comhtháthú Legalesign Signer i do Láithreán Gréasáin

Enable for your team

Tá gníomhachtú ag teastáil ón gcomhpháirt Signer. Déan teagmháil leis an tacaíocht chun é a chumasú do d’fhoireann.

Is comhpháirt ghréasáin neamhspleách ar ardán é Legalesign Signer a sholáthraíonn taithí sínithe doiciméad iomlán agus éadromlaith ó do aip féin. Oibríonn sé le HTML vanilla, React, Vue, Angular, nó aon chreat gréasáin.

Cuir isteach an chomhpháirt seo áit ar bith a bhfuil gá ag do úsáideoirí doiciméid a shíniú — laistigh de CRM, calafort cliant, nó aon iarratas inmheánach a dhíorthaíonn HTML.

Suíomh

Lódáil go díreach ón CDN (níl aon shuiteáil riachtanach):

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

Suiteáil React

Suiteáil tríd an mbainisteoir pacáistí:

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

Comhtháthú Bunúsach

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)}
    />
  );
}

Éilíonn React react agus react-dom (v18 nó v19) mar spleáchais comhghleacaithe.

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>

leide

Má úsáideann tú Vue le Vite, cuir isCustomElement: (tag) => tag.startsWith('ls-') le do chumraíocht breiseán Vue chun foláirimh eilimintí anaithnid a cheilt.

rabhadh

Déantar ainmneacha imeachtaí Vue 3 a íoslitriú ar eilimintí saincheaptha, mar sin ní oibreoidh @signingSuccess. Úsáid addEventListener ar tagairt an eilimint mar atá léirithe thuas.

Nuxt 3

Bain úsáid as <ClientOnly> le haghaidh <ls-signer> chun earráidí SSR a sheachaint. Cuir an chumraíocht eilimint saincheaptha san áireamh i nuxt.config.ts:

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

Fíordheimhniú

Tá gearrthóg sealadach de dhíth ar an gcomhpháirt sínithe ó do bhfreastalaí cúil. Tá dhá rogha ann:

1. GraphQL generateComponentToken — Glaoigh le component: LS_SIGNER agus ceann de recipientId nó sessionId i réimse an sínitheora (tabhair ceann amháin, ní beirt).
2. REST API — Glaoigh GET /signer/{signerId}/component-token/ le d’eochair API.

Tugann an bheirt ar ais an token agus sessionId atá ag teastáil ón gcomhpháirt. Féach Údarú an uathchoirp widget don sruth iomlán token ar taobh an fhreastalaí.

Rogha 1: GraphQL (Node.js)

Ag úsáid recipientId (is coitianta — úsáideach nuair atá an faighteoir ar eolas ach nach bhfuil seisiún agat fós):

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;

Nó, má tá sessionId agat ó ghlao roimhe seo:

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

Rogha 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();

Seol token mar private-key agus sessionId mar session-id chuig an gcomhpháirt.

Tréithe Riachtanacha

Tréith	Cineál	Cur Síos
recipient-id	string	Aitheantóir faighteora (base64, réamhfhocal rec, nó UUID)
private-key	string	Token a thugtar ar ais ag generateComponentToken
session-id	string	ID an tseisiúin a thugtar ar ais ag generateComponentToken

Tréithe Roghnacha

Tréith	Cineál	Réamhshocraithe	Cur Síos
colour	string	blue	Ainm dath téama (féach Theming)
style	string	``	Athruithe stíle (féach Customer CSS)
branding	boolean	true	Bain brandaíocht Legalesign
language	string	—	Dílseacht a dhéanamh do theanga ar leith agus an lasc teanga a cheilt (féach Internationalisation)

Imeachtaí

Imeacht chomhpháirt ghréasáin	Airí React	eventType	Cathain
signingSuccess	onSuccess	"success"	Tá doiciméad sínithe go rathúil
signingFail	onFail	"failure"	Theip ar shíniú, diúltaíodh, tháinig críoch, cealaíodh, scriosadh, nó bainte amach é
fieldChange	onChange	"ready"	Tá an doiciméad agus na híomhánna lódáilte go hiomlán
fieldChange	onChange	"save"	Sábháladh luach sa réimse
fieldChange	onChange	"select"	Roghnaíodh nó dhíríodh ar réimse é

signingSuccess / onSuccess

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

signingFail / onFail

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

failureReason	Cúis
documentExpired	Tá an doiciméad éagtha nó tá dáta éaga sa todhchaí
sessionExpired	D’fhoilsigh an API 401 nó 403
cancelled	Stádas an doiciméid ná "cancelled"
deleted	Tá an doiciméad scriosta
rejected	Díolmhaitheoir diúltaigh don doiciméad
removed	D’fhoilsigh an API 404
signingError	Earráid ar bith eile agus tú ag luchtú nó ag síniú

fieldChange / onChange

Roinntear an trí luach eventType ar an imeacht chéanna. Úsáid eventType chun idirdhealú a dhéanamh:

// 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> }

Airí React

Úsáideann an comhpháirt React airí camelCase agus airí glaonna ar ais in ionad imeachtaí DOM:

Airí	Cineál	Riachtanach	Cur Síos
recipientId	string	✅	Aitheantóir faighteora
privateKey	string	✅	Eochair phríobháideach ón athrú generateComponentToken
sessionId	string	✅	Aitheantóir seisiúin
colour	LsSignerColour	❌	Dath téama
branding	boolean	❌	Taispeáin brandaíocht Legalesign. Réamhshocraithe true.
language	string	❌	Dílseacht do theanga ar leith (féach Internationalisation)
onSuccess	(data: { eventType: 'success'; documentId: string; recipientId: string }) => void	❌	Glaoitear agus an síniú rathúil
onFail	(data: { eventType: 'failure'; failureReason: FailureReason; error: string; documentId?: string; recipientId: string }) => void	❌	Glaoitear nuair a theipeann ar shíniú
onChange	(data: { eventType: 'ready' | 'save' | 'select'; document?: DocumentSummary; uuid?: string; saved?: boolean; field?: Record<string, any> }) => void	❌	Glaoitear ar imeachtaí réimse agus ar réidh an doiciméid

Láimhseálaí catch-all (le haghaidh dífhabhtaithe & prótaclaíochta)

Ós rud é go gcuimsíonn gach imeacht eventType, is féidir feidhm aonair a shreangú do gach imeacht:

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}
/>

Comhpháirt Gréasáin:

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);

Téamaíocht

Socraigh téama dath le airí colour. Déantar gach scáth a fhorbairt go huathoibríoch.

Dathanna Inscálaithe

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

Fág an airí amach don gorm réamhshocraithe.

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

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

Socraíonn an airí colour tréith data-ls-theme ar fréamh an chomhpháirt. Sainmhínítear airí saincheaptha CSS scála 10–100 do gach dath:

Scáth	Úsaid
10	Cúlraí éadroma, líníochtaí éadroma
20	Bairr fíneáil éadroma
30	Fáinne fócasach
60	Dath príomha (cnaipí, naisc, stáid gníomhaíochta)
70	Stádas léim
80	Béimí dorcha/láidir

CSS Saincheaptha

Nochtann an comhpháirt airí saincheaptha CSS atá indéanta a athscríobh chun cuma a shaincheapadh níos faide ná an téama dath. Tá an tsraith seo de na hairí teoranta faoi láthair, déan teagmháil linn le haghaidh tuilleadh sonraí.

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

Airí Inscálaithe

Airí	Réamhshocraithe	Cur Síos
--ls-font-family	'IBM Plex Sans', sans-serif	Príomh-theaghlach cló
--ls-color-primary-10 go --ls-color-primary-100	—	Scála iomlán dathanna príomhúla (úsáidtear in ionad an téama)
--ls-color-error	#f64a44	Dath stádas earráide
--ls-color-error-light	#fff0f0	Cúlra earráide
--ls-color-success	#46dbaa	Dath stádas rathúlachta
--ls-color-success-light	#effff9	Cúlra rathúlachta
--ls-color-warning	#fad232	Dath stádas rabhadh
--ls-color-warning-light	#fffcef	Cúlra rabhadh
--ls-color-border	#d8d9dc	Dath taobhlíne réamhshocraithe
--ls-color-border-subtle	#e0e2e5	Dath taobhlíne éadroma
--ls-color-bg-subtle	#f7f8fa	Dath cúlra éadroma

Nóta: Chun CSS saincheaptha iomlán a ionchur (ag díriú go díreach ar eilimintí inmheánacha, ag sárú méideanna cló, radiús na taobhlíne, spásáil, srl.), tá an fheidhmíocht seo ar intinn sa todhchaí. Déan teagmháil linn le do thoil má tá suim agat: get in touch.

Idirnáisiúnú

Tacaíonn an comhpháirt le 17 teanga le haistriúcháin a bhfuil pacáistí acu sa tógáil. Braitear an teanga go huathoibríoch ón mbrabhsálaí. Lascóir teanga ionsuite san UI sínithe ligeann don faighteoir an teanga a athrú am ar bith.

Socraigh an tréith language chun teanga ar leith a forcáil. Nuair atá sé ar fáil, ceiltear an lasc teanga ionsuite agus seachnaítear braiteadh na mbrabhsálaí.

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

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

Ord tosaíochta: airí language → teanga an bhrabhsálaí → Béarla mar dhroichead.

Cód	Teanga	Cód	Teanga
en	Béarla	nl	Ísiltíreach
fr	Fraincis	fi	Fionlainnis
bg	Bulgáiris	it	Iodáilis
es	Spáinnis	he	Eabhrais
de	Gearmáinis	sv	Sualainnis
gs	Gaeilig na hAlban	cy	Breatnais
ar	Araibis	is	Íoslainnis
el	Gréigis	iw	Eabhrais (sean-ghné)
pt	Portaingéilis
ro	Rómáinis

Eagrán CDN

Tacaíonn URL an CDN leis an dá eagrán latest agus le huimhreacha eagrán shocraithe:

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

Molaimid úsáid a bhaint as latest — déanann sé seo cinnte go bhfaigheann d’integration go huathoibríoch deisiúcháin fabhtanna, piocanna slándála, agus gnéithe nua. Úsáid eagrán socraithe má tá gá le fanacht le scaoileadh oibreaithe le linn reo QA nó scaipeadh rialaithe. Féach an stair iomlán eagrán ar npm: full version history on npm.

Sampla Iomlán

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

Tacaíocht Brabhsálaí

• Chrome/Edge (is déanaí)
• Firefox (is déanaí)
• Safari (is déanaí)
• Brabhsálaithe soghluaiste (iOS Safari, Chrome Soghluaiste)

Acmhainní

• Pacáiste NPM
• Údarú an uathchoirp widget
• Doiciméadú API GraphQL
• Aistriú ón sínniú iframe
• Tacaíocht

Físeán: Aistriú ón iframe go comhpháirt Signer