Integreiddio Gwylwr Dogfennau Legalesign i’ch Gwefan

cyngor

Gallwch weld y cydran hon ar waith fel Anfon Cyflym yn Console.

Mae Gwylwr Dogfennau Legalesign yn gydran gwe annibynnol ar blatfform sy’n caniatáu i chi olygu, rhagweld, a ffurfweddu templedi ar gyfer llofnodi dogfennau. Mae'n gweithio'n ddi-dor mewn HTML gyda JavaScript, React, Vue, Angular, neu unrhyw fframwaith gwe.

Mae’r gydran plwg a chwarae hon wedi’i dylunio fel y gallwch integreiddio rhannau allweddol o greu dogfennau i’ch systemau mewnol, fel CRM neu gymhwysiad llinell busnes.

Cyn belled â bod eich system yn gallu rendro ac yn cefnogi cydrannau HTML, gallwch ddefnyddio’r Gwylwr Dogfennau.

Os oes angen help ychwanegol arnoch i integreiddio’r Gwylwr Dogfennau i’ch stac technegol, cysylltwch â’n bwrdd cymorth.

Gallwch ddefnyddio’r widgets hyn sydd yn fwy gyda integreiddiadau REST/GraphQL API i ddarparu prosesau llofnodi dogfennau di-dor i’ch staff a’ch cwsmeriaid.

Gosod

Gosod NPM

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

Ar gyfer Prosiectau React

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

Integreiddiad Sylfaenol

HTML/JavaScript

