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

Enable for your team

Teastaíonn gníomhachtú ón gcomhpháirt Signer. Déan teagmháil leis an tacaíocht chun é a chumasú do do fhoireann.

Leagan reatha: v1.1.7 — log athruithe

Is comhpháirt ghréasáin neamhspleách ó ardán é an Legalesign Signer a sholáthraíonn taithí sínithe doiciméad iomlán agus shlán ón bhfeidhmchlár féin. Oibríonn sé le HTML simplí, React, Vue, Angular, nó cibé creatlach gréasáin.

Cuimsigh an comhpháirt seo áit ar bith a bhfuil do úsáideoirí ag iarraidh doiciméid a shíniú — laistigh de CRM, geata cliant, nó aon iarratas inmheánach a léireoidh HTML.

Suiteáil

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

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

Suiteáil React

Suiteáil trí bhainisteoir pacáiste:

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

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

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 úsáideann tú Vue le Vite, cuir isCustomElement: (tag) => tag.startsWith('ls-') leis an gcumraíocht breiseáin Vue chun foláirimh eilimintí anaithnid a chur ar ceal.

rabhadh

Bainfidh Vue 3 ainmneacha imeachtaí síos go litreacha beaga ar eilimintí saincheaptha, mar sin ní oibreoidh @signingSuccess. Úsáid addEventListener ar an tagairt eilimint mar a léirítear thuas.

Nuxt 3

Bain <ls-signer> i mbun <ClientOnly> chun earráidí SSR a sheachaint. Cuir an chumraíocht eilimint saincheaptha i nuxt.config.ts:

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

Fíordheimhniú

Teastaíonn ticéad gearrthéarmach ón do chúlra don chomhpháirt signer. Tá dhá rogha:

1. GraphQL generateComponentToken — Glao le component: LS_SIGNER agus nó ceann de recipientId nó sessionId sa scóip signer (soláthraigh ceann amháin, ní an dá cheann).
2. REST API — Glao ar GET /signer/{signerId}/component-token/ le do eochair API.

Tugann an dá rogha an token agus sessionId a theastaíonn ón gcomhpháirt. Féach Údarú Widget don sruth iomlán ticéad fálaigh ar an bhfreastalaí.

Rogha 1: GraphQL (Node.js)

Ag baint úsáide as recipientId (an chuid is coitianta — úsáideach nuair atá an fhaighteoir ar eolas ach nach bhfuil seisiún fós agat):

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;

Ar shlí eile, má tá sessionId agat cheana ó 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();

Pasáil 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éamhfhoclach rec, nó UUID)
private-key	string	Ticéad ar ais ón generateComponentToken
session-id	string	Aitheantóir seisiúin ar ais ón generateComponentToken

Tréithe Roghnacha

Tréith	Cineál	Réamhshocraíocht	Cur síos
colour	string	blue	Ainm dath téama (féach Téamáil)
style	string	``	Athruithe stíle (féach CSS Do Chustaiméara)
branding	boolean	true	Taispeáin branda Legalesign. Socraigh go false chun é a chur i léig.
language	string	—	Forchur teanga ar leith agus cúm an lascálaí teanga (féach Idirdhealú Teanga)

Imeachtaí

Airí React	Imeacht comhpháirt ghréasáin	eventType	Cathain
onSuccess	signingSuccess	"success"	Doiciméad sínithe go rathúil
onFail	signingFail	"failure"	Theip ar shíniú doiciméid, diúltaíodh é, tá sé imithe in éag, cealaithe, scriosta, bainte, nó críochnaithe cheana áit éigin eile
onChange	fieldChange	"ready"	Doiciméad agus íomhánna lódáilte go hiomlán
onChange	fieldChange	"save"	Luach réimse sábháilte
onChange	fieldChange	"select"	Roghnaíodh réimse nó tá sé fócasaithe

onSuccess / signingSuccess

Lánchumhraithe nuair a shíneann an faighteoir ar an doiciméad go rathúil.

{
  eventType: 'success';
  documentId: string;   // UUID of the signed document
  recipientId: string;  // UUID of the recipient
}

React:

<LsSigner
  onSuccess={({ eventType, documentId, recipientId }) => {
    console.log(eventType);   // "success"
    console.log(documentId);
    console.log(recipientId);
  }}
