Integreiddio Gwylwr Dogfennau Legalesign i’ch Gwefan

cyngor

Gallwch weld y cydran hon yn weithredol fel Anfon Cyflym yn Console.

Mae Gwylwr Dogfennau Legalesign yn gydran gwe annibynnol ar blatfform sy’n eich galluogi i olygu, rhagolwg, a phersonoli templedi ar gyfer arwyddo dogfennau. Wedi’i adeiladu gyda StencilJS, mae’n gweithio’n ddi-dor gyda JavaScript vanilla, React, Vue, Angular, neu unrhyw fframwaith gwe.

Mae’r cydran plygu a chwarae hon wedi’i dylunio fel y gallwch integreiddio rhannau allweddol o greu dogfennau i’ch systemau mewnol, megis CRM neu gymhwysiad llinell busnes. Cyn belled â bod eich system yn gallu rendro a chefnogi cydrannau HTML, gallwch ddefnyddio’r Gwylwr Dogfennau. Os oes arnoch angen cymorth ychwanegol i integreiddio’r Gwylwr Dogfennau i’ch stac technegol cysylltwch â’n desg gymorth. Gallwch ddefnyddio’r widgeti mwy hyn gyda integreiddiadau REST/GraphQL API i ddarparu prosesau arwyddo 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 Vanilla

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

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 ochr gweinydd i gael YOUR_AUTH_TOKEN. Gall y tocyn fod yn SRP JWT neu docyn cydran byrhoedlog a gynhyrchir gyda generateComponentToken. Gweler Awdurdodi Widget.

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 Gofynnol

token

Eich tocyn diogelwch ar gyfer awdurdodi. Mae hyn yn cadarnhau eich hunaniaeth a’ch mynediad i’r templed. Defnyddiwch god ochr gweinydd i ddarparu naill ai SRP JWT neu docyn cydran byrhoedlog. Gweler Awdurdodi Widget am y llif tocyn diogel.

token="eyJraWQiOiJBTkJIeT..."

templateid

ID API y templed rydych am ei gyflwyno i ddefnyddwyr. Gallwch ddod o hyd iddo'n hawdd trwy edrych yn y URL pan rydych yn golygu’r templed yn y cais Console.

templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"

Modd Golygydd

Creu templed llawn nodweddion a golygu gyda’r holl offer sydd ar gael. Bwriedir hyn ar gyfer llif gwaith lle mae templed a gwrthrychau rôl ailddefnyddiol yn fuddiol. 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 dylech ystyried modd compose yn lle hynny.

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

Modd Cyfansoddi

Modd streamlined i ychwanegu blychau llofnodi’n gyflym i dempledi sydd wedi cael eu cynhyrchu ymlaen llaw. Ideol ar gyfer cleientiaid integredig lle mae derbynwyr wedi’u diffinio eisoes.

Y llif gwaith arferol yw:

Mae’ch cais yn cynhyrchu PDF
Ei lwytho 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 ID y templed
Mewnosodwch y gwylwr mewn modd cyfansoddi gyda manylion derbynwyr
Mae eich defnyddiwr yn ychwanegu maes llofnodi ac yn anfon

Am ragor 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’n awtomatig yn:

Canfod derbynwyr a gynhyrchwyd ymlaen llaw
Cuddio’r anfonwr o’r rhestr ostwng
Cuddio opsiynau dogfen
Dangos meysydd angenrheidiol yn ddiofyn
Tynnu’r anfonwr a meysydd anfonwr o’r golygydd
Hybu dewis cyflym o’r meysydd angenrheidiol i bob derbynnydd

Modd Rhagolwg

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

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

Mae modd cyfansoddi’n awtomatig yn:

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

Cyfluniad Uwch

Hidlo Bocs Offer

Cyfyngu’r mathau o feysydd ar gael gan ddefnyddio gwerthoedd wedi’u gwahanu gan bibell. Os na ddarperir gwerth bydd y disgwyl yn bod bod y bocs offer heb ei hidlo a bod pob opsiwn ar gael.

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

endpoint

Eich pwynt diwedd API GraphQL, os ydych wedi cael pwynt diwedd penodol i gwsmer.

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

Derbynwyr

