Video Tutorial: Implementing user onboarding workflows with NodeJS and the HelloSign API (Part 2)

"Video Tutorial: Implementing user onboarding workflows with NodeJS and the HelloSign API (Part 2)" header image

Incorporating eSignatures into your onboarding workflows is really easy with the HelloSign API. In the first part of this video tutorial, I showed how you can add a button to your website to trigger an automated email from HelloSign with the document to be signed electronically. In this second part, I will build on this example using the HelloSign NodeJS SDK and take the user experience to the next level by integrating an end-to-end signing process for your website. In other words, users won’t need to switch tabs or open their email to sign a document.


So again, grab a second cup of coffee or tea and enjoy the video. You will find the source code right below. To learn more about the HelloSign API or start testing for free, visit our Developer Portal.

Code and Next Steps

In order to add eSignature capabilities directly to your website (embedded signing), here are the steps that you need to perform. In the code below, the client is implemented in views/index.hbs and the server in the index.js file.

Diagram of the embedded signing flow for the given example
Embedded Signing flow for this example


To run the sample in the video, here are the commands and the code for this project. Remember that this code is shown for testing purposes and you should make sure never to hardcode an API Key or ClientID directly into your source code. Instead, load it from some environment configuration.

Command line Initialization

  
    npm init -y
    npm install --save express hbs hellosign-sdk
  

index.js

  
    const express = require('express');
    const app = express();
    const hellosign = require('hellosign-sdk')({key:'<Your API Key>'});
    var session;

    app.listen(3000,()=>console.log('Server listening'));
    app.set('view engine','hbs');

    app.get('/',(req,res)=>{
      //authenticate first, we are simulating loading a session
      session = {
        name: 'Bob',
        email_address: 'bob@<yourdomain>.com',
        mailing_address: '1800 Owens St'
      }
      //res.sendFile("views/index.html",{root:__dirname});
      res.render('index',{username:session.name})
    });

    app.post('/sign',async (req,res)=>{
      let options = {
        test_mode:1,
        signers:[{
          name:session.name,
          email_address:session.email_address,
          role:'Customer'
        }],
        //files:['contract.docx']
        template_id:'<Your template ID>',
        custom_fields:{
          mailing_address:session.mailing_address
        },
        clientId:'<Your Client_ID from the HelloSign API App>'
      }

      try {
        let resp = await hellosign.signatureRequest.createEmbeddedWithTemplate(options);
        let signature_id = resp.signature_request.signatures[0].signature_id;

        let resp_url = await hellosign.embedded.getSignUrl(signature_id);
        res.send(resp_url.embedded.sign_url);
      } catch (e) {
        console.log(e);
        res.send(500);
      } finally {
        res.end();
      }

    });
  

views/index.hbs

  
    <!DOCTYPE html>
    <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <script src="https://cdn.hellosign.com/public/js/embedded/v2.10.0/embedded.development.js"></script>
    </head>
    <body>
      <div class="jumbotron">
        <h1 >Welcome back {{username}}</h1>
        <p>To continue please sign our customer agreement</p>
        <button onclick="sign()" class="btn btn-primary">Sign Now</button>
      </div>
      <script>

        // Create the HelloSign Embedded instance.
        // Only do this once!
        const client = new HelloSign({
          clientId: '<Your Client ID for the HelloSign API App>'
        });

        async function sign() {
          let resp = await fetch('/sign',{method:'POST'});
          if(resp.ok){
            //alert('Check your email');
            let signUrl = await resp.text();
            client.open(signUrl,{skipDomainVerification:true});
          }else{
            alert('Oh NO!!')
          }
        }
      </script>
    </body>
    </html>
  

What to do from here

If you want to improve the user experience even further, the HelloSign API also allows you to fully personalize the signing experience by adding a custom logo and your brand’s colors with white labeling.


To learn more about the HelloSign API and start testing for free, visit HelloSign’s Developer Portal

Ready to integrate signatures into your app or website?

Let us help you build a custom API plan that fits your unique business needs.

Get news, insights and posts directly in your inbox

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Oops! Something went wrong while submitting the form.
true