/>

Comhpháirt ghréasáin:

signer.addEventListener('signingSuccess', (e) => {
  console.log(e.detail.eventType);   // "success"
  console.log(e.detail.documentId);
  console.log(e.detail.recipientId);
});

onFail / signingFail

Lánchumhraithe nuair a theipeann ar shíniú — mar gheall ar dhiúltú doiciméid nó earráid le linn idirbhriste an shíniú (m.sh. earráid líonra, seisiún imithe in éag, coinbhleacht staid doiciméid).

{
  eventType: 'failure';
  failureReason: FailureReason;
  error: string;          // Human-readable error message
  documentId?: string;    // UUID of the document (if available)
  recipientId: string;    // UUID of the recipient
}

failureReason	Cúis
documentExpired	Tá staid an doiciméid "expired" nó tá an dáta expires imithe thart
sessionExpired	Tháinig freagra 401 nó 403 ó API agus an doiciméad á lódáil
cancelled	Tá staid an doiciméid "cancelled"
deleted	Tá an marcáil is_deleted ar an doiciméad true
rejected	Dhíbhunaigh an faighteoir an doiciméad (is_rejected true)
removed	Tháinig freagra 404 ó API — níl an doiciméad ann níos mó
documentCompleted	Tháinig freagra completed ón API sínithe — bhí an doiciméad sínithe cheana, b’fhéidir i mbrabhsálaí nó ar ghléas eile. Taispeánann an comhpháirt teachtaireacht eolais don fhaighteoir seachas earráid.
signingError	Aon earráid eile le linn lódála nó sínithe

React:

<LsSigner
  onFail={({ eventType, failureReason, error, documentId, recipientId }) => {
    console.log(eventType);      // "failure"
    console.log(failureReason);  // e.g. "documentExpired"
    console.log(error);
  }}
/>

Comhpháirt ghréasáin:

signer.addEventListener('signingFail', (e) => {
  console.log(e.detail.eventType);      // "failure"
  console.log(e.detail.failureReason);  // e.g. "documentExpired"
  console.log(e.detail.error);
});

onChange / fieldChange

Tá na trí luach eventType ag úsáid an imeacht céanna. Úsáid eventType chun idirdhealú a dhéanamh.

eventType: "ready"

Lánchumhraithe uair amháin nuair atá an doiciméad agus gach íomhá leathanaigh lódáilte go hiomlán agus tá an comhéadan sínithe réidh le húsáid.

{
  eventType: 'ready';
  document: {
    documentId: string;      // UUID of the document
    name: string;            // Document name
    state: string;           // Document state (e.g. "signing")
    recipientId: string;     // UUID of the recipient
    recipientRole?: string;  // Role of the recipient (e.g. "witness")
    pageCount: number;       // Number of pages
    expires?: string;        // Expiry date (ISO string, if set)
    isApprover: boolean;     // Whether the recipient is an approver
    isWitness: boolean;      // Whether the recipient is a witness
    canReassign: boolean;    // Whether the recipient can reassign
    doOfferReject: boolean;  // Whether the reject option is shown
  };
}

React:

<LsSigner
  onChange={({ eventType, document }) => {
    if (eventType === 'ready') {
      console.log('Ready to sign:', document.documentId, document.name);
      console.log('Pages:', document.pageCount);
      console.log('Expires:', document.expires);
    }
  }}
/>

Comhpháirt ghréasáin:

signer.addEventListener('fieldChange', (e) => {
  if (e.detail.eventType === 'ready') {
    console.log('Ready to sign:', e.detail.document.documentId, e.detail.document.name);
  }
});

eventType: "save"

Lánchumhraithe tar éis luach réimse a bheith sábháilte ar an bhfreastalaí.

{
  eventType: 'save';
  uuid: string;                   // UUID of the field
  saved: boolean;                 // Whether the save was successful
  field: Record<string, any>;     // Full field object (see Field Properties below)
}

React:

<LsSigner
  onChange={({ eventType, uuid, saved, field }) => {
    if (eventType === 'save') {
      console.log(uuid, saved, field.value);
    }
  }}
/>

Comhpháirt ghréasáin:

signer.addEventListener('fieldChange', (e) => {
  if (e.detail.eventType === 'save') {
    console.log(e.detail.uuid, e.detail.saved, e.detail.field.value);
  }
});

eventType: "select"

Lánchumhraithe nuair a roghnaítear réimse nó má tá sé fócasaithe — spreagtha ag cliceáil úsáideora, nascleanúint méarchláir, aistriú uathoibríoch, nó idirghníomhaíocht taobhbhioráin.

{
  eventType: 'select';
  uuid: string;                   // UUID of the selected field
  field: Record<string, any>;     // Full field object (see Field Properties below)
}

React:

<LsSigner
  onChange={({ eventType, uuid, field }) => {
    if (eventType === 'select') {
      console.log('selected', uuid, field.fieldtype);
    }
  }}
/>

Comhpháirt ghréasáin:

signer.addEventListener('fieldChange', (e) => {
  if (e.detail.eventType === 'select') {
    console.log('selected', e.detail.uuid, e.detail.field.fieldtype);
  }
});

Airí Réimse

Tá an réad field atá san imeacht save agus select comhdhéanta den na hairí seo a leanas:

Airí	Cineál	Cur síos
uuid	string	Aitheantóir réimse uathúil
fieldtype	string	Cineál réimse (m.sh. "text", "signature", "date", "checkbox")
value	string	Luach reatha an réimse
state	boolean	An bhfuil an réimse sábháilte go rathúil
optional	boolean	An bhfuil an réimse roghnach
page	number	Uimhir na leathanaigh ina bhfuil an réimse
label	string	Lipéad réimse (má tá sé socraithe)
validation	number	Cód cineál fíorúcháin
logicaction	string	Cineál gníomhaíochta loighic ("1" = raidió, "2" = suim, "3" = coinníollach)
logicgroup	string	Aitheantóir grúpa loighic
mapto	string	Grúpa sprioc don loighic (na réimsí rialaithe)
auto	boolean	An bhfuil an réimse líonta go huathoibríoch
dirty	boolean	An bhfuil athruithe áitiúla neamhshábháilte sa réimse

Airí React

Úsáideann an comhpháirt React airí i camelCase agus gairis ar ais ina 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 Legalesign. Réamhshocraithe go true.
language	string	❌	Forchur teanga ar leith (féach Idirdhealú Teanga)
onSuccess	(data: { eventType: 'success'; documentId: string; recipientId: string }) => void	❌	Glaoite ar chomhaireamh shínithe
onFail	(data: { eventType: 'failure'; failureReason: FailureReason; error: string; documentId?: string; recipientId: string }) => void	❌	Glaoite ar theip shínithe
onChange	(data: { eventType: 'ready' | 'save' | 'select'; document?: DocumentSummary; uuid?: string; saved?: boolean; field?: Record<string, any> }) => void	❌	Glaoite ar imeachtaí réimse agus réidh an doiciméid

Láimhseálaí catch-all (do dhofheictheacht & prótótíopa)

Ós rud é go bhfuil eventType in gach imeacht, is féidir feidhm aonair a nascadh le 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 ghré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éamáil

Socraigh téama dath le hairí an dath. Déantar na toin go léir go huathoibríoch.

Dathanna Ar Fáil

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

Fág an airí as an té gorm réamhshocraithe.

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

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

Cuireann an airí colour tréith data-ls-theme ar bhunús an chomhpháirt. Sainaithníonn airí saincheaptha CSS scála 10–100 d’aitheantas dath do gach dath:

Toin	Úsáid
10	Cúlraí éadroma, líonta íseal
20	Teorainneacha éadroma
30	Fáinní fócas
60	Dath príomha (cnaipeanna, naisc, staid ghníomhach)
70	Staid breith
80	Béim dhorcha/láidir

CSS Saincheaptha

Taispeánann an comhpháirt airí saincheaptha CSS atá in ann a bheith athshlánaithe chun cuma a shaincheapadh níos faide ná an téama dath. Tá an tsraith seo teoranta faoi láthair, déan teagmháil linn má tá spéis agat.

<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í Ar Fáil

