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

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

When you are developing platforms that require documents to be signed as part of the onboarding process (ex. contracts for new vendors, contractors or employees), this can often be a point of friction for your users. Before they can benefit from your service, they will have to find their own way to sign these documents and they could leave your application as a result, or ditch the process entirely.


With the HelloSign API, you could automate the signing process for your users so they can sign documents using eSignatures in just a few clicks. A streamlined document signing process creates a better onboarding experience, which means your users can get started faster.


In the first part of this video tutorial, I’ll show you how to implement a simple onboarding workflow with eSignatures using the HelloSign Node.JS SDK. You will find the code implemented throughout the video in the section below in case you want to replicate it on your own.


Now grab a cup of your favorite coffee, tea or beverage; adjust to your favorite reproduction speed; and enjoy the video. For further details, visit the HelloSign Developer Portal.

If you want to run the sample in the video on your own, here are the commands and the code for this project.

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
      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' // make sure to define this role in your template
        }],
        //files:['contract.docx']
        template_id:'<Your template ID>',
        custom_fields:{
          mailing_address:session.mailing_address
        }
      }
    
      try {
        await hellosign.signatureRequest.sendWithTemplate(options);
      } 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">
    </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>
        async function sign() {
          let resp = await fetch('/sign',{method:'POST'});
          if(resp.ok){
            alert('Check your email');
          }else{
            alert('Oh NO!!')
          }
        }
      </script>
    </body>
    </html>
  

In the second part, I’ll show you how to integrate the signing process directly into your website or app using Embedded Signing. This will help improve user experience since your users won’t have to leave the current workflow and check for an incoming email to get their document signed.


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