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.
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.
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.
.jpg)
.png)
