Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/docusealco/signature-maker-js
Easy to use signature maker for web applications
https://github.com/docusealco/signature-maker-js
signature vanilla-js
Last synced: 2 days ago
JSON representation
Easy to use signature maker for web applications
- Host: GitHub
- URL: https://github.com/docusealco/signature-maker-js
- Owner: docusealco
- License: mit
- Created: 2024-09-08T18:36:11.000Z (2 months ago)
- Default Branch: master
- Last Pushed: 2024-11-02T13:36:55.000Z (13 days ago)
- Last Synced: 2024-11-02T17:56:38.139Z (12 days ago)
- Topics: signature, vanilla-js
- Language: JavaScript
- Homepage: https://www.docuseal.co/docs/embedded/signature#js
- Size: 12.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Signature Maker JS
Signature Maker is a web component that lets users draw or type their signature.
#### Other implementations
- [React](https://github.com/docusealco/signature-maker-react)
- [Vue](https://github.com/docusealco/signature-maker-vue)
## Demo
Try the live demo [here](https://www.docuseal.com/online-signature)
## Documentation
Check out the full documentation [here](https://www.docuseal.com/docs/embedded/signature#js).
## Installation
```bash
npm install @docuseal/signature-maker-js
```
OR
```bash
yarn add @docuseal/signature-maker-js
```
OR
```html
```
## Usage
Basic Usage with standard styles and default signature saving behavior:
```html
```
---
Usage with default styles but custom signature saving behavior, such as uploading the signature to a server:
```html
window.signatureMaker.addEventListener('save', (e) => {
fetch('/save-signature', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ file: e.detail.base64 }),
});
})
```
---
Usage without a save signature button, embedded in another form. The signature will be stored in a form field named `signature`:
```html
Submit
```
---
Usage without a save signature button and tracking each signature change:
```html
window.signatureMaker.addEventListener('change', (e) => {
if (e.detail.base64) {
fetch('/background-save-signature', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ file: e.detail.base64 }),
});
} else {
console.log('No signature to save');
}
})
```
---
Usage with custom button labels and classes (DaisyUI):
```html
```
---
Usage with customization of certain elements using CSS classes and styles:
```html
```
## Customization
Signature Maker can be customized with the following attributes:
```
data-download-on-save
data-with-typed
data-with-drawn
data-with-upload
data-with-color-select
data-with-submit
data-save-button-text
data-control-buttons-container-class
data-control-buttons-container-style
data-save-button-class
data-save-button-style
data-save-button-disabled-class
data-save-button-disabled-style
data-undo-button-text
data-undo-button-class
data-undo-button-style
data-clear-button-text
data-clear-button-class
data-clear-button-style
data-text-input-placeholder
data-text-input-class
data-text-input-style
data-canvas-class
data-canvas-style
data-type-buttons-container-class
data-type-buttons-container-style
data-draw-type-button-text
data-draw-type-button-class
data-draw-type-button-style
data-draw-type-button-active-class
data-draw-type-button-active-style
data-text-type-button-text
data-text-type-button-class
data-text-type-button-style
data-text-type-button-active-class
data-text-type-button-active-style
data-upload-type-button-text
data-upload-type-button-class
data-upload-type-button-style
data-upload-type-button-active-class
data-upload-type-button-active-style
data-font-url
````
The full documentation with detailed configuration and event descriptions can be found [here](https://www.docuseal.com/docs/embedded/signature#js).
# License
MIT