Cuir an luchd-taisbeanaidh sgrìobhainnean Legalesign ris an làrach-lìn agad

comhairle

Faodaidh tu faicinn mar a bhios am pàirt seo ag obair mar Quick Send anns a’ Console.

Is e pàirt-lìn neo-cheangailte ri àrd-ùrlar a th’ anns an Luchd-taisbeanaidh Sgrìobhainnean Legalesign a leigeas leat molltair a dheasachadh, a shealltainn ro-làimh, agus a ghnàthachadh airson soidhnichean sgrìobhainnean. Air a thogail le StencilJS, bidh e ag obair gu rèidh le JavaScript vanilla, React, Vue, Angular, no frèam-lìn sam bith.

Tha am pàirt plug and play seo air a dhealbhadh gus dhut a bhith comasach air prìomh phàirtean cruthachaidh sgrìobhainn a thoirt a-steach do na siostaman agad fhèin, leithid CRM no tagradh gnìomhachais. Fhad ‘s a chuireas do shiostam taic ri agus a’ taisbeanadh eileamaidean HTML, faodaidh tu an Luchd-taisbeanaidh Sgrìobhainnean a chleachdadh. Ma tha feum agad air tuilleadh cuideachaidh gus an Luchd-taisbeanaidh Sgrìobhainnean a chur a-steach don stac teicnigeach agad, cuir fios thugainn aig an deasg-taic againn. Faodaidh tu na widgets nas motha seo a chleachdadh còmhla ri amalachadh API REST/GraphQL gus pròiseasan soidhnidh sgrìobhainnean gun chrìoch a thoirt do luchd-obrach agus luchd-cleachdaidh.

Stàladh

Stàladh NPM

npm install legalesign-document-viewer

Airson Pròiseactan React

npm install legalesign-document-viewer-react

Amalachadh Bun-sgoile

Vanilla HTML/JavaScript

Faodar an dreach HTML/Javascript den phàirt seo a chleachdadh le stac leasachaidh sam bith, leithid PHP, ASP .Net msaa. Faodaidh tu ceangal a dhèanamh ris a’ phàirt gu dìreach bho npm ma tha do àrainneachd nach leig leis a stàladh. Faodaidh tu feuchainn air duilleag sealladh-beò bhon stòr-dàta eisimpleir an seo [https://github.com/legalesign/ls-document-viewer-example].

Cuir na sgriobtaichean pàirt ris a’ 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>

Feumaidh tu còd taobh an fhrithealaiche a chleachdadh gus am token fhaighinn airson an cunntas a tha thu airson a chleachdadh.

Amalachadh React

Tha dreach againn cuideachd den phàirt a bhios a’ dol an sàs 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"
    />
  );
}

Feartan Riatanach

token

An t-token tèarainteachd agad airson dearbhadh dhuinn. Tha seo a’ dearbhadh do chomharrachadh agus cothrom air a’ mholltair. Faic barrachd sgrìobhainnean mu mar a gheibh thu token gu tèarainte gun a bhith a’ nochdadh do theachdaireachdan, faic na h-eisimpleirean anns an treòrachadh dearbhaidh.

token="eyJraWQiOiJBTkJIeT..."

templateid

An API ID den mholltair a tha thu airson a thaisbeanadh do luchd-cleachdaidh. Faodar seo a lorg gu furasta le bhith a’ coimhead anns an url nuair a tha thu a’ deasachadh am molltair anns an tagradh Console.

templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"

Modh Deasaiche

Cruthachadh agus deasachadh molltair làn-fheart le a h-uile inneal ri fhaighinn. Tha seo air a dhealbhadh airson sruth-obrach far a bheil molltair a ghabhas cleachdadh gu tric le dreuchdan feumail. Ma tha an amas agad dìreach aon uair a chleachdadh do sgrìobhainn (’is dòcha gu bheil an siostam gineadh sgrìobhainn agad air fiosrachadh a’ chliaint a lìonadh mu thràth), b’urrainn dhut beachdachadh air an modh cruthachaidh an àite sin.

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

Modh Cruthachaidh