Diffinio derbynwyr dogfen mewn fformat JSON. Nodwch mai’r elfennau angenrheidiol ar gyfer derbynnydd yw’r enw cyntaf, yr enw olaf, e-bost, a signerIndex; yn ddewisol gallwch hefyd anfon rôl a rhif ffôn i bob derbynnydd. Mae dileu rôl yn golygu y bydd y derbynnydd yn cael ei drin fel llofnodwr gwahanol, i newid hyn gallwch anfon role: "WITNESS" a chynnwys mynegai llofnodwr arbennig i ddangos pwy yw eu rhieni, felly er enghraifft os oeddech am gynnwys tyst ar gyfer llofnodwr 2, byddai’r dyst hwnnw’n cael 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 fotymau 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>

Gwrando ar Ddigwyddiadau

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 digwyddiad validate.

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

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

Enghraifft o Lwyfannu Digwyddiadau React

Wrth ddefnyddio digwyddiad mewn React, rhoddir y rhagddodiad gyfarwydd on<EventName>.

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

Mathau o Ddigwyddiadau

Digwyddiad `update`

Caiff ei fwrw pan fydd templed y ddogfen yn newid, fel ychwanegu neu dynnu meysydd. Nid yn unig y digwyddiad sy’n achosi’r newid ond hefyd cyflwr wedi’i ddiweddaru o’r gwrthrych templed fel JSON.

Digwyddiad `validate`

Caiff ei fwrw pan fydd y templed dogfennau yn newid, mae’r eiddo valid yn y manylion yn dangos a yw’r templed wedi dod yn ddilys neu’n annilys.

Digwyddiad `selectFields`

Caiff ei fwrw pan fo maes yn cael ei ddewis yn y golygydd.

Digwyddiad `addParticipant`

Caiff ei fwrw pan fo rôl cyfranogwr yn cael ei hychwanegu i’r templed.

Enghraifft Gwblhau

<!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 profi problemau gyda’r gydran, sicrhewch mai:

gallwch gael mynediad neu bod y parth storio dogfennau wedi’i roi ar y rhestr wyn 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)
Porwyr symudol (iOS Safari, Chrome Mobile)

Adnoddau

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

Integreiddio Gwylwr Dogfennau Legalesign i’ch Gwefan

Gosod

Gosod NPM

Ar gyfer Prosiectau React

Integreiddio Sylfaenol

HTML/JavaScript Vanilla

Integreiddio React

Nodweddion Gofynnol

token

templateid

Moddiau Widget

Modd Golygydd

Modd Cyfansoddi

Modd Rhagolwg

Cyfluniad Uwch

Hidlo Bocs Offer

endpoint

Derbynwyr

Botymau Custom gyda Slots

Gwrando ar Ddigwyddiadau

Enghraifft o Lwyfannu Digwyddiadau React

Mathau o Ddigwyddiadau

Digwyddiad `update`

Digwyddiad `validate`

Digwyddiad `selectFields`

Digwyddiad `addParticipant`

Enghraifft Gwblhau

Datrys Problemau

Cefnogaeth Porwr

Adnoddau

Cael Cymorth

Export This Article

Gosod​

Gosod NPM​

Ar gyfer Prosiectau React​

Integreiddio Sylfaenol​

HTML/JavaScript Vanilla​

Integreiddio React​

Nodweddion Gofynnol​

token​

templateid​

Moddiau Widget​

Modd Golygydd​

Modd Cyfansoddi​

Modd Rhagolwg​

Cyfluniad Uwch​

Hidlo Bocs Offer​

endpoint​

Derbynwyr​

Botymau Custom gyda Slots​

Gwrando ar Ddigwyddiadau​

Enghraifft o Lwyfannu Digwyddiadau React​

Mathau o Ddigwyddiadau​

Digwyddiad update​

Digwyddiad validate​

Digwyddiad selectFields​

Digwyddiad addParticipant​

Enghraifft Gwblhau​

Datrys Problemau

Cefnogaeth Porwr​

Adnoddau​

Cael Cymorth​

Export This Article

Gosod

Gosod NPM

Ar gyfer Prosiectau React

Integreiddio Sylfaenol

HTML/JavaScript Vanilla

Integreiddio React

Nodweddion Gofynnol

token

templateid

Moddiau Widget

Modd Golygydd

Modd Cyfansoddi

Modd Rhagolwg

Cyfluniad Uwch

Hidlo Bocs Offer

endpoint

Derbynwyr

Botymau Custom gyda Slots

Gwrando ar Ddigwyddiadau

Enghraifft o Lwyfannu Digwyddiadau React

Mathau o Ddigwyddiadau

Digwyddiad `update`

Digwyddiad `validate`

Digwyddiad `selectFields`

Digwyddiad `addParticipant`

Enghraifft Gwblhau

Cefnogaeth Porwr

Adnoddau

Cael Cymorth