Skip to content

Commit 4857c6d

Browse files
mani-d1mani-d1
committed
Merge branch 'praveen' of github.com:virtualansoftware/doculan-tutorials into latest-deploy
2 parents 93c67a0 + 58f96df commit 4857c6d

36 files changed

Lines changed: 371 additions & 11 deletions

‎docs/E_Sign/Contract-Lifecycle.md‎

Lines changed: 65 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# How to use contract Lifecycle Management (CLM)?
1+
# How to use contract Lifecycle Management?
22

33
**Contract Lifecycle Management (CLM)** helps organizations create, review, approve, sign, store, and manage contracts throughout their entire lifecycle. It streamlines contract processes, improves visibility, and ensures compliance by keeping all contract-related activities in a centralized system.
44

@@ -11,6 +11,8 @@
1111
3. Click the **Action** Menu (⋮) associated with the document.
1212
4. Select **View** to open and review the signed document.
1313

14+
<img src=" screenshots\CLM\CLM-1.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document">
15+
1416
---
1517

1618
## Step 2: Configure the Contract Document
@@ -20,40 +22,43 @@
2022
3. The AI-powered contract engine automatically extracts key information from the document and generates the contract details.
2123
4. Review the extracted information before proceeding to the next step.
2224

25+
<img src=" screenshots\CLM\CLM-View.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document">
26+
2327
---
2428

2529
## Step 3: Review and Validate Contract Details
2630

2731
Once the AI completes the contract extraction process, review all generated information carefully before final approval. Ensure the extracted details are accurate, complete, and aligned with organizational and legal requirements.
2832

33+
<img src=" screenshots\CLM\CLM-Overview.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document">
2934

3035
## Review Party Information
3136

3237
Verify the details of all parties involved in the contract.
33-
3438
Ensure the following information is accurate:
35-
3639
* Party names
3740
* Roles and responsibilities
3841
* Contact details
3942
* Organization or company information
4043

44+
<img src=" screenshots\CLM\CLM-Parties.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document">
45+
4146
Update any incorrect or missing information before proceeding.
4247

4348
---
4449

4550
## Review Financial Information
4651

4752
Validate all financial details extracted from the contract.
48-
4953
Review and confirm:
50-
5154
* Total contract value
5255
* Payment terms and conditions
5356
* Pricing and rate information
5457
* Billing schedules and invoicing obligations
5558
* Currency and frequency details
5659

60+
<img src=" screenshots\CLM\CLM-Financial.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document">
61+
5762
Ensure all financial calculations and payment structures are correct.
5863

5964
---
@@ -67,7 +72,6 @@ Verify that all required parties are properly assigned in the Signatories sectio
6772
1. Navigate to the **Signatories** tab.
6873
2. Review all listed signatories.
6974
3. Confirm the accuracy of:
70-
7175
* Signer names
7276
* Roles and assignments
7377
* Signing status
@@ -76,6 +80,8 @@ Verify that all required parties are properly assigned in the Signatories sectio
7680
4. Ensure all mandatory signatories are included.
7781
5. Update or correct any missing or inaccurate information.
7882

83+
<img src=" screenshots\CLM\CLM-Signature.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document">
84+
7985
---
8086

8187
## Configure Contract Alerts and Expiry Notifications
@@ -102,6 +108,8 @@ Set up reminders and expiration alerts to ensure important contract milestones a
102108
* Modify or remove existing reminders.
103109
* Save alert configurations to enable automated notifications.
104110

111+
<img src=" screenshots\CLM\CLM-Alerts.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document">
112+
105113
Ensure all required reminders are configured before contract approval.
106114

107115
---
@@ -114,12 +122,10 @@ Review AI-generated clause analysis and risk indicators to identify contractual
114122

115123
1. Navigate to the **Red Lines** tab.
116124
2. Review highlighted clauses and associated risk levels:
117-
118125
* Low Risk
119126
* Medium Risk
120127
* High Risk
121128
3. Verify the inclusion of critical legal provisions, including:
122-
123129
* Limitation of Liability
124130
* Termination Clauses
125131
* Indemnification Clauses
@@ -129,27 +135,42 @@ Review AI-generated clause analysis and risk indicators to identify contractual
129135
5. Modify, add, or update clauses as needed to comply with organizational policies and legal standards.
130136
6. Resolve all high-risk or missing clauses before approval.
131137

138+
<img src=" screenshots\CLM\CLM-Red_Line.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document">
139+
132140
---
133141

134142
## Approve and Save the Contract
135143

136144
After completing the review and validation process:
137-
138145
1. Make any necessary updates to the contract information.
139146
2. Click **Approve & Save**.
140147
3. The contract will be successfully created and added to the **Contracts Dashboard** for future tracking, management, and reporting.
141148

