Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: about 1 month ago
JSON representation

Easy to use signature maker for web applications

Awesome Lists containing this project

README

        



Signature Maker

# 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