Cuir Legalesign Signer an sàs air an làrach-lìn agad

Cuimhnich air do sgioba

Feumar an singadair a chur an gnìomh. Cuir fios gu taic gus a chomasachadh airson do sgioba.

Is e pàirt-lìn lìn gun choimeas a th’ ann am Legalesign Signer a bheir eòlas soidhne sgrìobhainnean iomlan, rèidh, bho do app fhèin. Tha e ag obair le HTML vanilla, React, Vue, Angular, no frèam-lìn sam bith eile.

Cuir a-steach am pàirt seo far a bheil feum aig do luchd-cleachdaidh air sgrìobhainnean a shoidhnigeadh — taobh a-staigh CRM, portal teachdaiche, no tagradh sam bith eile a bhios a’ cur an cèill HTML.

Stàladh

Luchdaich dìreach bhon CDN (chan eil stàladh riatanach):

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

Stàladh React

Stàlaich tro mhanaidsear pacaid:

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

Cothlamadh Bun-sgoile

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

Feumaidh React react agus react-dom (v18 no v19) mar eisimeileachdan co-aoisean.

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>

comhairle

Ma tha thu a’ cleachdadh Vue le Vite, cuir ris isCustomElement: (tag) => tag.startsWith('ls-') anns a’ chuairteachadh plugins Vue agad gus rabhaidhean eileamaidean neo-aithnichte a sheachnadh.

rabhadh

Tha ainmichean tachartasan Vue 3 air an dèanamh ann an litrichean beaga air eileamaidean gnàthaichte, mar sin cha obraich @signingSuccess. Cleachd addEventListener air ath-thagradh eileamaid mar a chaidh a shealltainn gu h-àrd.

Nuxt 3

Cuir <ls-signer> ann am <ClientOnly> gus mearachdan SSR a sheachnadh. Cuir a-steach rèiteachadh eileamaid gnàthaichte ann an nuxt.config.ts:

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

Dearbhadh

Feumaidh am pàirt-lìn singadair token goirid-beathaidh bhon fhrithealaiche agad. Tha dà roghainn ann:

1. GraphQL generateComponentToken — Cuir fios le component: LS_SIGNER agus recipientId no sessionId ann an raon an t-singaidh (thoir aon, chan iad an dithis).
2. REST API — Cuir GET /signer/{signerId}/component-token/ le do iuchair API.

Tha an dà chuid a’ tilleadh token agus sessionId a tha riatanach don phàirt. Faic Ùghdarrachadh Widget airson sruth token iomlan air an taobh-frithealaiche.

Roghainnean 1: GraphQL (Node.js)

A’ cleachdadh recipientId (as cumanta — cleachd e nuair a tha fios agad cò an neach-fhaighinn ach chan eil session agad fhathast):

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;

Air neo, ma tha sessionId agad bho chùl-fhòn roimhe seo:

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

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

Cuir token mar private-key agus sessionId mar session-id dhan phàirt.

Feartan riatanach

Feart	Seòrsa	Tuairisgeul
recipient-id	string	Comharradh neach-fhaighinn (base64, ro-innleachd rec, no UUID)
private-key	string	Token air a thoirt air ais le generateComponentToken
session-id	string	ID seisein air a thoirt air ais le generateComponentToken

Feartan roghainneil

Feart	Seòrsa	Ro-shuidheachadh	Tuairisgeul
colour	string	blue	Ainm dath cuspair (faic Cuspairaich)
style	string	``	Atharrachaidhean stoidhle (faic CSS Luchd-cleachdaidh)
branding	boolean	true	Cuir air falbh suaicheantas Legalesign
language	string	—	Fuirich cànan sònraichte agus falaich inneal-atharrachaidh cànain (faic Eadar-nàiseantachd)

Tachartasan

Tachartas pàirt-lìn-lìn	Prop React	eventType	Cuin
signingSuccess	onSuccess	"success"	Sgrìobhainn air a shoidhnigeadh gu soirbheachail
signingFail	onFail	"failure"	Dh'fhàillig an soidhneadh, dhiùlt, dàil, gun dèan, chaidh a dhubhadh às, no a chaidh a thoirt air falbh
fieldChange	onChange	"ready"	Sgrìobhainn agus dealbhan air an luchdachadh gu tur
fieldChange	onChange	"save"	Bha luach raon air a shàbhaladh
fieldChange	onChange	"select"	Chaidh raon a thaghadh no a chuir fòcas air

signingSuccess / onSuccess

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

signingFail / onFail

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

failureReason	Adhbhar
documentExpired	Tha an sgrìobhainn dheth air a dhol seachad no tha an ceann-latha crìochnachaidh ann an àm a dh’ fhalbh
sessionExpired	Chuir API an còd 401 no 403
cancelled	Tha stàit an sgrìobhaidh "cancelled"
deleted	Chaidh an sgrìobhainn a dhubhadh às
rejected	Dh'iarr an neach-fhaighinn an sgrìobhainn
removed	Chuir API an còd 404
signingError	Còmhstri eile rè luchdachadh no soidhneadh

fieldChange / onChange

Tha na trì luachan eventType uile a’ roinn an aon tachartas. Cleachd eventType airson eadar-dhealachadh:

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

Propan React

Tha am pàirt React a’ cleachdadh propan camelCase agus propan callback an àite tachartasan DOM:

Prop	Seòrsa	Riatanach	Tuairisgeul
recipientId	string	✅	Comharradh neach-fhaighinn
privateKey	string	✅	Iuchair phrìobhaideach bho atharrachadh generateComponentToken
sessionId	string	✅	Comharradh seisein
colour	LsSignerColour	❌	Dath cuspair
branding	boolean	❌	Seall suaicheantas Legalesign. Ro-shealladh gu true.
language	string	❌	Fuirich cànan sònraichte (faic Eadar-nàiseantachd)
onSuccess	(data: { eventType: 'success'; documentId: string; recipientId: string }) => void	❌	Air a ghairm air soirbheachas soidhneadh
onFail	(data: { eventType: 'failure'; failureReason: FailureReason; error: string; documentId?: string; recipientId: string }) => void	❌	Air a ghairm air fàilligeadh soidhneadh
onChange	(data: { eventType: 'ready' | 'save' | 'select'; document?: DocumentSummary; uuid?: string; saved?: boolean; field?: Record<string, any> }) => void	❌	Air a ghairm air tachartasan raointean agus nuair a tha an sgrìobhainn deiseil

Làimhseachadh catch-all (debugging & prototyping)

Bhon uair a tha gach tachartas a’ toirt a-steach eventType, faodaidh tu aon ghnìomhaiche a cheangail ri gach tachartas:

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

Pàirt-lìn-lìn:

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

Cuspairaich

Stèidhich cuspair dath le prop colour. Tha na h-aon shades uile air an gineadh gu fèin-ghluasadach.

Dathan ri fhaighinn

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

Falbh às an prop airson an gorm àbhaisteach.

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

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

Tha am prop colour ag atharrachadh data-ls-theme air freumh a’ phàirt. Tha pròpachdan gnàthaichte CSS a’ mìneachadh tomhas-shades 10–100 gach dath:

Shade	Cleachdadh
10	Cùl-fhiosrachaidhean aotrom, lìonan faiceallach
20	Crìochan faiceallach
30	Fàinneachan fòcas
60	Dath prìomhach (putanan, ceanglaichean, stàitean gnìomhach)
70	Stàit glaodh
80	Buaidhean dorcha/neartaichte

CSS gnàthaichte

Tha an pàirt a’ tabhann pròpachdan gnàthaichte CSS a dh’fhaodar atharrachadh airson coltas a dhèanamh nas pearsanta nas fhaide na cuspair dath. Tha an cruinneachadh seo de phògraidean cuingealaichte an-dràsta, cuir fios thugainn airson tuilleadh.

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

Pròpachdan ri fhaighinn

Property	Ro-shuidheachadh	Tuairisgeul
--ls-font-family	'IBM Plex Sans', sans-serif	Teaghlach font prìomhach
--ls-color-primary-10 gu --ls-color-primary-100	—	Sgèile dathan prìomhach (a’ dol thairis air cuspair)
--ls-color-error	#f64a44	Dath stàit mhearachdan
--ls-color-error-light	#fff0f0	Cùl-raon mearachd
--ls-color-success	#46dbaa	Dath soirbheachas
--ls-color-success-light	#effff9	Cùl-raon soirbheachas
--ls-color-warning	#fad232	Dath rabhaidh
--ls-color-warning-light	#fffcef	Cùl-raon rabhadh
--ls-color-border	#d8d9dc	Dath crìochnachaidh àbhaisteach
--ls-color-border-subtle	#e0e2e5	Dath crìochnachaidh faiceallach
--ls-color-bg-subtle	#f7f8fa	Dath cùlraoin faiceallach

Nota: Airson cuir a-steach CSS gnàthaichte gu tur (a’ tighinn a-steach gu eileamaidean a-staigh gu dìreach, a’ dol thairis air meudan font, rèidh glainne, àiteachan, msaa), tha seo na fheart a tha ri thighinn san àm ri teachd. Cuir fios thugainn ma tha ùidh agad (get in touch).

Eadar-nàiseantachd

Tha an pàirt a’ toirt taic do 17 cànan le eadar-theangachaidhean air an toirt a-steach don togail. Tha an cànan air a lorg gu fèin-ghluasadach bhon bhrabhsair. Tha inneal-atharrachaidh cànain togte san eadar-aghaidh soidhneadh a leigeas leis an neach-fhaighinn cànan atharrachadh uair sam bith.

Stèidhich am feart language gus cànan sònraichte a chuir thu ann gu fòirneartach. Nuair a thèid a thoirt seachad, tha an inneal-atharrachaidh cànain togte air a fhàgail falaichte agus tha lorg an bhrabhsair air a sheachnadh.

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

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

Rangachadh prìomhachd: prop language → cànan an bhrabhsair → Beurla mar roghainn mu dheireadh.

Còd	Cànan	Còd	Cànan
en	Beurla	nl	Ollainnis
fr	Fraingis	fi	Fionnlannach
bg	Bulgarach	it	Eadailtis
es	Spàinntis	he	Eabhra
de	Gearmailtis	sv	Suainis
gs	Gàidhlig na h-Alba	cy	Cuimris
ar	Arabais	is	Innis Tìleach
el	Greugais	iw	Eabhra (seann)
pt	Portagailis
ro	Ròmanach

Sreathachaidh CDN

Tha an URL CDN a’ toirt taic do latest agus àireamhan dreach steigte:

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

Tha sinn a’ moladh latest a chleachdadh — bheir seo seachad gu fèin-obrachail cùisean bug, phatichean tèarainteachd, agus feartan ùra. Cleachd dreach steigte ma tha feum agad air glasadh airson sgaoileadh fo smachd no rè stad QA. Faic an eachdraidh dreach iomlan air npm airson dreachan ri fhaighinn.

Eisimpleir Là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>

Taic Bhrabhsair

• Chrome/Edge (as ùire)
• Firefox (as ùire)
• Safari (as ùire)
• Brabhsairean gluasadach (Safari iOS, Chrome Mobile)

Goireasan

• Pacaid NPM
• Ùghdarrachadh Widget
• Sgrìobhainnean API GraphQL
• Glacadh air adhart bho soidhneadh iframe
• Taic

Bideo: Gluasad bho iframe gu pàirt singadair