Web Components Integration
Our Web Components provides a simple way to embed a signing experience within your framework-less web application. It supports both direct link templates and signing tokens.
Installation
Section titled “Installation”In your html file, add the following to add the script, replacing the path with the proper path to the web component script.
<script src='https://cdn.legaldoc.io/v1.0/embed.js'></script>To embed a signing experience, you’ll need to provide the token for the document you want to embed. This can be done in a few different ways, depending on your use case.
Direct Link Template
Section titled “Direct Link Template”If you have a direct link template, you can simply provide the token for the template to the legaldoc-embed-direct-template tag.
<legaldoc-embed-direct-template token="YOUR_TOKEN_HERE"</legaldoc-embed-direct-template>Attributes
Section titled “Attributes”| Attribute | Type | Description |
|---|---|---|
| token | string | The token for the document you want to embed |
| name | string (optional) | The name the signer that will be used by default for signing |
| lockName | boolean (optional) | Whether or not the name field should be locked disallowing modifications |
| string (optional) | The email the signer that will be used by default for signing | |
| lockEmail | boolean (optional) | Whether or not the email field should be locked disallowing modifications |
| onDocumentReady | function (optional) | A callback function that will be called when the document is loaded and ready to be signed |
| onDocumentCompleted | function (optional) | A callback function that will be called when the document has been completed |
| onDocumentError | function (optional) | A callback function that will be called when an error occurs with the document |
| onFieldSigned | function (optional) | A callback function that will be called when a field is signed |
| onFieldUnsigned | function (optional) | A callback function that will be called when a field is unsigned |
Signing Token
Section titled “Signing Token”If you have a signing token, you can provide it to the legaldoc-embed-sign-document tag.
<legaldoc-embed-sign-document token="YOUR_TOKEN_HERE"</legaldoc-embed-sign-document>Attributes
Section titled “Attributes”| Attribute | Type | Description |
|---|---|---|
| token | string | The token for the document you want to embed |
| name | string (optional) | The name the signer that will be used by default for signing |
| lockName | boolean (optional) | Whether or not the name field should be locked disallowing modifications |
| onDocumentReady | function (optional) | A callback function that will be called when the document is loaded and ready to be signed |
| onDocumentCompleted | function (optional) | A callback function that will be called when the document has been completed |
| onDocumentError | function (optional) | A callback function that will be called when an error occurs with the document |
Creating via JavaScript
Section titled “Creating via JavaScript”You can also create the tag element using javascript, for dynamic generation of either modes. For example, this would add the sign document embed to the DOM.
document.getElementById('my-wrapper-here').innerHTML = '';
const tag = document.createElement('legaldoc-embed-sign-document');tag.setAttribute('token', data.token);tag.style.width = '100%';tag.style.height = '100%';
document.getElementById('my-wrapper-here').appendChild(tag);