Gellir defnyddio fersiwn HTML/Javascript o’r gydran hon gyda unrhyw stac datblygu, megis PHP, ASP .Net ac ati. Gallwch gysylltu â’r gydran yn uniongyrchol o npm os nad yw’ch amgylchedd yn caniatáu ei gosod. Gallwch geisio tudalen ddemonstraeth o’r adran enghreifftiol yma [https://github.com/legalesign/ls-viewer-demo].

Ychwanegwch sgriptiau’r gydran i’ch 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>

Dilysu - Cael tocyn

Bydd angen i chi ddefnyddio cod ar ochr y gweinydd i gael YOUR_AUTH_TOKEN. Mae tri opsiwn:

SRP JWT yn uniongyrchol — Os yw’ch cefndir yn defnyddio dilysu SRP eisoes, pasiwch y tocyn mynediad JWT yn uniongyrchol i’r widget.
GraphQL generateComponentToken — Galwch y newidyn gyda’ch allwedd API neu JWT SRP i greu tocyn gydran byrhoedlog a chynhwysedig.
REST API — Galwch GET /templatepdf/{pdfId}/component-token/ gyda’ch allwedd API.

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

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

Pasio’r token a ddychwelwyd (neu’ch JWT SRP) i’r widget. Ewch i Awdurdodi Widget am fwy o fanylion ar opsiynau tocyn.

Integreiddiad React

Rydym hefyd wedi creu fersiwn o’r gydran sy’n integreiddio’n uniongyrchol gyda fframweithiau React.

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

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

Nodweddion Gofynnol

token

Eich tocyn diogelwch ar gyfer dilysu. Gall hyn fod yn docyn mynediad JWT SRP neu docyn gydran byrhoedlog o generateComponentToken. Gweler Awdurdodi Widget ar gyfer y llif tocyn diogel.

token="eyJraWQiOiJBTkJIeT..."

templateid

ID API y templed yr hoffech ei gyflwyno i ddefnyddwyr. Gallwch ddod o hyd iddo trwy edrych yn y URL pan fyddwch yn golygu’r templed yn y Gwe Ap.

templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"

Modd Golygydd

Creu a golygu templed llawn nodweddion gydag offer ar gael i gyd. Bwriedir hyn ar gyfer llif gwaith lle mae templed ailddefnyddadwy iawn gyda rolau yn ddefnyddiol. Os yw’ch bwriad yw defnyddio eich dogfen unwaith yn unig (efallai bod eich system creu dogfennau eisoes wedi llenwi’r holl wybodaeth cleient) efallai y byddwch am ystyried modd compose yn lle hynny.

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

Modd Compose

Mae’r modd hwn yn ddull ‘derbynnydd-gyntaf’ i symleiddio profiad y defnyddiwr. Yn y Gwe Ap Legalesign, hwn yw’r swyddogaeth ‘Anfon Cyflym’.

Ychwanegwch eich derbynnwyr i’r nodwedd ‘recipient’ a gall eich defnyddiwr leoli eu llofnodion a meysydd ffurflen yn gyflym cyn anfon. Dyluniwyd hyn ar gyfer cleientiaid integredig lle mae derbynnwyr eisoes wedi’u diffinio.

Y llif gwaith nodweddiadol yw clone neu lwytho i fyny PDF, yna mewnblannu’r gwylwr lle gall y defnyddiwr ychwanegu meysydd llofnod a ffurflen, yna cynnig botwm i anfon y ddogfen.

Clone

Clone templed presennol gan ddefnyddio’r newidyn 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;

Neu Lwytho i fyny

Creu templed ac yna ei lwytho i fyny i’r uploadUrl a ddarperir. Defnyddiwch y teitl [deleted] os nad ydych eisiau’r pdf yn eich llyfrgell. Fe gaiff ei ddileu yn ystod y 24 awr nesaf. Fel arall defnyddiwch unrhyw deitl o’ch dewis:

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;

Nawr RHOI eich ffeil i’r uploadUrl. Rhaid i’r math cynnwys fod yn application/pdf.

Mewnblannu gwylwr

Y nodwedd allweddol yw ‘recipients’. Bydd angen manylion ychwanegol arnoch ar gyfer cymeradwyaethau neu dystion - am ragor o wybodaeth gweler Derbynnwyr.

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

Mae modd compose yn awtomatig yn:

Canfod derbynnwyr a gynhyrchwyd ymlaen llaw
Cuddio’r anfonwr o’r gwymplen
Cuddio opsiynau dogfen
Dangos meysydd sydd eu hangen yn ddiofyn
Tynnu’r anfonwr a meysydd anfonwr o’r golygydd
Hyrwyddo dewis cyflym o’r meysydd sydd eu hangen ar gyfer pob derbynnydd

Modd Rhagolwg

Rhagolwg dogfen defnyddiol sy’n dangos y ddogfen gyda’r holl feysydd presennol ac yn caniatáu i’r defnyddiwr bori drwy dudalennau.

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

Mae modd rhagolwg yn awtomatig yn:

Cuddio’r bar offer
Cuddio opsiynau dogfen
Cuddio’r blwch offer
Gwneud cyfranogwyr a meysydd yn ddarllen-sefydlog yn unig

Ffurfweddu Uwch

Hidlo Bocs Offer

Cyfyngu mathau maes ar gael gan ddefnyddio gwerthoedd wedi’u gwahanu gan bibell. Os na ddarperir gwerth yna cymerir y bydd y bocs offer yn ddihidlo ac mae’r holl opsiynau ar gael.

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

Gwerthoedd hidlo ar gael:

Gwerth	Disgrifiad
`signature`	Maes llofnod (ychwanegwr yn unig)
`auto sign`	Maes llofnodi awtomatig (anfonwr yn unig)
`text`	Mewnbwn testun rhydd
`signing date`	Dyddiad a lenwir yn awtomatig ar adeg llofnodi (ychwanegwr yn unig)
`date`	Maes dewisydd dyddiad
`email`	Mewnbwn e-bost
`initials`	Maes cychwynnol
`number`	Mewnbwn rhifol
`dropdown`	Dewislen ddisgynnol
`checkbox`	Blwch ticio
`regex`	Mewnbwn wedi’i ddilysu gan regex (ychwanegwr yn unig)
`image`	Llwytho llun (ychwanegwr yn unig)
`file`	Llwytho ffeil (ychwanegwr yn unig)
`drawn`	Maes wedi’i dynnu/llaw rydd (ychwanegwr yn unig)

Derbynnwyr

Diffinio derbynnwyr dogfen mewn fformat JSON.

Mae’r elfennau gofynnol ar gyfer pob derbynnydd yn cynnwys firstname, lastname, email a signerIndex;

Yn ddewisol gallwch basio’r rôl a’r rhif ffôn ar gyfer pob derbynnydd. Os ydych yn hepgor rôl, caiff y derbynnydd ei drin fel ychwanegwr.

Gallwch basio rôl "WITNESS" neu "APPROVER". Ar gyfer rôl "WITNESS" ychwanegwch 100 i rif signerIndex y llofnodiwr. Er enghraifft os oes angen tyst ar gyfer llofnodiwr 2 (signerIndex: 2), gwnewch y 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>

Botymau Custom gyda Slots

Ychwanegwch fotymau custom i’r bar offer gan ddefnyddio slots. Byddwch fel arfer yn defnyddio’r rhain i ganslo’r weithred neu anfon y ddogfen.

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

Gwrando ar Ddigwyddiadau

Gwrandewch ar ddigwyddiadau cydran i fonitro newidiadau:

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

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

Gallwch olrhain a yw templed wedi dod yn ddilys neu’n annilys gan ddefnyddio’r digwyddiad validate.

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

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

Enghraifft Gwrando ar Ddigwyddiadau React

Defnyddio digwyddiad mewn react yw ei ragflaenu gyda’r fformiwla cyfarwydd on<EventName>.

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

Mathau o Ddigwyddiadau

Digwyddiad `update`

Yn cael ei losgi pan fydd y templed dogfen yn newid, megis ychwanegu neu dynnu meysydd. Yn darparu nid yn unig y digwyddiad a achosodd y newid ond hefyd y statws templed wedi’i ddiweddaru fel JSON.

Digwyddiad `validate`

Yn cael ei losgi pan fydd y templed dogfen yn newid, mae’r nodwedd valid yn y manylion yn dangos a yw’r templed wedi dod yn ddilys neu’n annilys.

Digwyddiad `selectFields`

Yn cael ei losgi pan fydd maes yn cael ei ddewis yn y golygydd.

Digwyddiad `addParticipant`

Yn cael ei losgi pan fydd rôl cyfranogwr yn cael ei ychwanegu i’r templed.

Enghraifft Gwaith Cyflawn

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

Gallwch ddefnyddio newidyn send GraphQL ar ochr cleient os yw’n defnyddio tocyn SRP JWT, ond yn wahanol ar ochr y gweinydd gyda’ch Allwedd API gyda’r rhyngwyneb GraphQL neu REST.

Send mutation — anfon un ddogfen
Send Input Schema — cyfeirnod mewnbwn llawn
REST Send - cyfeirnod anfon REST dogfen

Datrys Problemau

Os byddwch yn wynebu problemau gyda’r gydran, sicrhewch fod:

gallwch gael mynediad neu wedi rhestru gwyn domen storio dogfennau yn https://s3.amazonaws.com/*

Cefnogaeth Porwr

Mae’r gydran yn defnyddio safonau gwe modern ac yn cefnogi:

Chrome/Edge (y diweddaraf)
Firefox (y ddiweddaraf)
Safari (y diweddaraf)
Porwyr symudol (iOS Safari, Chrome Mobile)

Adnoddau

Canllaw Integreiddio GraphQL — sut i gysylltu’r gwylwr i’r API GraphQL ar gyfer anfon
Dogfennaeth API GraphQL
Pecyn NPM
Pecyn React
Cymorth

Cael Cymorth

Am gymorth technegol neu gwestiynau am integreiddio, cysylltwch â thîm cymorth Legalesign neu ewch i’r dogfennaeth API.

Integreiddio Gwylwr Dogfennau Legalesign i’ch Gwefan

Gosod

Gosod NPM

Ar gyfer Prosiectau React

Integreiddiad Sylfaenol

HTML/JavaScript

Dilysu - Cael tocyn

Integreiddiad React

Nodweddion Gofynnol

token

templateid

Moddau Widget

Modd Golygydd

Modd Compose

Clone

Neu Lwytho i fyny

Mewnblannu gwylwr

Modd Rhagolwg

Ffurfweddu Uwch

Hidlo Bocs Offer

Derbynnwyr

Botymau Custom gyda Slots

Gwrando ar Ddigwyddiadau

Enghraifft Gwrando ar Ddigwyddiadau React

Mathau o Ddigwyddiadau

Digwyddiad `update`

Digwyddiad `validate`

Digwyddiad `selectFields`

Digwyddiad `addParticipant`

Enghraifft Gwaith Cyflawn

Datrys Problemau

Cefnogaeth Porwr

Adnoddau

Cael Cymorth

Export This Article

Gosod​

Gosod NPM​

Ar gyfer Prosiectau React​

Integreiddiad Sylfaenol​

HTML/JavaScript​

Dilysu - Cael tocyn​

Integreiddiad React​

Nodweddion Gofynnol​

token​

templateid​

Moddau Widget​

Modd Golygydd​

Modd Compose​

Clone​

Neu Lwytho i fyny​

Mewnblannu gwylwr​

Modd Rhagolwg​

Ffurfweddu Uwch​

Hidlo Bocs Offer​

Derbynnwyr​

Botymau Custom gyda Slots​

Gwrando ar Ddigwyddiadau​

Enghraifft Gwrando ar Ddigwyddiadau React​

Mathau o Ddigwyddiadau​

Digwyddiad update​

Digwyddiad validate​

Digwyddiad selectFields​

Digwyddiad addParticipant​

Enghraifft Gwaith Cyflawn​

Datrys Problemau

Cefnogaeth Porwr​

Adnoddau​

Cael Cymorth​

Export This Article

Gosod

Gosod NPM

Ar gyfer Prosiectau React

Integreiddiad Sylfaenol

HTML/JavaScript

Dilysu - Cael tocyn

Integreiddiad React

Nodweddion Gofynnol

token

templateid

Moddau Widget

Modd Golygydd

Modd Compose

Clone

Neu Lwytho i fyny

Mewnblannu gwylwr

Modd Rhagolwg

Ffurfweddu Uwch

Hidlo Bocs Offer

Derbynnwyr

Botymau Custom gyda Slots

Gwrando ar Ddigwyddiadau

Enghraifft Gwrando ar Ddigwyddiadau React

Mathau o Ddigwyddiadau

Digwyddiad `update`

Digwyddiad `validate`

Digwyddiad `selectFields`

Digwyddiad `addParticipant`

Enghraifft Gwaith Cyflawn

Cefnogaeth Porwr

Adnoddau

Cael Cymorth