Cumaisc Fionnra Legalesign le Suíomh Gréasáin

leide

Is féidir leat an comhad seo a fheiceáil i bhfeidhm mar Seol Tapa i Console.

Is comhpháirt gréasáin neodrach ardáin é Fionnra Doiciméad Legalesign a ligeann duit teimpléid a eagarthóireacht, a réamh-amharc agus a shaincheapadh le haghaidh sínithe doiciméid. Oibríonn sé go réidh i HTML le JavaScript, React, Vue, Angular, nó aon fráma oibre gréasáin.

Tá an chomhpháirt plug and play seo deartha ionas gur féidir leat codanna lárnacha den chruthú doiciméid a chomhtháthú i do chórais inmheánacha, amhail CRM nó feidhmchlár líne gnó.

Cé go bhféadann do chóras comhpháirteanna HTML a léiriú agus a thacú, is féidir leat an Fionnra Doiciméad a úsáid.

Má theastaíonn cabhair bhreise uait chun an Fionnra Doiciméad a chomhtháthú i do stór teicniúil, déan teagmháil le dár ndeasc tacaíochta.

Is féidir leat na widgets móra seo a úsáid le comhtháthuithe REST/GraphQL API chun próisis sínithe doiciméid réidh a chur ar fáil do d’fhoireann agus do chustaiméirí.

Suiteáil

Suiteáil NPM

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

Do Thionscadail React

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

Comhtháthú Bunúsach

HTML/JavaScript

