Embedded

  • Home

  • Embedded Signature Maker

Signing Form Form Builder Signature Maker

This component allows you to seamlessly add drawing signature functionality to your website or mobile app. It supports JS+HTML, Vue and React. 

<signature-maker id="signatureMaker"></signature-maker>

<script>
  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');
    }
  })
</script>
View LIVE DEMO

Attributes

data-download-on-save Boolean

Set false to disable downloading the signature image on save. It's useful when you want to handle the image data yourself.

Default false

data-with-typed Boolean

Set false to disable text signature input panel.

Default true

data-with-drawn Boolean

Set false to disable drawing signature panel.

Default true

data-with-upload Boolean

Set false to disable uploading signature image panel.

Default true

data-with-color-select Boolean

Set false to disable color selection. Only black color will be available.

Default true

data-with-submit Boolean

Set false to disable the submit button. Any changes will be available as a base64 string in the change event. Custom event 'save' will be triggered on clicking the submit button.

Default true

data-save-button-text String

Default Submit

data-control-buttons-container-class String

Custom CSS class for the control buttons container.

Example flex gap-2

data-control-buttons-container-style String

Custom CSS styles for the control buttons container. Default CSS styles will be disabled

Default display: flex; align-items: center; justify-content: space-between; text-align: center; margin: 1rem 0;

data-save-button-class String

Custom CSS class for the save button

Example btn btn-neutral text-white text-base w-full

data-save-button-style String

Custom CSS styles for the save button

Default color: #ffffff; font-family: ui-sans-serif, system-ui, sans-serif font-size: 16px; font-weight: 600; line-height: 24px; padding: 0px 16px; text-transform: uppercase; background-color: #222222; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 48px; justify-content: center; outline-color: #222222; text-align: center; text-decoration-line: none; width: 100%; border: 1px solid #222222;

data-save-button-disabled-class String

Custom CSS class for the disabled save button.

Example btn-disabled

data-save-button-disabled-style String

Custom CSS styles for the disabled save button.

Default background-color: #D3D3D3; color: #808080; cursor: not-allowed; border: 0;

data-undo-button-text String

Default Undo

data-undo-button-class String

Custom CSS class for the undo button.

Example btn btn-outline btn-sm font-medium

data-undo-button-style String

Custom CSS styles for the undo button.

Default color: #222222; background-color: transparent; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 14px; padding: 0px 12px; text-transform: uppercase; appearance: button; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 32px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;

data-clear-button-text String

Custom text for the clear button.

Default Clear

data-clear-button-class String

Custom CSS class for the clear button.

Example btn btn-outline btn-sm font-medium

data-clear-button-style String

Custom CSS styles for the clear button.

Default color: #222222; background-color: transparent; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 14px; padding: 0px 12px; text-transform: uppercase; appearance: button; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 32px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;

data-text-input-placeholder String

Custom placeholder text for the text input field.

Default Type signature here

data-text-input-class String

Custom CSS class for the text input field.

Example input mb-4 input-bordered bg-white text-2xl w-full h-14 rounded-2xl

data-text-input-style String

Custom CSS styles for the text input field.

Default color: #222222; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 32px; margin: 0px 0px 16px; padding: 0px 16px; background-color: #ffffff; border-radius: 8px; flex-shrink: 1; height: 56px; outline: #222222 none 0px; outline-offset: 0px; width: 100%; text-align: start; border: 1px solid #D3D3D3;

data-canvas-class String

Custom CSS class for the canvas element.

Example bg-white border border-base-300 rounded-2xl w-full

data-canvas-style String

Custom CSS styles for the canvas element.

Default display: block; vertical-align: middle; width: 100%; border-radius: 8px; background-color: #ffffff; padding: 1px; touch-action: none; user-select: none; text-align: center; line-height: 24px; border: 1px solid #D3D3D3;

data-type-buttons-container-class String

Custom CSS class for the type buttons container.

Example flex gap-2 mb-4 justify-center

data-type-buttons-container-style String

Custom CSS styles for the type buttons container.

Default margin-bottom: 1rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem;

data-draw-type-button-text String

Custom text for the draw type button.

Default Draw

data-draw-type-button-class String

Custom CSS class for the draw type button.

Example flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold

data-draw-type-button-style String

Custom CSS styles for the draw type button.

Default color: #222222; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; padding: 0px 40px; text-transform: uppercase; background-color: transparent; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 48px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;

data-draw-type-button-active-class String

Custom CSS class for the active draw type button.

Example bg-neutral text-white font-semibold

data-draw-type-button-active-style String

Custom CSS styles for the active draw type button.

Default color: #fff; background-color: #222222; font-weight: 500;

data-text-type-button-text String

Custom text for the text type button.

Default Type

data-text-type-button-class String

Custom CSS class for the text type button.

Example flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold

data-text-type-button-style String

Custom CSS styles for the text type button.

Default color: #222222; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; padding: 0px 40px; text-transform: uppercase; background-color: transparent; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 48px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;

data-text-type-button-active-class String

Custom CSS class for the active text type button.

Example bg-neutral text-white font-semibold

data-text-type-button-active-style String

Custom CSS styles for the active text type button.

Default color: #fff; background-color: #222222; font-weight: 500;

data-upload-type-button-text String

Custom text for the upload type button.

Default Type

data-upload-type-button-class String

Custom CSS class for the upload type button.

Example flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold

data-upload-type-button-style String

Custom CSS styles for the upload type button.

Default color: #222222; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; padding: 0px 40px; text-transform: uppercase; background-color: transparent; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 48px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;

data-upload-type-button-active-class String

Custom CSS class for the active upload type button.

Example bg-neutral text-white font-semibold

data-upload-type-button-active-style String

Custom CSS styles for the active upload type button.

Default color: #fff; background-color: #222222; font-weight: 500;

data-font-url String

Custom font URL to be used for the text signature input panel.

Default https://cdn.jsdelivr.net/npm/@fontsource/dancing-script/files/dancing-script-latin-400-normal.woff

Callbacks

change Event

Custom event to be triggered every time a change to the signature is made.

Example document.querySelector('signature-maker').addEventListener('change', (e) => e.detail)

save Event

Custom event to be triggered on saving changes of the signature. data-with-submit attribute should be enabled to trigger this event.

Example document.querySelector('signature-maker').addEventListener('save', (e) => e.detail)

Live Example

Add to Claude Code

1. Install the plugin in your project:

Add to Codex

1. Download the plugin from the marketplace:

2. Start Codex:

3. Activate the plugin inside Codex:

Add Code Skills

Universal skills work in any code agent (Cursor, GitHub Copilot, Gemini CLI and many other).

1. Run the install command:

2. Select "Global" or "Project" installation and proceed through the wizard.