149+
<img src=" screenshots\CLM\CLM-Signature.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document">
150+
142151
---
143152

144153
## Step 4: Manage Contract Renewals
145154

146155
1. Navigate to the **Contracts Dashboard**.
156+
157+
<img src=" screenshots\CLM\CLM-Dashboard.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document">
158+
147159
2. Select the contract you want to manage.
148160
3. Click **Renewals** to open the Renewal Tracking page.
161+
162+
<img src=" screenshots\CLM\CLM-Action.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document">
163+
149164
4. Review upcoming renewal dates and reminder schedules.
150165
5. Update renewal information and reminder dates as needed.
151166
6. Save the changes to keep renewal tracking up to date.
152167

168+
<img src=" screenshots\CLM\CLM-Remender.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document">
169+
170+
7. Use this option to cancel the selected contract permanently.
171+
172+
<img src=" screenshots\CLM\CLM-Cancel.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document">
173+
153174
---
154175

155176
## Key Benefits of CLM
@@ -160,4 +181,38 @@ After completing the review and validation process:
160181
- Renewal and expiration tracking
161182
- Automated reminders and alerts
162183
- Improved compliance and contract visibility
163-
- Secure storage and lifecycle management
184+
- Secure storage and lifecycle management
185+
186+
---
187+
188+
**Demo Video:**
189+
<!-- Inline HTML in Markdown file -->
190+
<style>
191+
.video-wrap {
192+
border: 2px solid black;
193+
border-radius: 4px;
194+
width: 100%;
195+
max-width: 800px;
196+
overflow: hidden;
197+
margin-bottom: 1rem;
198+
}
199+
.video-wrap video {
200+
display: block;
201+
width: 100%;
202+
height: auto;
203+
}
204+
</style>
205+
206+
<div class="video-wrap" role="region" aria-label="Demo: Creating a E-Sign">
207+
<!-- Use a relative path like ./videos/demo.mp4 or an absolute URL -->
208+
<video controls poster="">
209+
<source src="https://doculan-storage-public.s3.us-east-1.amazonaws.com/demo_video/E_Signature/Co-Signer.mp4" type="video/mp4">
210+
<source src="https://doculan-storage-public.s3.us-east-1.amazonaws.com/demo_video/E_Signature/Co-Signer.webm" type="video/webm">
211+
<!-- Fallback link if browser can't play video -->
212+
Your browser does not support the video tag.
213+
<a href="https://doculan-storage-public.s3.us-east-1.amazonaws.com/demo_video/E_Signature/Co-Signer.mp4" target="_blank" rel="noopener">Download / Open video</a>
214+
</video>
215+
</div>
216+
217+
218+
© Doculan by [Virtualan Software](https://www.virtualan.io)

‎docs/E_Sign/Image-and-Underline.md‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
# How to use Images & Underlines Fields?
2+
3+
The **Images & Underlines Fields** feature in the E-Sign module allows both senders and recipients to add images and apply underline formatting directly within documents during the signing process. This functionality improves document clarity, enhances collaboration, and ensures a more interactive signing experience.
4+
5+
---
6+
7+
## Step 1: Open the Document
8+
9+
- Navigate to the **Documents** section from the main menu.
10+
- Locate the document you want to prepare for e-signing.
11+
- Click **Open** or **Edit** to launch the document in the E-Sign editor.
12+
13+
<img src=" screenshots\Image-Field\image-field.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document">
14+
15+
---
16+
17+
## Step 2: Add an Image Field
18+
19+
- Select the **Image Field** option from the toolbar or field panel on the right.
20+
- Drag and place the image field in the required section of the document.
21+
- Open the **Field Settings** to configure who is responsible for uploading the image (sender or a specific recipient).
22+
- Resize and reposition the field as needed by dragging its corners or edges.
23+
- Both the sender and recipients can access the **Images & Underlines Fields** feature based on their assigned permissions.
24+
25+
<img src=" screenshots\Image-Field\image-field1.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document">
26+
27+
28+
---
29+
30+
## Step 3: Upload an Image
31+
32+
- Click on the inserted image field to activate it.
33+
- Click the **Upload** icon or button that appears within the field.
34+
- Browse and select the required image from your device (supported formats: PNG, JPG, JPEG, GIF).
35+
- The image will be embedded directly into the document at the designated position.
36+
- Users can add **logos**, **signatures**, **stamps**, or other supporting visuals directly into the document.
37+
38+
<img src=" screenshots\Image-Field\Upload-Image-1.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document"><br>
39+
40+
41+
<img src=" screenshots\Image-Field\image-field2.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document">
42+
43+
> **Tip:** Ensure the image is clear and properly sized before uploading for the best visual result in the final signed document.
44+
45+
---
46+
47+
## Step 4: Add an Underline Field
48+
49+
- Select the **Underline Field** option from the toolbar or field panel.
50+
- Drag and place the underline field in the required section of the document.
51+
- Adjust the width of the underline field to match the area where the recipient needs to sign or annotate.
52+
- Open the **Field Settings** to assign the underline field to the appropriate recipient.
53+
- You can add a label or placeholder text to guide the recipient on what is expected in that field.
54+
55+
<img src="screenshots/Image-Field/image-field-underline.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document">
56+
57+
---
58+
59+
## Step 5: Assign Fields to Recipients
60+
61+
- After placing the image field, assign each field to the appropriate recipient.
62+
- Click on the field and use the **Assign To** dropdown to select the intended recipient.
63+
- This ensures each party fills in only the fields assigned to them during the signing workflow.
64+
65+
<img src=" screenshots\Image-Field\image-field-recipient.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document">
66+
67+
---
68+
69+
## Step 6: Save and Send the Document
70+
71+
- Once all image and underline fields are placed and assigned, click **Save** to preserve your configuration.
72+
- Click **Send** to dispatch the document to the recipients for their action.
73+
- Recipients will receive an email notification with a link to access and complete the document.
74+
75+
<!-- <img src=" screenshots\Image-Field\image-field-recipient.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document"> -->
76+
77+
---
78+
79+
## Step 7: Recipient Fills in the Fields
80+
81+
- The recipient opens the document via the link provided in the email.
82+
- They click on the **Image Field** to upload their image (e.g., signature or stamp).
83+
- Once all required fields are completed, the recipient clicks **Submit** or **Sign** to finalize their action.
84+
85+
<img src=" screenshots\Image-Field\image-field3.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document"><br>
86+
87+
88+
<img src=" screenshots\Image-Field\image-upload2.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document"><br>
89+
90+
91+
<img src=" screenshots\Image-Field\image-field6.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document">
92+
93+
## Step 8: Review the Completed Document
94+
- Click **View Document** to review the completed document and verify all signatures, fields, and information before downloading or sharing it.
95+
96+
<img src=" screenshots\Image-Field\image-field4.png" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;" alt="Screenshot for Document">
97+
98+
---
99+
100+
## Key Benefits
101+
102+
| Feature | Benefit |
103+
|---|---|
104+
| Image Field | Allows embedding of logos, stamps, and visual signatures |
105+
| Underline Field | Provides a structured area for written signatures or annotations |
106+
| Permission-Based Access | Controls who can add or edit fields based on role |
107+
| Multi-Recipient Support | Assign different fields to different signers in a single workflow |
108+
109+
---
110+
111+
## Notes
112+
113+
- Only users with appropriate permissions can add or modify image and underline fields.
114+
- Uploaded images are securely stored and associated with the document.
115+
- The underline field supports both typed and drawn input depending on the configuration.
116+
- All changes are tracked and logged for audit purposes.
117+
118+
---
119+
120+
**Demo Video:**
121+
<!-- Inline HTML in Markdown file -->
122+
<style>
123+
.video-wrap {
124+
border: 2px solid black;
125+
border-radius: 4px;
126+
width: 100%;
127+
max-width: 800px;
128+
overflow: hidden;
129+
margin-bottom: 1rem;
130+
}
131+
.video-wrap video {
132+
display: block;
133+
width: 100%;
134+
height: auto;
135+
}
136+
</style>
137+
138+
<div class="video-wrap" role="region" aria-label="Demo: Creating a E-Sign">
139+
<!-- Use a relative path like ./videos/demo.mp4 or an absolute URL -->
140+
<video controls poster="">
141+
<source src="https://doculan-storage-public.s3.us-east-1.amazonaws.com/demo_video/E_Signature/Co-Signer.mp4" type="video/mp4">
142+
<source src="https://doculan-storage-public.s3.us-east-1.amazonaws.com/demo_video/E_Signature/Co-Signer.webm" type="video/webm">
143+
<!-- Fallback link if browser can't play video -->
144+
Your browser does not support the video tag.
145+
<a href="https://doculan-storage-public.s3.us-east-1.amazonaws.com/demo_video/E_Signature/Co-Signer.mp4" target="_blank" rel="noopener">Download / Open video</a>
146+
</video>
147+
</div>
148+
149+
150+
© Doculan by [Virtualan Software](https://www.virtualan.io)

0 commit comments

Comments
 (0)