mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-26 09:32:37 +02:00
Raktima
@@ -183,7 +183,7 @@ The **Access Code** feature in OpenSign adds an extra layer of security to your
|
||||
|
||||
---
|
||||
## Add Widgets for Signers
|
||||
### 1. Add a Signature Widget
|
||||
## 1. Add a Signature Widget
|
||||
Once your document is loaded in the document creation panel, you'll need to add a signature widget for each signer. Select the signer from the right side panel, click on the signature widget, and position it where the signature is required.
|
||||
|
||||
<img width="866" alt="create document" src="https://github.com/user-attachments/assets/fa5471f0-f7cb-4170-982f-cb213e4db13d" />
|
||||
@@ -196,72 +196,32 @@ After placing the Signature widget, you will see the options on the widget such
|
||||
- All pages but last: It will copy the signature widget to all pages except the last page.
|
||||
- All pages but first: It will copy the signature widget to all pages except the first page.
|
||||
|
||||
### 2. Add Other Widgets
|
||||
## Add Other Widgets
|
||||
Depending on your needs, you can include additional widgets such as:
|
||||
- **Stamp**: The stamp widget allows signers to add a stamp to the document. Signers can upload their stamp during the signing process. After placing the Stamp widget, you will see the options on the widget such as:
|
||||
- Setting icon: By clicking on the option, you can specify whether this widget is mandatory or optional during the document signing.
|
||||
- Add Signer/Change Signer: Clicking the second option on the stamp widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
|
||||
- Copy Stamp: Clicking on this option reveals the following choices.
|
||||
## 2. Stamp
|
||||
The stamp widget allows signers to add a stamp to the document. Signers can upload their stamp during the signing process.
|
||||
|
||||
After placing the Stamp widget, you will see the options on the widget such as:
|
||||
|
||||
- Setting icon: By clicking on the option, you can specify whether this widget is mandatory or optional during the document signing.
|
||||
- Add Signer/Change Signer: Clicking the second option on the stamp widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
|
||||
- Copy Stamp: Clicking on this option reveals the following choices.
|
||||
- All pages : It will copy the stamp widget to all pages.
|
||||
- All pages but last: It will copy the stamp widget to all pages except the last page.
|
||||
- All pages but first: It will copy the stamp widget to all pages except the first page.
|
||||
- **Initials**: The initials widget allows signers to add their initials to the document. During the signing process, signers can draw, upload, or type their initials. After placing the Initials widget, you will see the options on the widget such as:
|
||||
- Setting icon: By clicking on the option, you can specify whether this widget is mandatory or optional during the document signing.
|
||||
- Add Signer/Change Signer: Clicking the first icon on the Initials widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
|
||||
- Copy Initials: Clicking on this option reveals the following choices.
|
||||
## 3. Initials
|
||||
The initials widget allows signers to add their initials to the document. During the signing process, signers can draw, upload, or type their initials.
|
||||
After placing the Initials widget, you will see the options on the widget such as:
|
||||
- Setting icon: By clicking on the option, you can specify whether this widget is mandatory or optional during the document signing.
|
||||
- Add Signer/Change Signer: Clicking the first icon on the Initials widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
|
||||
- Copy Initials: Clicking on this option reveals the following choices.
|
||||
- All pages : It will copy the initials widget to all pages.
|
||||
- All pages but last: It will copy the initials widget to all pages except the last page.
|
||||
- All pages but first: It will copy the initials widget to all pages except the first page.
|
||||
- **Name**: The name widget allows signers to add their name or any other text, functioning like a text field during the signing process. After placing the name widget, you will see the options on the widget such as:
|
||||
- Setting icon: By clicking on the option, you can set the color and font.
|
||||
|
||||
**Hide text with asterisks**: **"which masks the entered text (*) to protect sensitive information while filling out the document. The final embedded document will also display the text as asterisks, keeping the actual value hidden.
|
||||
- Add Signer/Change Signer: Clicking the first icon on the Name widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
|
||||
- Copy : Clicking on this you can duplicate the name widget.
|
||||
- **Job title**: The Job title widget allows signers to add their Job title or any other text, functioning like a text field during the signing process. After placing the job title widget, you will see the options on the widget such as:
|
||||
- Setting icon: By clicking on the option, you can set the color and font.
|
||||
|
||||
**Hide text with asterisks**: **"which masks the entered text (*) to protect sensitive information while filling out the document. The final embedded document will also display the text as asterisks, keeping the actual value hidden.
|
||||
- Add Signer/Change Signer: Clicking the first icon on the Job title widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
|
||||
- Copy : Clicking on this you can duplicate the job title widget.
|
||||
|
||||
- **Company**: The company widget allows signers to add their company or any other text, functioning like a text field during the signing process. After placing the company widget, you will see the options on the widget such as:
|
||||
- Setting icon: By clicking on the option, you can set the color and font.
|
||||
|
||||
**Hide text with asterisks**: **"which masks the entered text (*) to protect sensitive information while filling out the document. The final embedded document will also display the text as asterisks, keeping the actual value hidden.
|
||||
- Add Signer/Change Signer: Clicking the first icon on the Company widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
|
||||
- Copy : Clicking on this you can duplicate the Company widget.
|
||||
|
||||
- **Date Widget**
|
||||
|
||||
The **Date widget** allows signers to enter a date while signing the document. Once the widget is placed, you can configure its behavior using the available settings in the **Widget Info** panel.
|
||||
|
||||
#### ⚙️ Widget Options
|
||||
|
||||
- **Date Format**: Choose the preferred date format (for example, `MM/dd/yyyy`, `dd-mm-yyyy`, or `dd/mm/yyyy`) from the Format dropdown. This determines how the date appears to the signer.
|
||||
- **Set Date**: This option allows the user to set a default date, which will be displayed while signing the document.
|
||||
- **Signing Date**: When selected, the date on which the signer signs the document will be automatically displayed in the Date widget.
|
||||
- **Clear**: Removes the selected date setting.
|
||||
|
||||
- **Date Range**
|
||||
- **Min Date**: Sets the earliest date the signer can select.
|
||||
- **Max Date**: Sets the latest date the signer can select.
|
||||
- Use **Clear** to remove the minimum or maximum date restrictions.
|
||||
|
||||
- **Required / Optional**
|
||||
Mark the widget as **Required** if the signer must fill it in before completing the signing, or **Optional** if it is not mandatory.
|
||||
|
||||
- **Font Settings**
|
||||
Customize the **font size** and **text color** to match the document’s style.
|
||||
|
||||
- **Read Only**
|
||||
Enable this option to display a date that cannot be edited by the signer.
|
||||
|
||||
- **Save**
|
||||
Click **Save** to apply all selected settings to the Date widget.
|
||||
|
||||
- **Text Input**: The text input field is used to collect input from the signer. Signers can type their responses directly into this field. After placing the Text Input widget, you will see the options on the widget such as:
|
||||
- Setting : The widget settings panel provides additional customization options, including:
|
||||
## 4. Text Input
|
||||
The text input field is used to collect input from the signer. Signers can type their responses directly into this field. After placing the Text Input widget, you will see the options on the widget such as:
|
||||
- Setting : The widget settings panel provides additional customization options, including:
|
||||
- Choosing a **font color**
|
||||
- Setting the **font size**
|
||||
- Marking the field as **required** or **optional**
|
||||
@@ -355,13 +315,13 @@ The **Text Input** widget also supports Conditional Logic using the following tr
|
||||
|
||||
### Additional Widget Options
|
||||
|
||||
- **Add Signer / Change Signer**: Click the first icon on the Text Input widget to assign the widget to a different signer. You can select an existing signer or add a new recipient.
|
||||
- **Add Signer / Change Signer**: Click the first icon on the Text Input widget to assign the widget to a different signer. You can select an existing signer or add a new recipient.
|
||||
|
||||
- **Copy**: Click the **Copy** icon to duplicate the Text Input widget.
|
||||
- **Copy**: Click the **Copy** icon to duplicate the Text Input widget.
|
||||
|
||||
---
|
||||
|
||||
- **Number widget**
|
||||
## 5. Number widget
|
||||
|
||||
The Number widget is used to collect numeric input from the signer. It accepts only numeric values, helping ensure data accuracy and consistency. The Number widget also supports formulas, allowing you to perform automatic calculations using values from other Number widgets. After placing the Number widget, you will see the following options:
|
||||
|
||||
@@ -507,13 +467,75 @@ The **Number** widget also supports Conditional Logic using the following trigge
|
||||
|
||||
### Additional Widget Options
|
||||
|
||||
- **Add Signer / Change Signer**: Click the first icon on the Number widget to assign the widget to a different signer. You can choose an existing signer or add a new recipient.
|
||||
- **Add Signer / Change Signer**: Click the first icon on the Number widget to assign the widget to a different signer. You can choose an existing signer or add a new recipient.
|
||||
|
||||
- **Copy**: Click the **Copy** icon to duplicate the Number widget.
|
||||
- **Copy**: Click the **Copy** icon to duplicate the Number widget.
|
||||
|
||||
---
|
||||
|
||||
- **Cells**
|
||||
## 6. Name
|
||||
The name widget allows signers to add their name or any other text, functioning like a text field during the signing process. After placing the name widget, you will see the options on the widget such as:
|
||||
- Setting icon: By clicking on the option, you can set the color and font.
|
||||
|
||||
**Hide text with asterisks**: **"which masks the entered text (*) to protect sensitive information while filling out the document. The final embedded document will also display the text as asterisks, keeping the actual value hidden.
|
||||
|
||||
- Add Signer/Change Signer: Clicking the first icon on the Name widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
|
||||
- Copy : Clicking on this you can duplicate the name widget.
|
||||
## 7. Job title
|
||||
The Job title widget allows signers to add their Job title or any other text, functioning like a text field during the signing process. After placing the job title widget, you will see the options on the widget such as:
|
||||
- Setting icon: By clicking on the option, you can set the color and font.
|
||||
|
||||
**Hide text with asterisks**: **"which masks the entered text (*) to protect sensitive information while filling out the document. The final embedded document will also display the text as asterisks, keeping the actual value hidden.
|
||||
- Add Signer/Change Signer: Clicking the first icon on the Job title widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
|
||||
- Copy : Clicking on this you can duplicate the job title widget.
|
||||
|
||||
## 8. Company
|
||||
The company widget allows signers to add their company or any other text, functioning like a text field during the signing process. After placing the company widget, you will see the options on the widget such as:
|
||||
- Setting icon: By clicking on the option, you can set the color and font.
|
||||
|
||||
**Hide text with asterisks**: **"which masks the entered text (*) to protect sensitive information while filling out the document. The final embedded document will also display the text as asterisks, keeping the actual value hidden.
|
||||
- Add Signer/Change Signer: Clicking the first icon on the Company widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
|
||||
- Copy : Clicking on this you can duplicate the Company widget.
|
||||
## 9. Email
|
||||
The email widget is used to enter an email address during the signing process. It only accepts input in a valid email format. If the signer enters invalid text, a validation error will occur, and the document cannot be completed until it's corrected. After placing the email widget, you will see the options on the widget such as:
|
||||
- Setting icon: By clicking on the option, you can set the color and font.
|
||||
|
||||
**Hide text with asterisks**: **"which masks the entered text (*) to protect sensitive information while filling out the document. The final embedded document will also display the text as asterisks, keeping the actual value hidden.
|
||||
|
||||
- Add Signer/Change Signer: Clicking the first icon on the Email widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
|
||||
- Copy : Clicking on this you can duplicate the email widget.
|
||||
|
||||
---
|
||||
## 10. Date Widget
|
||||
|
||||
The **Date widget** allows signers to enter a date while signing the document. Once the widget is placed, you can configure its behavior using the available settings in the **Widget Info** panel.
|
||||
|
||||
#### ⚙️ Widget Options
|
||||
|
||||
- **Date Format**: Choose the preferred date format (for example, `MM/dd/yyyy`, `dd-mm-yyyy`, or `dd/mm/yyyy`) from the Format dropdown. This determines how the date appears to the signer.
|
||||
- **Set Date**: This option allows the user to set a default date, which will be displayed while signing the document.
|
||||
- **Signing Date**: When selected, the date on which the signer signs the document will be automatically displayed in the Date widget.
|
||||
- **Clear**: Removes the selected date setting.
|
||||
|
||||
- **Date Range**
|
||||
- **Min Date**: Sets the earliest date the signer can select.
|
||||
- **Max Date**: Sets the latest date the signer can select.
|
||||
- Use **Clear** to remove the minimum or maximum date restrictions.
|
||||
|
||||
- **Required / Optional**
|
||||
Mark the widget as **Required** if the signer must fill it in before completing the signing, or **Optional** if it is not mandatory.
|
||||
|
||||
- **Font Settings**
|
||||
Customize the **font size** and **text color** to match the document’s style.
|
||||
|
||||
- **Read Only**
|
||||
Enable this option to display a date that cannot be edited by the signer.
|
||||
|
||||
- **Save**
|
||||
Click **Save** to apply all selected settings to the Date widget.
|
||||
|
||||
|
||||
## 11. Cells
|
||||
The **Cells widget** is ideal for documents that require input in a structured, table-like format, allowing the signer to fill in details within individual cells. After dragging and dropping the widget onto the document, you can adjust the number of cells by moving the **blue marker**.
|
||||
|
||||
<img width="800" alt="Cells widget" src="https://github.com/user-attachments/assets/2a301776-5275-4daf-b361-fd48af2878fc" />
|
||||
@@ -544,7 +566,8 @@ The **Number** widget also supports Conditional Logic using the following trigge
|
||||
|
||||
---
|
||||
|
||||
- **Checkbox**: The checkbox widget is used to capture input in the form of a checkbox selection. Once you drop the checkbox widget, a popup will open where you can set the checkbox name and options. Additionally, there are a few options available such as setting the minimum and maximum checks, making the checkbox read-only, and hiding the label.
|
||||
## 12. Checkbox
|
||||
The checkbox widget is used to capture input in the form of a checkbox selection. Once you drop the checkbox widget, a popup will open where you can set the checkbox name and options. Additionally, there are a few options available such as setting the minimum and maximum checks, making the checkbox read-only, and hiding the label.
|
||||
|
||||
**Conditional Logic**
|
||||
|
||||
@@ -731,7 +754,8 @@ The **Checkbox** widget also supports Conditional Logic using the following trig
|
||||
|
||||
---
|
||||
|
||||
- **Dropdown**: Once you drop the dropdown widget, a popup will open where you can set the dropdown name and options. Additionally, there are a few options available such as setting a default value and marking the dropdown as required or optional.
|
||||
## 13. Dropdown
|
||||
Once you drop the dropdown widget, a popup will open where you can set the dropdown name and options. Additionally, there are a few options available such as setting a default value and marking the dropdown as required or optional.
|
||||
|
||||
### **Conditional Logic**
|
||||
|
||||
@@ -871,7 +895,8 @@ The **Dropdown** widget also supports Conditional Logic using the following trig
|
||||
|
||||
---
|
||||
|
||||
- **Radio button**: The radio button widget is used to capture input in the form of a radio button selection. Once you drop the radio button widget, a popup will open where you can set the radio button name and options. Additionally, there are a few options available such as setting a default value, making the radio button read-only, and hiding the label.
|
||||
## 14. Radio button
|
||||
The radio button widget is used to capture input in the form of a radio button selection. Once you drop the radio button widget, a popup will open where you can set the radio button name and options. Additionally, there are a few options available such as setting a default value, making the radio button read-only, and hiding the label.
|
||||
|
||||
### **Conditional Logic**
|
||||
|
||||
@@ -1076,30 +1101,20 @@ The **Radio Button** widget also supports Conditional Logic using the following
|
||||
|
||||
---
|
||||
|
||||
- **Image**: The image widget allows signers to upload an image during the signing process. After placing the Image widget, you will see the options on the widget such as:
|
||||
- Setting icon: By clicking on the option, you can specify whether this widget is mandatory or optional during the document signing.
|
||||
- Add Signer/Change Signer: Clicking the first icon on the Image widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
|
||||
- Copy : Clicking on this you can duplicate the image widget.
|
||||
## 15. Image
|
||||
The image widget allows signers to upload an image during the signing process. After placing the Image widget, you will see the options on the widget such as:
|
||||
- Setting icon: By clicking on the option, you can specify whether this widget is mandatory or optional during the document signing.
|
||||
- Add Signer/Change Signer: Clicking the first icon on the Image widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
|
||||
- Copy : Clicking on this you can duplicate the image widget.
|
||||
|
||||
---
|
||||
|
||||
- **Email**: The email widget is used to enter an email address during the signing process. It only accepts input in a valid email format. If the signer enters invalid text, a validation error will occur, and the document cannot be completed until it's corrected. After placing the email widget, you will see the options on the widget such as:
|
||||
- Setting icon: By clicking on the option, you can set the color and font.
|
||||
|
||||
**Hide text with asterisks**: **"which masks the entered text (*) to protect sensitive information while filling out the document. The final embedded document will also display the text as asterisks, keeping the actual value hidden.
|
||||
|
||||
- Add Signer/Change Signer: Clicking the first icon on the Email widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
|
||||
- Copy : Clicking on this you can duplicate the email widget.
|
||||
|
||||
---
|
||||
|
||||
- **📎 Attachment Widget**
|
||||
|
||||
|
||||
## 16. 📎 Attachment Widget
|
||||
The **Attachment Widget** allows signers to upload supporting files directly while completing and signing a document. This is useful when additional documents or evidence are required as part of the signing workflow.
|
||||
|
||||
- Setting icon: By clicking on the option, you can specify whether this widget is mandatory or optional during the document signing. Additionally, you can add a hint or instruction to guide signers on what information or file is expected in the widget.
|
||||
- Add Signer/Change Signer: Clicking the first icon on the Image widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
|
||||
- Copy : Clicking on this you can duplicate the image widget.
|
||||
- Setting icon: By clicking on the option, you can specify whether this widget is mandatory or optional during the document signing. Additionally, you can add a hint or instruction to guide signers on what information or file is expected in the widget.
|
||||
- Add Signer/Change Signer: Clicking the first icon on the Image widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
|
||||
- Copy : Clicking on this you can duplicate the image widget.
|
||||
|
||||
<img width="918" alt="image" src="https://github.com/user-attachments/assets/f52e704d-c69f-464a-b3fa-f76f27d98fed" />
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user