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'; = '[email protected]';

    // 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 = '[email protected]';

    // Send the signature request. Notice the different method name.
    HelloSign.HelloSignDraftDocumentService.SendSignatureResponse response = 

    // 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="" />
  <!-- For more information about the following JavaScript, see     -->
  <!-- -->
  <!-- NB: Only embedded SENDING is available; embedded SIGNING is  --> 
  <!-- not currently supported in HelloSign for Salesforce.         -->
      url: "{!ClaimURL}",
      allowCancel: true,
      messageListener: function(eventData) {
        if (eventData.event == HelloSign.EVENT_SENT) {
        } else if (eventData.event == HelloSign.EVENT_ERROR) {

  <apex:actionFunction name="showSuccess" action="{!showSuccess}" rerender="hellosign" />
  <apex:actionFunction name="showError" action="{!showError}" rerender="hellosign" />

  <apex:pageBlock id="hellosign">
    <apex:pageBlockSection rendered="{!showWelcome}">
      Please prepare and send the Signature Request in the popup window.
    <apex:pageBlockSection rendered="{!showSuccess}">
      Your Signature Request has been sent.
    <apex:pageBlockSection rendered="{!showError}">
      An error occurred.