Blog: Developer

Setting Up eSignLive’s Event Notifier

javascript

This blog will walk you through the Event Notifier that was introduced in the 10.13.14 and 11.0.5 releases of eSignLive. When embedding eSignLive’s signing ceremony into an iframe, the Event Notifier can send notifications to the parent host application. This is particularly useful if you want to take actions when certain steps of the signing ceremony have been accomplished. After receiving such a notification, you can interrupt eSignLive’s normal flow to perform some asynchronous task (e.g. ask the user to confirm a request), and then notify eSignLive to resume its normal flow.

Starting the Event Notifier

You can write your eSignLive Event Notifier in plain JavaScript. Your application must be listening to eSignLive’s message events, as shown below:

window.addEventListener('message', receiveMessage, false);

To get your Event Notifier started, your listener should be something along these lines:

function receiveMessage(event) {
      var origin = event.origin || event.originalEvent.origin;
      var data = event.data;
      console.log(data, origin);

      switch (data) {
            case 'ESL:MESSAGE:REGISTER':
                  event.source.postMessage('ESL:MESSAGE:ACTIVATE_EVENTS', origin);
                  break;
            default:
                  event.source.postMessage(data, origin)
                  break;
      }
}

Upon loading a page in an iframe, eSignLive will initially fire an ESL:MESSAGE:REGISTER event. In return, your application must send back to eSignLive the event ESL:MESSAGE:ACTIVATE_EVENTS. If this doesn’t happen, eSignLive will assume that no one is listening, and no other events will be fired.

Interrupting eSignLive’s Normal Flow of Activity

Some events can be temporarily stopped (the events in question are identified in the third column of the table below). For example, you can change the listener above as follows:

switch (data) {
	case 'ESL:MESSAGE:REGISTER':
		event.source.postMessage('ESL:MESSAGE:ACTIVATE_EVENTS', origin);
		break;

	case 'ESL:MESSAGE:SUCCESS:SIGNER_COMPLETE':
		event.source.postMessage('ESL:MESSAGE:SUCCESS:SIGNER_COMPLETE', origin);
		//$("#myIframe").hide();    hide iframe
		window.location.href = "https://www.google.com"; //redirect to google
		break;

	default:
		event.source.postMessage(data, origin)
		break;
}

In the code above, the signer will be redirected to Google’s homepage in the parent window (i.e. not inside the iframe) once he/she has completed signing the documents.

Note: If events are not sent back as they are received, eSignLive will not resume its normal activity.

Notification Event Types

The following table describes the types of notification events your event listener can listen to.

[table id=6 /]

You can download a complete working example code from the Developer Community Code Share.

If you have questions regarding this blog or anything else concerning integrating eSignLive into your application, visit the developer community forums: developer.esignlive.com. That’s it from me. Thank you for reading! If you found this post helpful, please share it on Facebook, Twitter, or LinkedIn. You can find all of my previous blogs by going to my author page.

Haris Haidary
Junior Technical Evangelist
LinkedIn | Twitter

eSignLive Developer Community!

Join the eSignLive Developer Community!
Forums, blogs, documentation, SDK downloads and more.

Join Today
@eSignLive Setting Up An Event Notifier http://bit.ly/2kHduiH#esignlive # event # notifier # javascript Click to tweet

Leave a Reply