Integreiddio Gwylwr Dogfennau Legalesign i’ch Gwefan

cyngor

Gallwch weld y cydran hon mewn gweithrediad fel Anfon Cyflym yn y Console.

Mae Gwylwr Dogfennau Legalesign yn gydran we annibynnol ar blatfform sy'n eich galluogi i olygu, rhagweld, a phethau templedi ar gyfer llofnodi dogfennau. Wedi'i adeiladu gyda StencilJS, mae'n gweithio'n ddi-dor gyda JavaScript vanila, React, Vue, Angular, neu unrhyw fframwaith gwe.

Mae'r cydran plug and play hon wedi'i dylunio fel y gallwch integreiddio rhannau allweddol o greu dogfennau yn eich systemau mewnol, megis system CRM neu gymhwysiad llinell busnes. Cyn belled â bod eich system yn gallu rendro ac yn cefnogi cydrannau HTML, gallwch ddefnyddio'r Gwylwr Dogfennau. Os ydych angen cymorth ychwanegol i integreiddio'r Gwylwr Dogfennau i'ch stac technegol cysylltwch â’n bwrdd cymorth. Gallwch ddefnyddio'r widgets mwy hyn gyda integreiddiadau API REST/GraphQL i ddarparu prosesau llofnodi dogfennau di-dor i’ch staff a’ch cwsmeriaid.

Gosod

Gosod NPM

npm install legalesign-document-viewer

Ar gyfer Prosiectau React

npm install legalesign-document-viewer-react

Integreiddio Sylfaenol

HTML/JavaScript Vanila

