legalesign-document-viewer 0.4.4 → 0.4.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/readme.md +267 -26
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -1,44 +1,285 @@
|
|
|
1
|
-
#
|
|
2
|
-
This component allows you to edit, preview or customize a Legalesign template in order to
|
|
3
|
-
send a document for signing. It is purely HTML and javascript and platform agnostic.
|
|
1
|
+
# Integrate Legalesign Document Viewer into Your Website
|
|
4
2
|
|
|
5
|
-
|
|
3
|
+
The Legalesign Document Viewer is a platform-agnostic web component that allows you to edit, preview, and customize templates for document signing. Built with StencilJS, it works seamlessly with vanilla JavaScript, React, Vue, Angular, or any web framework.
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
This plug and play component is designed so that you can integrate key parts of document creation into your internal systems, such as a CRM or line of business application. As long as your system can render and support HTML components, you can use the Document Viewer. If you need additional help integrating the Document Viewer into your technical stack please get in touch with our support desk. You can use these larger widgets with REST/GraphQL API integrations to provide seamless document signing processes for your staff and customers.
|
|
8
6
|
|
|
9
|
-
|
|
10
|
-
and that you have access to the template.
|
|
7
|
+
## Installation
|
|
11
8
|
|
|
12
|
-
|
|
9
|
+
### NPM Installation
|
|
13
10
|
|
|
14
|
-
|
|
11
|
+
```bash
|
|
12
|
+
npm install legalesign-document-viewer
|
|
13
|
+
```
|
|
15
14
|
|
|
15
|
+
### For React Projects
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
```bash
|
|
18
|
+
npm install legalesign-document-viewer-react
|
|
19
|
+
```
|
|
18
20
|
|
|
19
|
-
|
|
21
|
+
## Basic Integration
|
|
20
22
|
|
|
23
|
+
### Vanilla HTML/JavaScript
|
|
21
24
|
|
|
22
|
-
|
|
25
|
+
Add the component scripts to your HTML:
|
|
23
26
|
|
|
24
|
-
|
|
27
|
+
```html
|
|
28
|
+
<!DOCTYPE html>
|
|
29
|
+
<html>
|
|
30
|
+
<head>
|
|
31
|
+
<link rel="stylesheet" href="node_modules/legalesign-document-viewer/dist/ls-document-viewer/ls-document-viewer.css" />
|
|
32
|
+
<script type="module" src="node_modules/legalesign-document-viewer/dist/ls-document-viewer/ls-document-viewer.esm.js"></script>
|
|
33
|
+
<script nomodule src="node_modules/legalesign-document-viewer/dist/ls-document-viewer/ls-document-viewer.js"></script>
|
|
34
|
+
</head>
|
|
35
|
+
<body>
|
|
36
|
+
<ls-document-viewer
|
|
37
|
+
id="my-editor"
|
|
38
|
+
templateid="YOUR_TEMPLATE_ID"
|
|
39
|
+
token="YOUR_AUTH_TOKEN"
|
|
40
|
+
endpoint="YOUR_GRAPHQL_ENDPOINT"
|
|
41
|
+
></ls-document-viewer>
|
|
42
|
+
</body>
|
|
43
|
+
</html>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### React Integration
|
|
47
|
+
|
|
48
|
+
```jsx
|
|
49
|
+
import { LsDocumentViewer } from 'legalesign-document-viewer-react';
|
|
50
|
+
|
|
51
|
+
function App() {
|
|
52
|
+
return (
|
|
53
|
+
<LsDocumentViewer
|
|
54
|
+
templateid="YOUR_TEMPLATE_ID"
|
|
55
|
+
token="YOUR_AUTH_TOKEN"
|
|
56
|
+
endpoint="YOUR_GRAPHQL_ENDPOINT"
|
|
57
|
+
mode="compose"
|
|
58
|
+
/>
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Required Attributes
|
|
64
|
+
|
|
65
|
+
### token
|
|
66
|
+
Your security token for authentication. This verifies your identity and access to the template. See more
|
|
67
|
+
documentation about how to securely get a token without exposing your credentials, see the examples
|
|
68
|
+
here [https://apidocs.legalesign.com/docs/graphql/oauth2/setup/]
|
|
69
|
+
|
|
70
|
+
```html
|
|
71
|
+
token="eyJraWQiOiJBTkJIeT..."
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### templateid
|
|
75
|
+
The API ID of the template you want to present to users. You can easy find this by looking in the url
|
|
76
|
+
when you are editing the template in the Console application.
|
|
77
|
+
|
|
78
|
+
```html
|
|
79
|
+
templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## Widget Modes
|
|
25
83
|
|
|
26
84
|
### Editor Mode
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
85
|
+
Full-featured template creation and editing with all available tools. This is intended for work flows where a
|
|
86
|
+
highly reusable template with roles is helpful. If your intention is to only use your document once (perhaps your
|
|
87
|
+
document generation system has already filled in all the client information) then you may want to consider
|
|
88
|
+
*compose* mode instead.
|
|
89
|
+
|
|
90
|
+
```html
|
|
91
|
+
<ls-document-viewer mode="editor" ...></ls-document-viewer>
|
|
92
|
+
```
|
|
30
93
|
|
|
31
94
|
### Compose Mode
|
|
95
|
+
Streamlined mode to quickly adding signature boxes to pre-generated templates. Ideal for integrated clients where recipients are already defined.
|
|
96
|
+
|
|
97
|
+
For more information on recipients see [Recipients](#recipients).
|
|
98
|
+
|
|
99
|
+
```html
|
|
100
|
+
<ls-document-viewer
|
|
101
|
+
mode="compose"
|
|
102
|
+
recipients='[
|
|
103
|
+
{"email": "user@example.com", "firstname": "John", "lastname": "Doe", "signerIndex": 1},
|
|
104
|
+
{"email": "user2@example.com", "firstname": "Jane", "lastname": "Smith", "signerIndex": 2}
|
|
105
|
+
]'
|
|
106
|
+
...></ls-document-viewer>
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
Compose mode automatically:
|
|
110
|
+
- Detects pre-generated recipients
|
|
111
|
+
- Hides the sender from dropdown
|
|
112
|
+
- Hides document options
|
|
113
|
+
- Shows required fields by default
|
|
114
|
+
- Removes sender and sender fields from the editor
|
|
115
|
+
- Promotes quick selection of the required fields for each recipient
|
|
116
|
+
|
|
117
|
+
### Preview Mode
|
|
118
|
+
A helpful document preview that shows the document with all the current fields and lets the user browse though pages.
|
|
119
|
+
|
|
120
|
+
```html
|
|
121
|
+
<ls-document-viewer mode="preview" ...></ls-document-viewer>
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
Compose mode automatically:
|
|
125
|
+
- Hides the toolbar
|
|
126
|
+
- Hides document options
|
|
127
|
+
- Hides toolbox
|
|
128
|
+
- Makes participants and fields read-only
|
|
129
|
+
|
|
130
|
+
## Advanced Configuration
|
|
131
|
+
|
|
132
|
+
### Filter Toolbox
|
|
133
|
+
Restrict available field types using pipe-delimited values. If no value is provided then
|
|
134
|
+
it is assumed the toolbox will be unfiltered and all options are available.
|
|
135
|
+
|
|
136
|
+
```html
|
|
137
|
+
<ls-document-viewer
|
|
138
|
+
filtertoolbox="signature|initials|date|text"
|
|
139
|
+
...
|
|
140
|
+
></ls-document-viewer>
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
### endpoint
|
|
144
|
+
Your GraphQL API endpoint, if you've been given a client specific endpoint.
|
|
145
|
+
|
|
146
|
+
```html
|
|
147
|
+
endpoint="https://your-api.appsync-api.region.amazonaws.com/graphql"
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
### Recipients
|
|
151
|
+
Define document recipients in JSON format. Note that the required elements for
|
|
152
|
+
a recipient are firstname, lastname, email and signerIndex; optionally you can
|
|
153
|
+
also pass the role and phonenumber for each recipient. Omitting a role means
|
|
154
|
+
that the recipient will be treated as a distinct signer, to change this you can pass
|
|
155
|
+
role: "WITNESS" and include a special signer index to show which is their parent, so
|
|
156
|
+
for instance if you wanted to include a witness for signer 2, that witness would have
|
|
157
|
+
a signerIndex of 102.
|
|
158
|
+
|
|
159
|
+
```html
|
|
160
|
+
<ls-document-viewer
|
|
161
|
+
recipients='[
|
|
162
|
+
{"email": "user@example.com", "firstname": "John", "lastname": "Doe", "signerIndex": 1},
|
|
163
|
+
{"email": "user2@example.com", "firstname": "Jane", "lastname": "Smith", "signerIndex": 2}
|
|
164
|
+
{"email": "user3@example.com", "firstname": "Joan", "lastname": "Mitchell", "signerIndex": 102, roleType: "WITNESS"}
|
|
165
|
+
]'
|
|
166
|
+
...
|
|
167
|
+
></ls-document-viewer>
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
### Custom Buttons with Slots
|
|
171
|
+
Add custom buttons to the toolbar using slots:
|
|
172
|
+
|
|
173
|
+
```html
|
|
174
|
+
<ls-document-viewer ...>
|
|
175
|
+
<style>
|
|
176
|
+
.custom-button {
|
|
177
|
+
padding: 2px 12px;
|
|
178
|
+
border-radius: 1rem;
|
|
179
|
+
background-color: #9df5d4;
|
|
180
|
+
color: #125241;
|
|
181
|
+
font-weight: 500;
|
|
182
|
+
}
|
|
183
|
+
</style>
|
|
184
|
+
<span slot="left-button">
|
|
185
|
+
<button class="custom-button">Cancel</button>
|
|
186
|
+
</span>
|
|
187
|
+
<span slot="right-button">
|
|
188
|
+
<button class="custom-button">Send Document</button>
|
|
189
|
+
</span>
|
|
190
|
+
</ls-document-viewer>
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
## Event Handling
|
|
194
|
+
|
|
195
|
+
Listen to component events to track changes:
|
|
196
|
+
|
|
197
|
+
```javascript
|
|
198
|
+
const editor = document.querySelector('ls-document-viewer');
|
|
199
|
+
|
|
200
|
+
editor.addEventListener('mutate', (event) => {
|
|
201
|
+
console.log('Template changed:', event.detail);
|
|
202
|
+
});
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
### React Event Handling
|
|
206
|
+
|
|
207
|
+
```jsx
|
|
208
|
+
<LsDocumentViewer
|
|
209
|
+
onMutate={(event) => {
|
|
210
|
+
console.log('Template changed:', event.detail);
|
|
211
|
+
}}
|
|
212
|
+
...
|
|
213
|
+
/>
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
## Complete Example
|
|
217
|
+
|
|
218
|
+
```html
|
|
219
|
+
<!DOCTYPE html>
|
|
220
|
+
<html>
|
|
221
|
+
<head>
|
|
222
|
+
<meta charset="utf-8" />
|
|
223
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
224
|
+
<title>Document Editor</title>
|
|
225
|
+
<link rel="stylesheet" href="/build/ls-document-viewer.css" />
|
|
226
|
+
<script type="module" src="/build/ls-document-viewer.esm.js"></script>
|
|
227
|
+
</head>
|
|
228
|
+
<body style="padding: 0; margin: 0">
|
|
229
|
+
<ls-document-viewer
|
|
230
|
+
id="my-editor"
|
|
231
|
+
templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"
|
|
232
|
+
token="YOUR_TOKEN_HERE"
|
|
233
|
+
endpoint="https://your-endpoint.amazonaws.com/graphql"
|
|
234
|
+
mode="compose"
|
|
235
|
+
recipients='[
|
|
236
|
+
{"email": "signer@example.com", "firstname": "John", "lastname": "Doe", "signerIndex": 1}
|
|
237
|
+
]'
|
|
238
|
+
filtertoolbox="signature|initials|date"
|
|
239
|
+
>
|
|
240
|
+
<span slot="left-button">
|
|
241
|
+
<button onclick="handleCancel()">Cancel</button>
|
|
242
|
+
</span>
|
|
243
|
+
<span slot="right-button">
|
|
244
|
+
<button onclick="handleSend()">Send</button>
|
|
245
|
+
</span>
|
|
246
|
+
</ls-document-viewer>
|
|
247
|
+
|
|
248
|
+
<script>
|
|
249
|
+
const editor = document.querySelector('ls-document-viewer');
|
|
250
|
+
|
|
251
|
+
editor.addEventListener('mutate', (event) => {
|
|
252
|
+
console.log('Document updated:', event.detail);
|
|
253
|
+
});
|
|
254
|
+
|
|
255
|
+
function handleCancel() {
|
|
256
|
+
window.location.href = '/dashboard';
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
function handleSend() {
|
|
260
|
+
// Implement send logic
|
|
261
|
+
console.log('Sending document...');
|
|
262
|
+
}
|
|
263
|
+
</script>
|
|
264
|
+
</body>
|
|
265
|
+
</html>
|
|
266
|
+
```
|
|
267
|
+
|
|
268
|
+
## Browser Support
|
|
269
|
+
|
|
270
|
+
The component uses modern web standards and supports:
|
|
271
|
+
- Chrome/Edge (latest)
|
|
272
|
+
- Firefox (latest)
|
|
273
|
+
- Safari (latest)
|
|
274
|
+
- Mobile browsers (iOS Safari, Chrome Mobile)
|
|
275
|
+
|
|
276
|
+
## Resources
|
|
32
277
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
278
|
+
- [API Documentation](https://apidocs.legalesign.com)
|
|
279
|
+
- [NPM Package](https://www.npmjs.com/package/legalesign-document-viewer)
|
|
280
|
+
- [React Package](https://www.npmjs.com/package/legalesign-document-viewer-react)
|
|
281
|
+
- [Support](https://www.legalesign.com/support)
|
|
37
282
|
|
|
38
|
-
|
|
283
|
+
## Getting Help
|
|
39
284
|
|
|
40
|
-
|
|
41
|
-
- Hide the Sender from the dropdown
|
|
42
|
-
- Hide document options
|
|
43
|
-
- Move required fields to left box and show by default
|
|
44
|
-
- Make participants read only
|
|
285
|
+
For technical support or questions about integration, contact the Legalesign support team or visit the API documentation at [https://apidocs.legalesign.com](https://apidocs.legalesign.com).
|