Encyte

Setting Up DocuSign Connect With Local Webhook Listener Using Ngrok With NodeJS: A Practical Guide

encyte

Shrenik Deep Sathiyanathan

10 min read

DocuSign, Ngrok, NodeJS
encyte

Introduction

While working on a project that required automating the process of sending, signing, and tracking documents, I encountered a challenge: setting up a local webhook listener to receive real-time updates from DocuSign when a document was signed. After scouring the web, I found that resources on integrating DocuSign Connect with a local development environment were limited, especially when using tools like Ngrok to expose a local server.

In this article, I’ll walk you through the process of setting up DocuSign Connect to receive webhook notifications locally with NodeJS. Using Ngrok, you can easily expose your local server to DocuSign for testing, allowing you to develop and debug in a more controlled environment. Whether you’re tracking document statuses, managing user notifications, or triggering workflows when contracts are signed, this guide will show you how to get started with DocuSign Connect and webhooks in a generalized, flexible setup.

What are Webhooks?

Webhooks are a way for applications to send real-time data to another service when a specific event occurs. Instead of continuously checking for updates, webhooks allow your application to receive event notifications automatically. When a designated event is triggered—such as a document being signed in DocuSign—the webhook sends an HTTP POST request to a specified URL (your webhook listener). This request contains a payload, typically in JSON format, with details about the event.

What is DocuSign Connect?

Before we explore what DocuSign Connect is, it’s essential to understand DocuSign itself. DocuSign is a leading e-signature platform that simplifies the process of sending, signing, and managing documents electronically. It enables users to sign legally binding agreements from anywhere and at any time, all through a secure online interface. This capability eliminates the need for printing, scanning, and mailing physical documents, making transactions quicker and more efficient.

Now, let’s discuss DocuSign Connect. This is a powerful webhook service that allows your applications to receive real-time notifications about specific events related to your documents. When events occur—such as a document being signed or completed—DocuSign sends an HTTP POST request to a specified URL with relevant details about the event. This functionality enables your system to automatically respond to these events, whether it’s storing a signed document, notifying stakeholders, or triggering additional workflows based on the document’s status. DocuSign Connect ensures that you stay informed and can act promptly, enhancing your overall document management process.

encyte

What is Ngrok?

To test and develop with DocuSign Connect locally, Ngrok comes in handy. Ngrok creates a secure tunnel to your local server, allowing you to expose your webhook listener to the internet. This way, you can easily receive and test the real-time notifications from DocuSign in your development environment without needing to deploy your application to a public server. By integrating DocuSign Connect with Ngrok, you can streamline your development process and ensure your application is responsive to document events.

Prerequisites

In this article we’ll be focusing on the implementation and setup of DocuSign connect with Ngrok and I’ve listed down the prerequisites that will be needed:

  • DocuSign Developer Account setup.
  • Local development environment (NodeJS).
  • Postman (optional) for testing webhooks locally.

Node Server Setup

To get started, initialize a new node project.

encyte

Next install basic packages that are required to get a server up and running.

encyte

Next we setup a simple node server.

encyte

Next setup a route for the webhook listener.

encyte

Now that we have the local Node.js server set up with a route, we can make POST requests to http://localhost:3000/hook using a tool like Postman. However, it’s important to note that this is still just a standard route at this point. We haven’t yet configured it to function as a webhook listener, but I’ll guide you through that process shortly.

DocuSign Connect Configuration

Next up is the DocuSign Connect Configuration which you can set up by following the DocuSign Connect Webhook Demo Tutorial. As you follow along the setup, you will come across the following field.

encyte

Now, you’re supposed to include the webhook listener route here and once you’ve set up a trigger event to your DocuSign document like the image below.

encyte

In this case when the recipient has Signed/Completed the document that was sent out, a JSON payload will be sent to the webhook listener route where you can setup what you want to include.

encyte

If we include http://localhost:3000/hook in the URL to publish field mentioned earlier, we won’t receive the payload. This is because our server is running locally, and the localhost route isn’t accessible from the internet. As a result, we can’t receive the payload returned from DocuSign. This is where Ngrok comes into play, allowing us to expose our local server to the internet and receive incoming requests.

Ngrok Setup

Firstly, we’ll have to sign up to an Ngrok account and follow the instructions which would be to installing Ngrok to your device, authenticating with an authentication token and running the command they provide to us in the project terminal which would look like ngrok http http://localhost:3000.

After successful installation and configuration, you’ll receive the Ngrok tunnel URL / Public URL equivalent to http://localhost:3000 which would look something like this in your terminal.

encyte

Now this is the URL you’ll have to include in your URL to publish field by also including the endpoint name which will be resulting in something like this,

encyte

 If your setup is successful, you will receive a JSON payload based on the document event trigger. You can then use this data to proceed with the necessary actions for your project.

Share On

You may also like

Maximizing Business Efficiency with Trello Project Management

Ahinsa Somaratne | 5 min read

In today's dynamic business landscape, effective project management is a cornerstone for success. Among the plethora of project management software options available,....

Read More -

7 things to know before you develop a mobile app

Asitha Vajirapani | 5 min read

It’s sometimes hard to fathom that just over a decade ago, our lives were vastly different to what it is today; and....

Read More -

Hybrid Vs. Native Mobile App Development. What is the best for your business?

Asitha Vajirapani | 4 min read

Introduction If you have been researching doing a mobile app for your business, chances are that you would have come across the....

Read More -

Want to know what we can do for your brand?