Gellir defnyddio fersiwn HTML/JavaScript y cydran hon gyda unrhyw stac datblygu, megis PHP, ASP .Net, ac ati. Gallwch gysylltu â’r gydran yn uniongyrchol o npm os nad yw eich amgylchedd yn caniatáu i’w gosod. Gallwch roi cynnig ar dudalen dangosfa o’r achos defnydd yma [https://github.com/legalesign/ls-document-viewer-example].

Ychwanegwch y sgriptiau cydran 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>

Bydd angen i chi ddefnyddio cod ar y gweinydd i gael y token ar gyfer y cyfrif rydych eisiau ei ddefnyddio.

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

token

Eich tocyn diogelwch ar gyfer dilysu. Mae hyn yn gwirio eich hunaniaeth a’ch mynediad i'r templed. I weld mwy o ddogfennaeth am sut i gael tocyn yn ddiogel heb ddangos eich manylion mewngofnodi, edrychwch ar y enghreifftiau yn y canllaw dilysu

token="eyJraWQiOiJBTkJIeT..."

templateid

Yr API ID o'r templed rydych eisiau ei gyflwyno i ddefnyddwyr. Gallwch ddod o hyd i hwn yn hawdd drwy edrych yn y URL pan rydych yn golygu’r templed yn yr ap Console.

templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"

Modd Golygydd

Creu a golygu templedi gyda nodweddion llawn a’r holl offer sydd ar gael. Mae hyn wedi’i fwriadu ar gyfer llifoedd gwaith lle mae templed ailddefnyddadwy iawn gyda rolau yn ddefnyddiol. Os mai’r bwriad yw defnyddio’ch dogfen unwaith yn unig (e.e. mae eich system creu dogfen eisoes wedi llenwi’r holl wybodaeth cwsmer) efallai yr hoffech ystyried y modd compose yn lle hynny.

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

Modd Cyfansoddi

Modd symleiddiedig i ychwanegu blychau llofnodi’n gyflym i dempledau sydd wedi’u cynhyrchu ymlaen llaw. Yn berffaith ar gyfer cleientiaid integredig lle mae derbynwyr eisoes wedi’u diffinio.

Y llif gwaith arferol yw:

Mae eich cais yn creu PDF
Llwythwch ef i fyny drwy’r API i greu templed:

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: "${groupId}"
          title: "${documentTitle}"
        })
      }
    `
  })
});
const { data } = await response.json();
const templateId = data.createTemplate;

Llwythwch y ffeil PDF i S3 gan ddefnyddio’r ID templed
Mewnosodwch y gwylwr mewn modd cyfansoddi gyda manylion derbynwyr
Mae eich defnyddiwr yn ychwanegu maes llofnodi ac yn anfon

Am fwy o wybodaeth am dderbynwyr gweler Derbynwyr.

<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 cyfansoddi yn awtomatig yn:

Canfod derbynwyr a gynhyrchwyd ymlaen llaw
Cuddio’r anfonwr o’r rhestr ddisgyn
Cuddio opsiynau dogfen
Dangos meysydd gofynnol fel diofyn
Tynnu anfonwr a meysydd anfonwr o’r golygydd
Hybu dewis cyflym o’r meysydd gofynnol i bob derbynnydd

Modd Rhagolwg

Rhagolwg helpgar o’r ddogfen sy’n dangos y ddogfen gyda’r holl feysydd cyfredol ac yn caniatáu i’r defnyddiwr bori drwy dudalennau.

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

Mae modd cyfansoddi yn awtomatig yn:

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

Cyfluniad Uwch

Blwch Offer Hidlo

Cyfyngu mathau maes sydd ar gael gan ddefnyddio gwerthoedd wedi’u gwahanu gan bibell. Os na ddarperir gwerth yna tybir y bydd y blwch offer yn ddi-hid ac mae’r holl opsiynau ar gael.

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

endpoint

Eich pwynt pen API GraphQL, os rhoddwyd pwynt pen benodol i gwsmer.

endpoint="https://your-api.appsync-api.region.amazonaws.com/graphql"

Derbynwyr

Diffinio derbynwyr dogfen mewn fformat JSON. Nodwch fod elfennau angenrheidiol derbynnydd yn cynnwys firstname, lastname, email a signerIndex; yn opsiynol gallwch hefyd basio rôl a rhif ffôn pob derbynnydd. Mae hepgori rôl yn golygu y bydd y derbynnydd yn cael ei drin fel llofnodi gwahanol, i newid hyn gallwch basio rôl: "WITNESS" a chynnwys mynegai llofnodi arbennig i ddangos pwy yw eu rhiant, felly er enghraifft os hoffech gynnwys tyst ar gyfer llofnodi 2, byddai gan y dyst hynny signerIndex o 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 botymau custom i’r bar offer gan ddefnyddio slots:

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

Trin Digwyddiadau

Gwrandewch ar ddigwyddiadau cydran i olrhain 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 y digwyddiad validate.

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

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

Enghraifft Trin Digwyddiadau React

Wrth ddefnyddio digwyddiad mewn react mae’n rhagddodi on<EventName> cyfarwydd iddo.

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

Mathau o Ddigwyddiadau

Digwyddiad `update`

Yn cael ei danio pan gaiff templed y ddogfen ei newid, megis ychwanegu neu dynnu meysydd. Yn darparu nid yn unig y digwyddiad a achosodd hyn ond hefyd y cyflwr wedi’i ddiweddaru o’r gwrthrych templed fel JSON.

Digwyddiad `validate`

Yn cael ei danio pan gaiff templed y ddogfen ei newid, mae’r eiddo valid yn y manylion yn dangos a yw’r templed wedi dod yn ddilys neu annilys.

Digwyddiad `selectFields`

Yn cael ei danio pan fo maes yn cael ei ddewis yn y golygydd.

Digwyddiad `addParticipant`

Yn cael ei danio pan ychwanegir rôl cyfranogwr i’r templed.

Enghraifft Gynhwysfawr

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

Datrys Problemau

Os byddwch yn wynebu problemau gyda’r gydran, gwnewch yn siŵr bod:

gallwch gael mynediad neu wedi rhestru’r parth storio dogfennau yn y rhestr wen ar https://s3.amazonaws.com/*

Cefnogaeth Porwr

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

Chrome/Edge (y diweddaraf)
Firefox (y diweddaraf)
Safari (y diweddaraf)
Poriwyr symudol (Safari iOS, Chrome Symudol)

Adnoddau

Canllaw Integreiddio GraphQL — sut i gysylltu’r gwylwr gyda’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 ymwelwch â’r dogfennaeth API.

Integreiddio Gwylwr Dogfennau Legalesign i’ch Gwefan

Gosod

Gosod NPM

Ar gyfer Prosiectau React

Integreiddio Sylfaenol

HTML/JavaScript Vanila

Integreiddio React

Nodweddion Gorfodol

token

templateid

Moddau Widget

Modd Golygydd

Modd Cyfansoddi

Modd Rhagolwg

Cyfluniad Uwch

Blwch Offer Hidlo

endpoint

Derbynwyr

Botymau Custom gyda Slots

Trin Digwyddiadau

Enghraifft Trin Digwyddiadau React

Mathau o Ddigwyddiadau

Digwyddiad `update`

Digwyddiad `validate`

Digwyddiad `selectFields`

Digwyddiad `addParticipant`

Enghraifft Gynhwysfawr

Datrys Problemau

Cefnogaeth Porwr

Adnoddau

Cael Cymorth

Export This Article

Gosod​

Gosod NPM​

Ar gyfer Prosiectau React​

Integreiddio Sylfaenol​

HTML/JavaScript Vanila​

Integreiddio React​

Nodweddion Gorfodol​

token​

templateid​

Moddau Widget​

Modd Golygydd​

Modd Cyfansoddi​

Modd Rhagolwg​

Cyfluniad Uwch​

Blwch Offer Hidlo​

endpoint​

Derbynwyr​

Botymau Custom gyda Slots​

Trin Digwyddiadau​

Enghraifft Trin Digwyddiadau React​

Mathau o Ddigwyddiadau​

Digwyddiad update​

Digwyddiad validate​

Digwyddiad selectFields​

Digwyddiad addParticipant​

Enghraifft Gynhwysfawr​

Datrys Problemau

Cefnogaeth Porwr​

Adnoddau​

Cael Cymorth​

Export This Article

Gosod

Gosod NPM

Ar gyfer Prosiectau React

Integreiddio Sylfaenol

HTML/JavaScript Vanila

Integreiddio React

Nodweddion Gorfodol

token

templateid

Moddau Widget

Modd Golygydd

Modd Cyfansoddi

Modd Rhagolwg

Cyfluniad Uwch

Blwch Offer Hidlo

endpoint

Derbynwyr

Botymau Custom gyda Slots

Trin Digwyddiadau

Enghraifft Trin Digwyddiadau React

Mathau o Ddigwyddiadau

Digwyddiad `update`

Digwyddiad `validate`

Digwyddiad `selectFields`

Digwyddiad `addParticipant`

Enghraifft Gynhwysfawr

Cefnogaeth Porwr

Adnoddau

Cael Cymorth