Modh sìmplidh gus bogsaichean soidhnidh a chur gu sgiobalta ri molltairean a chaidh a chruthachadh ro-làimh. Air leth freagarrach airson luchd-cleachdaidh comh-inntinneach far a bheil luchd-tionndaidh air an sònrachadh mu thràth.

Is e an sruth-obrach aithnichte:

Tha an tagradh agad a’ gineadh PDF
Luchdaich suas e tro API gus molltair a chruthachadh:

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;

Luchdaich suas am faidhle PDF gu S3 a’ cleachdadh ID am molltair
Embedded an neach-taisbeanaidh ann am modh cruthachaidh le mion-fhiosrachadh mu luchd-tionndaidh
Bidh do neach-cleachdaidh a’ cur raointean soidhnidh agus a’ cur an cèill

Airson barrachd fiosrachaidh mu luchd-tionndaidh faic Luchd-tionndaidh.

<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 am modh cruthachaidh gu fèin-obrachail:

A’ lorg luchd-tionndaidh ro-ghnìomhach
A’ falach an neach-taing bhon chlàr-tomhais
A’ falach roghainnean sgrìobhainn
A’ sealltainn raointean riatanach mar àbhaist
A’ toirt air falbh an neach-taing agus na raointean san deasaiche
A’ brosnachadh taghadh luath de na raointean riatanach airson gach neach-tionndaidh

Modh Ro-shealladh

Sealladh sgrìobhainn cuideachail a tha a’ taisbeanadh an sgrìobhainn leis a h-uile raon làithreach agus a leigeas leis an neach-cleachdaidh brobhsadh air feadh nan duilleagan.

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

Bidh am modh cruthachaidh gu fèin-obrachail:

A’ falach a’ bhàr-innealan
A’ falach roghainnean sgrìobhainn
A’ falach a’ bhogsa innealan
A’ dèanamh com-pàirtichean agus raointean leughaidh-a-mhàin

Suidheachadh Adhartach

Bogsa-innealan Filtair

Cuingealaich seòrsan raointean rim faighinn a’ cleachdadh luachan air an sgaradh le pìoban. Mura bheir thu luach sam bith, thèid gabhail ris nach bi am bogsa-innealan air a shìoltachadh agus gum bi na roghainnean uile rim faighinn.

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

ceann-uidhe

Ceann-uidhe an API GraphQL agad, ma chaidh ceann-uidhe sònraichte do neach-ceannach a thoirt dhut.

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

Luchd-tionndaidh

Mìnich luchd-tionndaidh sgrìobhainn ann am fòrm JSON. Thoir fa-near gu bheil eileamaidean riatanach airson neach-tionndaidh nam b’ e firstname, lastname, email agus signerIndex; gu roghainneil faodaidh tu cuideachd an dreuchd agus àireamh fòn a chur seachad airson gach neach-tionndaidh. Tha bhith a’ leigeil seachad dreuchd a’ ciallachadh gum bi an neach-tionndaidh air a làimhseachadh mar neach-soidhne sònraichte, gus seo atharrachadh faodaidh tu dreuchd: "WITNESS" a chur seachad agus cuir a-steach clàr-soidhnidh sònraichte airson sealltainn cò dha a tha am pàrant aca, mar eisimpleir ma bha thu airson neach-fianais a thoirt do neach-soidhne 2, bhiodh aig an neach-fianais sin signerIndex de 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>

Putanan Gnàthaichte le Slots

Cuir putanan gnàthaichte ris a’ bhàr-innealan a’ cleachdadh 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>

Làimhseachadh Tachartasan

È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 molltair air a dhol dligheach no neo-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);
});

Eisimpleir Làimhseachaidh Tachartasan React

Le bhith a’ cleachdadh tachartas ann an react, bidh e air a ro-ainmeachadh leis a’ chruth on<EventName> ris an robh fios agad.

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

Seòrsan Tachartasan

Tachartas `update`

Air a losgadh nuair a thèid an molltair sgrìobhainn atharrachadh, leithid cuir a-steach no toirt air falbh raointean. Tha e a’ toirt seachad chan ann a-mhàin an tachartas a thàinig às ach cuideachd staid ùraichte an inneil mar JSON.

