Skip to main content
Skip table of contents

Enable Scribble Signatures

Once the signatures have been set up, it is possible to enable the Scribble functionality. Scribble allows signers to sign by writing their signature on a touch screen. Currently, a few steps are required in order to enable Scribble functionality in Engage templates.

  1. Update the template to the latest version. In the home tab, navigate to the Main Flow. In the Main Flow, select the Start Flow step.

    image-20240112-103457.png

  2. Change the set command to the following:

    image-20240112-103532.png

  3. In the Main Flow, select the Settings step and click Edit Step.

    image-20240112-102720.png

  4. Find the command buildMap var=sign and add a new setBoolean command as show in the image.

    image-20240112-103320.png

  5. Open the content body where the signatures have been placed, for example the Document.

    image-20240112-102940.png

  6. Right click on the Document and select Open HTML source.

    image-20240112-103023.png

  7. Locate the code for the signature section, it should look something like this:

    CODE
    <div id="dyn-signature-section">
          <div class="dyn-sign-block" dyn-bound-repeat="dynSigners" dyn-bound-repeat-show-controls="false" dyn-bound-repeat-var="i">
            <div class="dyn-sign-company" dyn-bound-if="dynSignFields.company.visible"><span dyn-bound-content="i.company">[company]</span></div>
    
            <div class="dyn-sign-date"><span dyn-bound-content="dynSignFields.date.label">Date:</span> <span dyn-bound-content="i.date" dyn-bound-if="i.signed">[date]</span></div>
    
            <div class="dyn-sign-fullName"><span dyn-bound-content="dynSignFields.fullName.label">By:</span> <span dyn-bound-content="i.fullName">[fullName]</span></div>
    
            <div class="dyn-sign-title" dyn-bound-if="dynSignFields.title.visible"><span dyn-bound-content="dynSignFields.title.label">Title:</span> <span dyn-bound-content="i.title">[title]</span></div>
    
            <div class="dyn-sign-signature">&#160; <span dyn-bound-content="i.fullName" dyn-bound-if="i.signed">[signature]</span><button dyn-bound-attr="name=i.buttonId" dyn-bound-content="dynSignFields.button.label" dyn-bound-if="i.canSign" dyn-next="Sign" dyn-next-checks-required="true"
                dyn-next-message="Preparing for signature" type="submit">[Sign here]</button> &#160;</div>
    
            <div class="dyn-sign-info" dyn-bound-content="i.info" dyn-bound-if="dynSignFields.info.visible">[info]</div>
    
            <div class="dyn-sign-id" dyn-bound-content="i.id" dyn-bound-if="dynSignFields.id.visible">[id]</div>
          </div>
        </div>

  8. Replace that code with the following code:

    CODE
    <div id="dyn-signature-section">
          <div class="dyn-sign-block" dyn-bound-repeat-show-controls="false" dyn-repeat="dynSigners" dyn-repeat-var="i">
            <div class="dyn-sign-company" dyn-if="dynSignFields.company.visible"><span dyn-content="i.company" dyn-if="i.company">[company]</span></div>
    
            <div class="dyn-sign-date"><span dyn-content="dynSignFields.date.label">Date:</span> <span dyn-content="i.date" dyn-if="i.signed">[date]</span></div>
    
            <div class="dyn-sign-fullName"><span dyn-content="dynSignFields.fullName.label">By:</span> <span dyn-content="i.fullName">[fullName]</span></div>
    
            <div class="dyn-sign-title" dyn-if="dynSignFields.title.visible and not empty i.title"><span dyn-content="dynSignFields.title.label">Title:</span> <span dyn-content="i.title">[title]</span></div>
    
            <div class="dyn-sign-signature"><img alt="" dyn-if="i.signed" dyn-src="i.image" src="https://dynamo.documill.com/style/placeholder.png" /><button dyn-content="dynSignFields.button.label" dyn-if="i.canSign" dyn-next="Sign" dyn-next-checks-required="true" dyn-next-message="Preparing for signature"
                dyna-name="i.buttonId" type="submit">[Sign here]</button> &#160;</div>
    
            <div class="dyn-sign-info" dyn-content="i.info" dyn-if="dynSignFields.info.visible">[info]</div>
    
            <div class="dyn-sign-id" dyn-content="i.id" dyn-if="dynSignFields.id.visible">[id]</div>
          </div>
        </div>

  9. Save the template and test. When the signer receives an email prompting them to sign the document and they decide to go ahead with signing, they will see the following screen:

    image-20240112-103853.png

    Here they can choose if they want to either Draw, Type or Upload their signature.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.