Could you please provide proper guidance on creating an embedded signature in an LWC component?

Hello ​@Thor1908 

Thank you for reaching out here in Docusign Community.

To create an embedded signature in a Lightning Web Component (LWC), follow these steps based on the provided context:

Step 1: Define Your Apex Class

1. Create an Apex class in your Salesforce DX project. Navigate to the force-app/main/default/classes folder, right-click on classes, and select SFDX: Create Apex Class.
2. In this class, you will implement methods to create and send a Docusign envelope and to get the embedded signing URL.

Step 2: Create and Send an Envelope

1. Use the dfsle.EnvelopeService.getEmptyEnvelope method to create an empty envelope.
2. Create a document using a Docusign template with dfsle.Document.fromTemplate.
3. Create a recipient using dfsle.Recipient.newEmbeddedSigner for embedded signing.
4. Add the recipient to the envelope using the withRecipients method.
5. Send the envelope using dfsle.EnvelopeService.sendEnvelope.

Step 3: Host an Embedded Signing Session

1. After sending the envelope, initiate an embedded signing session.
2. The Apex Toolkit will verify the current recipient against the current Salesforce user and request a link to a one-time signing session.
3. Redirect the user to this link to view or sign the envelope document(s).

Step 4: Create a Lightning Web Component

1. Navigate to the force-app/main/default/lwc folder, right-click on lwc, and select SFDX: Create Lightning Web Component.
2. Open the .js-meta.xml file and set the isExposed field to true. Add targets for lightning__AppPage, lightning__RecordPage, and lightning__HomePage.

Step 5: Edit Your Component's HTML

1. Open the HTML file of your component to style it as needed.

Step 6: Use Your Lightning Web Component to Initiate Embedded Signing

1. Edit the JavaScript file of your component.
2. Import the sendEnvelope and getEmbeddedSigningUrl methods from your Apex class.
3. Set the Docusign template ID to a variable.
4. Implement a handleClick method to call sendEnvelope, retrieve the embedded signing URL, and redirect the browser to that URL.

Step 7: Deploy Your Source Code

1. Navigate to the force-app/main/default folder, right-click on default, and select SFDX: Deploy Source to Org.
2. Add your new Lightning Web Component to a page using the Lightning App Builder.

By following these steps, you will be able to create an embedded signature process within your LWC component.

If you found the response to be a useful solution to your question, please mark it as the best answer by clicking “Select as Best” to make it easier for other users to find.

Best regards,
Marco Paulo | Docusign Community Moderator

Hello ​@Thor1908 

I hope you are doing well. 

I want to confirm if you were able to solve your issue by utilizing the suggested solution or if the information provided was useful.

If so, please mark it as the "Best Answer ✅" by clicking “Select as Best” to make it easier for other users to find.

Otherwise, let me know and I will gladly help you address the situation as soon as possible.

Best regards,
Marco Paulo | Docusign Community Moderator