Cuir Amalaichte Am Brabhsair Sgrìobhainn Legalesign A-steach don Làrach-lìn agad

comhairle

Faodaidh tu faicinn mar a tha am pàirt seo ag obair mar Quick Send ann an Console.

'S e pàirt-lìn neo-eisimeileach air àrd-ùrlar a th' ann am Brabhsair Sgrìobhainn Legalesign a leigeas leat templaidean a dheasachadh, fhaicinn ro-làimh agus a ghnàthachadh airson soidhnichean sgrìobhainnean. Tha e ag obair gu socair ann an HTML le JavaScript, React, Vue, Angular, no prìomh fhrèaman-lìn sam bith.

Tha am pàirt seo plug and play air a dhealbhadh gus am faod thu prìomh phàirtean cruthachaidh sgrìobhainn a chuir a-steach do na siostaman agad fhèin, mar eisimpleir CRM no tagradh loidhne gnìomhachais.

Chum an t-siostam agad comas air pàirtean HTML a shealltainn agus taic a thoirt dhaibh, faodaidh tu an Brabhsair Sgrìobhainn a chleachdadh.

Ma dh’ fheumas tu cuideachadh a bharrachd airson am Brabhsair Sgrìobhainn a chur a-steach don stac teicnigeach agad, cuir fios chun deasg taic againn.

Faodaidh tu na widgetan nas motha seo a chleachdadh le amalachadh REST/GraphQL API airson pròiseasan soidhnidh sgrìobhainn gun fhiosta do do luchd-obrach agus do luchd-cleachdaidh.

Installation

NPM Installation

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

For React Projects

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

Basic Integration

HTML/JavaScript