Is féidir an leagan HTML/Javascript den chomhpháirt seo a úsáid le haon stór forbartha, amhail PHP, ASP .Net etc. Is féidir leat an nascú go díreach leis an gcomhpháirt ó npm má ní cheadaíonn do thimpeallacht é a shuiteáil. Is féidir leat triail a bhaint as leathanach taispeána ón stór samplach anseo [https://github.com/legalesign/ls-viewer-demo].

Cuir na scripteanna comhpháirte isteach i do HTML:

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

Fíordheimhniú - Faigh ticéad

Beidh ort cód taobh freastalaí a úsáid chun YOUR_AUTH_TOKEN a fháil. Tá trí rogha ann:

SRP JWT go díreach — Má úsáideann do chúl-córas sínithe SRP cheana féin, pasáil an ticéad rochtana JWT go díreach chuig an widget.
GraphQL generateComponentToken — Glaoigh an athrú le do eochair API nó JWT SRP chun ticéad comhpháirt ghearrshaolach scóipthe a mhúnlú.
REST API — Glaoigh GET /templatepdf/{pdfId}/component-token/ le do eochair API.

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

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

Pasáil an token a fhaightear ar ais (nó do JWT SRP) chuig an widget. Féach Údarás an Widget le haghaidh tuilleadh sonraí faoi roghanna ticéad.

Comhtháthú React

Tá leagan den chomhpháirt déanta againn freisin a chomhtháthaíonn go díreach le frámaí React.

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

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

Tréithe Riachtanacha

token

Do thicéad slándála don fhíordheimhniú. Is féidir leis a bheith ina thicéad rochtana SRP JWT nó ina thicéad comhpháirt ghearrshaolach ó generateComponentToken. Féach Údarás an Widget don sreabhadh slán ticéad.

token="eyJraWQiOiJBTkJIeT..."

templateid

ID API an teimpléid atá uait a chur i láthair do na húsáideoirí. Is féidir é seo a fháil trí fhéachaint ar an URL nuair atá tú ag eagarthóireacht an teimpléid sa t-iarratas Gréasáin.

templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"

Mód Eagarthóireachta

Cruthú teimpléid iomlán le gnéithe agus eagarthóireacht leis na huirlisí uile atá ar fáil. Tá sé seo beartaithe do shruthanna oibre ina mbíonn teimpléad atá an-inúsáidte le róil úsáideach. Má tá sé i do chuspóir an doiciméad a úsáid uair amháin amháin (b’fhéidir go bhfuil do chórais ghiniúna doiciméad líonta cheana féin le sonraí an chliaint) ba mhaith leat smaoineamh ar mhód compose ina ionad.

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

Mód Comhdhéanta

Is modh é seo ina bhfuil béim ar an "faighteoir ar dtús" chun an taithí úsáideora a shimpliú. Sa t-Iarratas Gréasáin Legalesign is é seo an fheidhm "Seol Tapa".

Cuir do lucht fáilte roimh na "faighteoirí" sa tréith 'recipients' agus is féidir leis an úsáideoir a sínithe agus a réimsí foirm a chur go tapa, sula seoltar. Oireann sé do chliaint chomhtháite ina bhfuil na faighteoirí sainithe cheana féin.

Is é an sreabhadh oibre tipiciúil ná teimpléad a chóipeáil nó a uaslódáil mar PDF, ansin an fionnra a chur isteach áit ar féidir leis an úsáideoir síniú agus réimsí foirm a chur leis, ansin cnaipe a thairiscint chun an doiciméad a sheoladh.

Cóipeáil

Déan cóip den teimpléad atá ann cheana ag úsáid an athraithe 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;

Nó Uaslódáil

Cruthaigh teimpléad ansin uaslódáil é chuig an uploadUrl a sholáthraítear. Úsáid teideal [deleted] mura dteastaíonn uait an PDF a choinneáil i do leabharlann. Scriosfar é sin laistigh de 24 uair an chloig ina dhiaidh sin. Mura bhfuil, úsáid aon teideal is mian leat:

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;

Anois CUIRT do chomhad chuig an uploadUrl. Caithfidh cineál ábhair a bheith application/pdf.

Cuir an fionnra isteach

Is é 'recipients' an príomhtreith. Beidh níos mó sonraí uait maidir le ceadóirí nó finnéithe - le haghaidh tuilleadh eolais féach Faighteoirí.

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

Déantar rudaí seo go huathoibríoch i mód compose:

Aithníonn sé faighteoirí réamh-ginte
Cúlaithe an seoltóir ón liosta anuas
Cúlaithe roghanna doiciméid
Taispeánann sé réimsí riachtanacha de réir réamhshocraithe
Baintear an seoltóir agus réimsí an tseoltaí as an eagarthóir
Spreagann sé roghnú tapa na réimsí riachtanacha do gach faighteoir

Mód Réamh-amhairc

Réamh-amharc cabhrach ar an doiciméad a léiríonn an doiciméad le gach réimse reatha agus cuireann sé ar chumas an úsáideora brabhsáil trí leathanaigh.

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

Déantar rudaí seo go huathoibríoch i mód réamh-amhairc:

Cúlaithe an barra uirlisí
Cúlaithe roghanna doiciméid
Cúlaithe bosca uirlisí
Déanann sé rannpháirtithe agus réimsí a léamh-amach amháin

Cumraíocht Chasta

Scagaire Bosca Uirlisí

Srian a chur ar chineálacha réimsí ar fáil trí luachanna scartha le píopa. Mura gcuirtear luach ar fáil, glactar leis go mbeidh an bosca uirlisí neamhscagtha agus go mbeidh gach rogha ar fáil.

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

Luachanna scagaire atá ar fáil:

Luach	Cur Síos
`signature`	Réimse síniú (dó amháin an síntí)
`auto sign`	Réimse sínithe uathoibríoch (dó amháin an seoltóir)
`text`	Ionchur téacs saor
`signing date`	Dáta líonta go huathoibríoch ag am na síntí (dó amháin an síntí)
`date`	Réimse roghnóra dáta
`email`	Ionchur ríomhphoist
`initials`	Réimse tosaíochtaí
`number`	Ionchur uimhriúil
`dropdown`	Roghnóir liosta anuas
`checkbox`	Bosca seiceála
`regex`	Ionchur bailíochtaithe ag regex (dó amháin an síntí)
`image`	Uaslódáil íomhá (dó amháin an síntí)
`file`	Uaslódáil comhaid (dó amháin an síntí)
`drawn`	Réimse tarraingthe/saorhand (dó amháin an síntí)

Faighteoirí

Sainaithin faighteoirí doiciméad i bhformáid JSON.

Is iad na heilimintí riachtanacha do gach faighteoir ná firstname, lastname, email agus signerIndex;

Is roghnach is féidir leat an ról agus uimhir theileafóin a chur ar fáil do gach faighteoir. Mura sonraítear ról, meastar go mbeidh an faighteoir ina síntí.

Is féidir leat an ról "WITNESS" nó "APPROVER" a chur. Do ról "WITNESS" cuir 100 leis an uimhir signerIndex dá síntí. Mar shampla, má theastaíonn finné don síntí 2 (signerIndex: 2), déan an WITNESS signerIndex a bheith: 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>

Cnaipí Réamhshocraithe le Slots

Cuir cnaipí saincheaptha leis an mbosca uirlisí ag úsáid slatanna. Is dócha go n-úsáidfidh tú iad seo chun nó nó an gníomh a chur ar ceal nó an doiciméad a sheoladh.

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

Láimhseáil Imeachtaí

Éist le himeachtaí comhpháirte chun athruithe a rianú:

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

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

Is féidir leat rianú a dhéanamh an bhfuil teimpléad bailí nó neamhbailí ag éirí leis an imeacht validate.

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

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

Sampla Láimhseáil Imeachta React

Úsáid imeacht i react trí é a chur leis an réamhfhocal eolach on<EventName>.

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

Cineálacha Imeachtaí

Imeacht `update`

Scaoiltear nuair atá an teimpléad doiciméid athraithe, amhail réimsí a chur leis nó a bhaint. Cuireann sé ar fáil ní hamháin an imeacht a chuir sin faoi deara ach freisin staid athraithe an teimpléid mar JSON.

Imeacht `validate`

Scaoiltear nuair atá an teimpléad doiciméid athraithe, léiríonn an tréith valid sa mhionsonra an bhfuil an teimpléad bailí nó neamhbailí.

Imeacht `selectFields`

Scaoiltear nuair a roghnaítear réimse san eagarthóir.

Imeacht `addParticipant`

Scaoiltear nuair a chuirtear ról rannpháirtí leis an teimpléad.

Sampla Iomlán

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

Is féidir leat an mutation seolta GraphQL a úsáid taobh cliant má tá tú ag úsáid an ticéad JWT SRP, ach murar sin ar an taobh freastalaí le do Eochair API ag baint úsáide as an gcomhéadan GraphQL nó REST.

Send mutation — doiciméad aonair a sheoladh
Send Input Schema — tagairt iomlán ionchuir
REST Send - tagairt seolta doiciméid REST

Fadhbanna a Réiteach

Má bhíonn fadhbanna agat leis an gcomhpháirt, déan cinnte go:

is féidir leat rochtain a fháil nó go bhfuil an fearann stórála doiciméad ar liosta bán agat ag https://s3.amazonaws.com/*

Tacaíocht Brabhsálaí

Úsáideann an comhpháirt caighdeáin nua-aimseartha gréasáin agus tacaíonn sé le:

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

Acmhainní

Treoir Idirghníomhaithe GraphQL — conas an fionnra a nascadh leis an API GraphQL le haghaidh seolta
Doiciméadú API GraphQL
Pacáiste NPM
Pacáiste React
Tacaíocht

Ag Faighint Cabhair

Le haghaidh tacaíochta teicniúla nó ceisteanna faoi chomhtháthú, déan teagmháil le foireann tacaíochta Legalesign nó tabhair cuairt ar an doiciméadú API.

Cumaisc Fionnra Legalesign le Suíomh Gréasáin

Suiteáil

Suiteáil NPM

Do Thionscadail React

Comhtháthú Bunúsach

HTML/JavaScript

Fíordheimhniú - Faigh ticéad

Comhtháthú React

Tréithe Riachtanacha

token

templateid

Móidí an Widget

Mód Eagarthóireachta

Mód Comhdhéanta

Cóipeáil

Nó Uaslódáil

Cuir an fionnra isteach

Mód Réamh-amhairc

Cumraíocht Chasta

Scagaire Bosca Uirlisí

Faighteoirí

Cnaipí Réamhshocraithe le Slots

Láimhseáil Imeachtaí

Sampla Láimhseáil Imeachta React

Cineálacha Imeachtaí

Imeacht `update`

Imeacht `validate`

Imeacht `selectFields`

Imeacht `addParticipant`

Sampla Iomlán

Fadhbanna a Réiteach

Tacaíocht Brabhsálaí

Acmhainní

Ag Faighint Cabhair

Export This Article

Suiteáil​

Suiteáil NPM​

Do Thionscadail React​

Comhtháthú Bunúsach​

HTML/JavaScript​

Fíordheimhniú - Faigh ticéad​

Comhtháthú React​

Tréithe Riachtanacha​

token​

templateid​

Móidí an Widget​

Mód Eagarthóireachta​

Mód Comhdhéanta​

Cóipeáil​

Nó Uaslódáil​

Cuir an fionnra isteach​

Mód Réamh-amhairc​

Cumraíocht Chasta​

Scagaire Bosca Uirlisí​

Faighteoirí​

Cnaipí Réamhshocraithe le Slots​

Láimhseáil Imeachtaí​

Sampla Láimhseáil Imeachta React​

Cineálacha Imeachtaí​

Imeacht update​

Imeacht validate​

Imeacht selectFields​

Imeacht addParticipant​

Sampla Iomlán​

Fadhbanna a Réiteach

Tacaíocht Brabhsálaí​

Acmhainní​

Ag Faighint Cabhair​

Export This Article

Suiteáil

Suiteáil NPM

Do Thionscadail React

Comhtháthú Bunúsach

HTML/JavaScript

Fíordheimhniú - Faigh ticéad

Comhtháthú React

Tréithe Riachtanacha

token

templateid

Móidí an Widget

Mód Eagarthóireachta

Mód Comhdhéanta

Cóipeáil

Nó Uaslódáil

Cuir an fionnra isteach

Mód Réamh-amhairc

Cumraíocht Chasta

Scagaire Bosca Uirlisí

Faighteoirí

Cnaipí Réamhshocraithe le Slots

Láimhseáil Imeachtaí

Sampla Láimhseáil Imeachta React

Cineálacha Imeachtaí

Imeacht `update`

Imeacht `validate`

Imeacht `selectFields`

Imeacht `addParticipant`

Sampla Iomlán

Tacaíocht Brabhsálaí

Acmhainní

Ag Faighint Cabhair