Tachartas `validate`

Air a losgadh nuair a thèid an molltair sgrìobhainn atharrachadh, tha an seilbh valid anns an fhiosrachadh a’ sealltainn a bheil am molltair dligheach no neo-dligheach air a thighinn.

Tachartas `selectFields`

Air a losgadh nuair a thèid raon a thaghadh san deasaiche.

Tachartas `addParticipant`

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

Eisimpleir Coileanta

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

Fuasgladh Duilgheadasan

Ma tha duilgheadasan agad leis a’ phàirt, dèan cinnteach gu bheil:

faodaidh tu faighinn gu no gu bheil an raon stòraidh sgrìobhainnean agad air a chlàradh geal aig https://s3.amazonaws.com/*

Taic bhrabhsair

Bidh am pàirt a’ cleachdadh inbhean lìn ùra agus tha e a’ toirt taic do:

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

Goireasan

Treòrachadh Amalachaidh GraphQL — mar a cheanglas tu an neach-taisbeanaidh ris an API GraphQL airson cur air adhart
Sgrìobhainnean API GraphQL
Pacaid NPM
Pacaid React
Taic

A’ Faighinn Còiricheas

Airson taic theicnigeach no ceistean mu amalachadh, cuir fios gu sgioba taic Legalesign no tadhal air an sgrìobhainnean API.

Cuir an luchd-taisbeanaidh sgrìobhainnean Legalesign ris an làrach-lìn agad

Stàladh

Stàladh NPM

Airson Pròiseactan React

Amalachadh Bun-sgoile

Vanilla HTML/JavaScript

Amalachadh React

Feartan Riatanach

token

templateid

Modhan Widget

Modh Deasaiche

Modh Cruthachaidh

Modh Ro-shealladh

Suidheachadh Adhartach

Bogsa-innealan Filtair

ceann-uidhe

Luchd-tionndaidh

Putanan Gnàthaichte le Slots

Làimhseachadh Tachartasan

Eisimpleir Làimhseachaidh Tachartasan React

Seòrsan Tachartasan

Tachartas `update`

Tachartas `validate`

Tachartas `selectFields`

Tachartas `addParticipant`

Eisimpleir Coileanta

Fuasgladh Duilgheadasan

Taic bhrabhsair

Goireasan

A’ Faighinn Còiricheas

Export This Article

Stàladh​

Stàladh NPM​

Airson Pròiseactan React​

Amalachadh Bun-sgoile​

Vanilla HTML/JavaScript​

Amalachadh React​

Feartan Riatanach​

token​

templateid​

Modhan Widget​

Modh Deasaiche​

Modh Cruthachaidh​

Modh Ro-shealladh​

Suidheachadh Adhartach​

Bogsa-innealan Filtair​

ceann-uidhe​

Luchd-tionndaidh​

Putanan Gnàthaichte le Slots​

Làimhseachadh Tachartasan​

Eisimpleir Làimhseachaidh Tachartasan React​

Seòrsan Tachartasan​

Tachartas update​

Tachartas validate​

Tachartas selectFields​

Tachartas addParticipant​

Eisimpleir Coileanta​

Fuasgladh Duilgheadasan

Taic bhrabhsair​

Goireasan​

A’ Faighinn Còiricheas​

Export This Article

Stàladh

Stàladh NPM

Airson Pròiseactan React

Amalachadh Bun-sgoile

Vanilla HTML/JavaScript

Amalachadh React

Feartan Riatanach

token

templateid

Modhan Widget

Modh Deasaiche

Modh Cruthachaidh

Modh Ro-shealladh

Suidheachadh Adhartach

Bogsa-innealan Filtair

ceann-uidhe

Luchd-tionndaidh

Putanan Gnàthaichte le Slots

Làimhseachadh Tachartasan

Eisimpleir Làimhseachaidh Tachartasan React

Seòrsan Tachartasan

Tachartas `update`

Tachartas `validate`

Tachartas `selectFields`

Tachartas `addParticipant`

Eisimpleir Coileanta

Taic bhrabhsair

Goireasan

A’ Faighinn Còiricheas