Faodar an dreach HTML/Javascript den phàirt seo a chleachdadh leis a’ bhuidheann leasachaidh sam bith, mar PHP, ASP .Net msaa. Faodaidh tu ceangal a dhèanamh gu dìreach ris a’ phàirt bho npm ma chuingealas do àrainneachd air a stàladh. Faodaidh tu feuchainn air duilleag sealltainn-dhealbh bhon stòr-dàta eisimpleir an seo [https://github.com/legalesign/ls-viewer-demo].

Cuir na sgriobtaichean pàirt ris an HTML agad:

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

Authentication - Faigh airgead-glèidhidh

Feumaidh tu còd taobh an t-seirbheir a chleachdadh airson YOUR_AUTH_TOKEN fhaighinn. Tha trì roghainnean ann:

SRP JWT dìreach — Ma tha an cùlbheil agad mu thràth a’ cleachdadh dearbhadh SRP, cuir an t-airgead-glèidhidh JWT a-steach gu dìreach dhan widget.
GraphQL generateComponentToken — Glaodhaibh am mutation le do API key no SRP JWT gus airgead-glèidhidh pàirt beag-ùine agus air a chuingealachadh a chruthachadh.
REST API — Glaodhaibh GET /templatepdf/{pdfId}/component-token/ le do iuchair API.

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

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

Cuir an token a thèid a thilgeil air ais (no do JWT SRP) dhan widget. Faic Widget Authorization airson barrachd mion-fhiosrachaidh mu roghainnean airgead-glèidhidh.

React Integration

Tha dreach den phàirt againn cuideachd a bhios ag amalachadh gu dìreach le frèaman React.

import { LsDocumentViewer } from 'legalesign-document-viewer-react';

function App() {
  return (
    <LsDocumentViewer
      templateid="YOUR_TEMPLATE_ID"
      token="YOUR_AUTH_TOKEN"
      mode="compose"
    />
  );
}

Required Attributes

token

An airgead-glèidhidh tèarainteachd agad airson dearbhadh. Faodar seo a bhith mar token ruigsinneachd JWT SRP no token pàirt beag-ùine bho generateComponentToken. Faic Widget Authorization airson fiosrachadh air sruth tèarainte airgead-glèidhidh.

token="eyJraWQiOiJBTkJIeT..."

templateid

An ID API den templaidean a tha thu airson a thaisbeanadh do luchd-cleachdaidh. Faodaidh tu seo fhaicinn anns an luchd-àrdachaidh URL nuair a tha thu a’ deasachadh a’템plaidean anns a’ Web App.

templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"

Editor Mode

Cruthachadh agus deasachadh templaidean le feartan làn agus a h-uile inneal ri fhaighinn. Tha seo airson sruth-obrach far am bi templaidean ath-chuairteachadh àrd cunbhalach le dreuchdan feumail. Ma tha do amas dìreach sgrìobhainn a chleachdadh aon turas, is dòcha gu bheil do shiostam ginealach sgrìobhainnean air a lìonadh cheana, faodaidh tu beachdachadh air modh compose an àite sin.

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

Compose Mode

Tha am modh seo 'recipients-first' gus an eòlas cleachdaidh a dhèanamh furasta. Ann am Legalesign Web App is e seo an gnìomh 'Quick send'.

Cuir do luchd-faighinn a-steach don fheart 'recipient' agus faodaidh an cleachdaiche aca faighinn gu luath air soidhnidhean agus raointean foirme, mus cuir iad an sgrìobhainn. Freagarrach airson luchd-cleachdaidh a tha air am mìneachadh mar-thà.

Is e an sruth-obrach cumanta clone no luchdachadh suas PDF, an uair sin cuir a-steach an sealladair far an urrainn don chleachdaiche raointean soidhnidh agus foirmean a chur ris, agus thoir seachad putan airson an sgrìobhainn a chur thuca.

Clone

Clone templaidean a th’ ann mu thràth le bhith a’ cleachdadh am mutation 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;

No Luchdaich Suas

Cruthaich templaidean agus an uair sin luchdadh suas e chun uploadUrl a thugadh seachad. Cleachd tiotal [deleted] ma tha thu airson nach bi am pdf anns an leabharlann agad. Thèid a dhubhadh às anns na 24 uairean a tha romhainn. Air neo cleachd tiotal sam bith a thogras tu:

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;

A-nis cuir PUT air a’ fhaidhle agad gu uploadUrl. Feumaidh an seòrsa susbaint a bhith application/pdf.

Cuir am brabhsair a-steach

Is e 'recipients' am prìomh fheart. Feumaidh tu barrachd mion-fhiosrachaidh do luchd-aontachaidh no fianaisich - airson tuilleadh fhiosrachaidh faic 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>

Bidh modh compose gu fèin-obrachail a’:

Aithneachadh luchd-faighinn a chaidh a chruthachadh ro-làimh
Falaichte an neach-cuiridh bho liosta eadar-dhealaichte
Falaichte roghainnean sgrìobhainn
A’ sealltainn na raointean a tha riatanach mar a’ ghnàth
A’ toirt air falbh an neach-cuiridh agus na raointean aca bhon deasaiche
A’ brosnachadh taghadh luath air na raointean riatanach do gach neach-faighinn

Preview Mode

Seallaidh ath-bhreithneachadh sgrìobhainn cuideachail an sgrìobhainn leis a h-uile raon gnàthach agus leigidh e leis an neach-cleachdaidh brobhsadh tro dhuilleagan.

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

Bidh modh ath-bhreithneachaidh gu fèin-obrachail a’:

Falaichte an inneal-taic
Falaichte roghainnean sgrìobhainn
Falaichte bogsa innealan
Dèan com-pàirtichean agus raointean leughadh-a-mhàin

Advanced Configuration

Filter Toolbox

Crùbthaich seòrsachan raointean a tha rim faotainn a’ cleachdadh luachan air an do-phìobadh. Mura tèid luach sam bith a thoirt seachad, thèid gabhail ris gum bi am bogsa innealan gun sìoltachan agus gu bheil a h-uile roghainn ri fhaighinn.

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

Luachan sìoltachaidh ri fhaotainn:

Luach	Tuairisgeul
`signature`	Raon soidhnidh (duine a’ soidhnigeadh a-mhàin)
`auto sign`	Raon soidhnidh fèin-ghluasadach (duine a’ cur a-mach a-mhàin)
`text`	Input teacsa saor
`signing date`	Ceann-latha lìonadh fèin-ghluasadach aig àm soidhnidh (duine a’ soidhnigeadh a-mhàin)
`date`	Raon taghadh ceann-latha
`email`	Input post-d
`initials`	Raon litrichean-toisich
`number`	Input àireamhach
`dropdown`	Taghadh liosta-sìos
`checkbox`	Bogsa-fàgail
`regex`	Input le dearbhadh regex (duine a’ soidhnigeadh a-mhàin)
`image`	Luchdachadh ìomhaigh (duine a’ soidhnigeadh a-mhàin)
`file`	Luchdachadh faidhle (duine a’ soidhnigeadh a-mhàin)
`drawn`	Raon tarraing/sàmhach (duine a’ soidhnigeadh a-mhàin)

Recipients

Mìnich luchd-faighinn sgrìobhainnean ann an cruth JSON.

'S e na nìthean riatanach airson gach neach-faighinn firstname, lastname, email agus signerIndex;

Gu roghnach faodaidh tu an dreuchd agus àireamh fòn an neach-faighinn a chur seachad. Bidh fàgail a-mach dreuchd a’ ciallachadh gum bi an neach-faighinn air a làimhseachadh mar neach-soidhnidh.

Faodaidh tu a’ dreuchd "WITNESS" no "APPROVER" a chur seachad. Airson an dreuchd "WITNESS" cuir 100 ris an àireamh signerIndex aca. Mar eisimpleir ma dh’fheumas tu fianaisiche airson neach-soidhnidh 2 (signerIndex: 2), dèan am 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>

Custom Buttons with Slots

Cuir putanan gnàthaichte ris a’ bhàr innealan a’ cleachdadh slots. 'S dòcha gun cleachd thu iad seo gus an gnìomh a chur dheth no an sgrìobhainn a chuir air adhart.

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

Event Handling

Èist ri tachartasan pàirt gus atharrachaidhean a leantainn:

const editor = document.querySelector('ls-document-viewer');

editor.addEventListener('update', (event) => {
  console.log('Template changed:', event.detail);
});

Faodaidh tu sùil a chumail a bheil templaidean air a dhol gu dligheach no mì-dligheach a’ cleachdadh an tachartais validate.

const editor = document.querySelector('ls-document-viewer');

editor.addEventListener('validate', (event) => {
  console.log('Template validation changed:', event.detail.valid);
});

React Event Handling Example

A’ cleachdadh tachartas ann an react bidh ro-ràdh air leis a’ phiobair on<EventName> aithnichte.

<LsDocumentViewer
  onUpdate={(event) => {
    console.log('Template changed:', event.detail);
  }}
  ...
/>

Event Types

`update` event

Air a losgadh nuair a thèid templaidean sgrìobhainn atharrachadh, mar eisimpleir le bhith a’ cur ris no a’ toirt air falbh raointean. Tha e a’ toirt seachad chan e a-mhàin an tachartas a chuir e air bhog ach cuideachd an stàit ùraichte den nithean templaidean mar JSON.

`validate` event

Air a losgadh nuair a thèid templaidean sgrìobhainn atharrachadh, seallas a’ phrìomh phuing valid ann an mion-fhiosrachadh a bheil an templaidean air a thighinn gu dligheach no mì-dligheach.

`selectFields` event

Air a losgadh nuair a thèid raon a thaghadh anns an deasaiche.

`addParticipant` event

Air a losgadh nuair a thèid dreuchd com-pàirtiche a chur ris an templaidean.

Complete Example

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

Faodaidh tu an glao Send GraphQL client-side a chleachdadh ma tha thu a’ cleachdadh an token SRP JWT, ach ma dh’fheumas tu cleachdadh taobh an t-seirbheir le d’ Iuchair API le GraphQL no REST.

Send mutation — cuir sgrìobhainn singilte
Send Input Schema — iomradh air a’ chlàr-inntinn slàn
REST Send - iomradh air cuir sgrìobhainn REST

Lùbadh Duilgheadasan

Ma bheir thu aghaidh air duilgheadasan leis a’ phàirt, dèan cinnteach gu bheil:

faodaidh tu ruigsinneachd fhaighinn no gu bheil thu air raon stòraidh sgrìobhainn a chuir air liosta gheal aig https://s3.amazonaws.com/*

Taic Briogais

Tha am pàirt a’ cleachdadh inbhean lìn ùra agus tha taic aige ann an:

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

Goireasan

GraphQL Integration Guide — mar a cheanglas tu am brabhsair ris an API GraphQL airson cur air adhart
GraphQL API Documentation
NPM Package
React Package
Support

A’ Faighinn Cuidich

Airson taic theicnigeach no ceistean mu amalachadh, cuir fios don sgioba taic Legalesign no tadhal air an API documentation.

Cuir Amalaichte Am Brabhsair Sgrìobhainn Legalesign A-steach don Làrach-lìn agad

Installation

NPM Installation

For React Projects

Basic Integration

HTML/JavaScript

Authentication - Faigh airgead-glèidhidh

React Integration

Required Attributes

token

templateid

Widget Modes

Editor Mode

Compose Mode

Clone

No Luchdaich Suas

Cuir am brabhsair a-steach

Preview Mode

Advanced Configuration

Filter Toolbox

Recipients

Custom Buttons with Slots

Event Handling

React Event Handling Example

Event Types

`update` event

`validate` event

`selectFields` event

`addParticipant` event

Complete Example

Lùbadh Duilgheadasan

Taic Briogais

Goireasan

A’ Faighinn Cuidich

Export This Article

Installation​

NPM Installation​

For React Projects​

Basic Integration​

HTML/JavaScript​

Authentication - Faigh airgead-glèidhidh​

React Integration​

Required Attributes​

token​

templateid​

Widget Modes​

Editor Mode​

Compose Mode​

Clone​

No Luchdaich Suas​

Cuir am brabhsair a-steach​

Preview Mode​

Advanced Configuration​

Filter Toolbox​

Recipients​

Custom Buttons with Slots​

Event Handling​

React Event Handling Example​

Event Types​

update event​

validate event​

selectFields event​

addParticipant event​

Complete Example​

Lùbadh Duilgheadasan

Taic Briogais​

Goireasan​

A’ Faighinn Cuidich​

Export This Article

Installation

NPM Installation

For React Projects

Basic Integration

HTML/JavaScript

Authentication - Faigh airgead-glèidhidh

React Integration

Required Attributes

token

templateid

Widget Modes

Editor Mode

Compose Mode

Clone

No Luchdaich Suas

Cuir am brabhsair a-steach

Preview Mode

Advanced Configuration

Filter Toolbox

Recipients

Custom Buttons with Slots

Event Handling

React Event Handling Example

Event Types

`update` event

`validate` event

`selectFields` event

`addParticipant` event

Complete Example

Taic Briogais

Goireasan

A’ Faighinn Cuidich