Integrate Legalesign Document Viewer into Your Website

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.

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.

Installation

$3

``bash
npm install legalesign-document-viewer
`

$3

`bash
npm install legalesign-document-viewer-react
`

Basic Integration

$3

Add the component scripts to your HTML:

`html








id="my-editor"
templateid="YOUR_TEMPLATE_ID"
token="YOUR_AUTH_TOKEN"
endpoint="YOUR_GRAPHQL_ENDPOINT"
>


`

$3

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

function App() {
return (
templateid="YOUR_TEMPLATE_ID"
token="YOUR_AUTH_TOKEN"
endpoint="YOUR_GRAPHQL_ENDPOINT"
mode="compose"
/>
);
}
`

Required Attributes

$3

`html
token="eyJraWQiOiJBTkJIeT..."
`

$3

`html
templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"
`

Widget Modes

$3

`html

`

$3

`html
mode="compose"
recipients='[
{"email": "user@example.com", "firstname": "John", "lastname": "Doe", "signerIndex": 1},
{"email": "user2@example.com", "firstname": "Jane", "lastname": "Smith", "signerIndex": 2}
]'
...>
`

Compose mode automatically:
- Detects pre-generated recipients
- Hides the sender from dropdown
- Hides document options
- Shows required fields by default
- Removes sender and sender fields from the editor
- Promotes quick selection of the required fields for each recipient

$3

`html

`

Compose mode automatically:
- Hides the toolbar
- Hides document options
- Hides toolbox
- Makes participants and fields read-only

Advanced Configuration

$3

`html
filtertoolbox="signature|initials|date|text"
...
>
`

$3

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

$3

`html
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"}
]'
...
>
`

$3

`html



Cancel


Send Document


`

Event Handling

Listen to component events to track changes:

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

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

You can track whether a template have become valid or invalid using
the validate event.

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

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

$3

Using an event in react prefixes it with the familiar on.

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

$3

#### update event
Fired when the document template is changed, such as adding or removing fields. Provides not only
the event that caused it but also the updated state of the template object as JSON.

#### validate event
Fired when the document template is changed, the valid property in detail shows if the
template has become valid or invalid.

#### selectFields event
Fired when a field is selected in the editor.

#### addParticipant event
Fired when a participant role is added to the template.

Complete Example

`html










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

Cancel


Send






``

Browser Support

The component uses modern web standards and supports:
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)

Resources

- API Documentation{:target="_blank"}
- NPM Package{:target="_blank"}
- React Package{:target="_blank"}
- Support{:target="_blank"}

Getting Help

For technical support or questions about integration, contact the Legalesign support team or visit the API documentation at https://apidocs.legalesign.com.