Guides
These docs are for v4.6. Click to read the latest docs for v4.29.

Example 4: Create a draft Signature Request that a user can edit and preview before sending

The previous examples all demonstrate sending a Signature Request automatically using Apex. If you’d like your users to preview the Signature Request first and make any edits (eg. moving a signature field to align with text), you’d use the HelloSignDraftDocumentService class, which extends the functionality in the HelloSignDocumentService class highlighted above. You’ll additionally need to create a Lightning Component or Visualforce Page that includes Javascript to display the Prepare and Preview screens in an iframe.

Apex Controller

public with sharing class CreateEmbeddedDraft { public String claimURL {public get; private set;} public Boolean showWelcome {public get; private set;} public Boolean showSuccess {public get; private set;} public Boolean showError {public get; private set;} // Your HelloSign client ID is necessary when using our Embedded Sending methods. public static String getHelloSignClientId() { return HelloSign.HelloSignDocumentService.getHelloSignClientId(); } public CreateEmbeddedDraft() { showWelcome = true; showSuccess = false; showError = false; } public void showError() { showWelcome = false; showSuccess = false; showError = true; } public void showSuccess() { showWelcome = false; showSuccess = true; showError = false; } public void createDraft() { // Specify a parent record and signer. See Example 1 above for more details. Id parentId = '001f200001cFD4x'; HelloSign.HelloSignDraftDocumentService.Signer signer = new HelloSign.HelloSignDraftDocumentService.Signer(); signer.name = 'Signer Name'; signer.email = 'signer@example.com'; // Specify a document HelloSign.HelloSignDraftDocumentService.Document doc = new HelloSign.HelloSignDraftDocumentService.Document(); doc.recordId = '069f2000005M1lp'; List<HelloSign.HelloSignDraftDocumentService.Document> docs = new List<HelloSign.HelloSignDraftDocumentService.Document>{doc}; // Set up the Signature Request service object like in the above examples HelloSign.HelloSignDraftDocumentService.SignatureRequest sigReq = New HelloSign.HelloSignDraftDocumentService.SignatureRequest(); sigReq.subject = 'Embedded Draft'; // NB: “title” is not a valid property for this particular method. sigReq.message = 'Please sign the agreement'; sigReq.signers = new List<HelloSign.HelloSignDraftDocumentService.Signer>{signer}; // The requestorEmailAddress property must be set when using this approach sigReq.requestorEmailAddress = 'sales@example.com'; // Send the signature request. Notice the different method name. HelloSign.HelloSignDraftDocumentService.SendSignatureResponse response = HelloSign.HelloSignDraftDocumentService.sendSignatureRequestDraft(parentId, docs, sigReq); // Get the draft claim URL that will be used in your Visualforce page below claimURL = response.claimURL; } }

Visualforce Page

<apex:page showHeader="true" controller="CreateEmbeddedDraft" action="{!createDraft}"> <apex:includeScript value="https://s3.amazonaws.com/cdn.hellosign.com/public/js/hellosign-embedded.LATEST.min.js" /> <!-- For more information about the following JavaScript, see --> <!-- https://app.hellosign.com/api/embeddedRequestingWalkthrough. --> <!-- NB: Only embedded SENDING is available; embedded SIGNING is --> <!-- not currently supported in HelloSign for Salesforce. --> <script> HelloSign.init("{!HelloSignClientId}"); HelloSign.open({ url: "{!ClaimURL}", allowCancel: true, messageListener: function(eventData) { if (eventData.event == HelloSign.EVENT_SENT) { showSuccess(); } else if (eventData.event == HelloSign.EVENT_ERROR) { showError(); } } }); </script> <apex:form> <apex:actionFunction name="showSuccess" action="{!showSuccess}" rerender="hellosign" /> <apex:actionFunction name="showError" action="{!showError}" rerender="hellosign" /> </apex:form> <apex:pageBlock id="hellosign"> <apex:pageBlockSection rendered="{!showWelcome}"> Please prepare and send the Signature Request in the popup window. </apex:pageBlockSection> <apex:pageBlockSection rendered="{!showSuccess}"> Your Signature Request has been sent. </apex:pageBlockSection> <apex:pageBlockSection rendered="{!showError}"> An error occurred. </apex:pageBlockSection> </apex:pageBlock> </apex:page>