Airí	Réamhshocraíocht	Cur síos
--ls-font-family	'IBM Plex Sans', sans-serif	Clann cló príomha
--ls-color-primary-10 go --ls-color-primary-100	—	Scála dath príomhúil iomlán (rialaíonn téama)
--ls-color-error	#f64a44	Dath staid earráide
--ls-color-error-light	#fff0f0	Cúlra earráide
--ls-color-success	#46dbaa	Dath staid ratha
--ls-color-success-light	#effff9	Cúlra ratha
--ls-color-warning	#fad232	Dath staid rabhadh
--ls-color-warning-light	#fffcef	Cúlra rabhadh
--ls-color-border	#d8d9dc	Dath teorann réamhshocraithe
--ls-color-border-subtle	#e0e2e5	Dath teorann éadrom
--ls-color-bg-subtle	#f7f8fa	Dath cúlra éadrom

Nóta: Chun insileadh CSS saincheaptha iomlán (ag díriú ar eilimintí inmheánacha go díreach, ag athrú méideanna cló, réimse imlíne, spásáil, srl.), tá sé seo beartaithe don todhchaí. Déan teagmháil linn le do thoil má tá suim agat ag an tacaíocht.

Idirdhealú Teanga

Tacaíonn an comhpháirt le 17 dteanga lena aistriúcháin curtha san áireamh sa tógáil. Braitear an teanga go huathoibríoch ón mbrabhsálaí. Cuirtear lascálaí teanga ionsuite ar fáil sa chomhéadan sínithe chun ligean don fhaighteoir teanga a athrú tráth ar bith.

Socraigh an tréith language chun teanga ar leith a fhórsaíocht. Nuair a sholáthraítear é, cuirtear an lascálaí teanga ionsuite i bhfolach agus seachnaítear braite an bhrabhsá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" />

Orduithe tosaíochta: Airí language → teanga bhrabhsálaí → Béarla mar rogha eile.

Cód	Teanga	Cód	Teanga
en	Béarla	nl	Ollainnis
fr	Fraincis	fi	Fionlainnis
bg	Bulgáiris	it	Iodáilis
es	Spáinnis	he	Eabhrais
de	Gearmáinis	sv	Sualainnis
gs	Gàidhlig na h-Alba	cy	Béarla na Breataine Bheag
ar	Araibis	is	Íoslainnis
el	Gréigis	iw	Eabhrais (seanleagan)
pt	Portaingéilis
ro	Rómáinis

Leaganacha CDN

Tacaíonn an URL CDN le huimhreacha leaganacha latest agus pinte araon:

<!-- 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.7/ls-signer.esm.js"></script>

Molaimid úsáid a bhaint as latest — cinntíonn sé seo go bhfaigheann do chomhtháthú deisiúcháin fabhtanna, paisteanna slándála, agus gnéithe nua go huathoibríoch. Úsáid leagan pointe má chaithfidh tú leagan oibríoch ar eolas a scaoileadh i rith reo QA nó rolladh rialaithe. Féach ar stair iomlán na leaganacha ar npm le haghaidh na leaganacha ar fáil.

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)

Log Athruithe

Leagan	Dáta	achoimre
v1.1.7	20 Deireadh Fómhair 2026	Cúis theip documentCompleted; feabhsuithe sábhála réimse; ceartuithe suíomh; feabhsuithe gabhála imeachtaí teipe
v1.1.0	22 Iúil 2026	Imeacht onChange / fieldChange; airí language; réimsí coinníollacha; léim uathoibríoch; QES
v1.0.12	20 Iúil 2026	Imeacht onChange/fieldChange le luachanna ready, save, select; luachanna failureReason; fíorú regex
v1.0.11	15 Iúil 2026	Airí language; réimsí coinníollacha, titim aníos, boscaí seiceála; ionchur fóin; ordú réimsí
v1.0.6	9 Meitheamh 2026	Airí breise branding
v1.0.3	15 Bealtaine 2026	Airí colour; airí saincheaptha CSS; ceartuithe fabhtanna
v1.0.0	11 Bealtaine 2026	Scaoileadh seasmhach tosaigh

Acmhainní

• Pacáiste NPM
• Údarú Widget
• Doiciméadú API GraphQL
• Aistriú ó shíniú iframe
• Tacaíocht

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