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.

Event NameDescriptionCan Event Be Temporarily Stopped?Compatible with the Standard Signing Ceremony?Compatible with the Mobile Signing Ceremony?
ESL:MESSAGE:STARTED:DOCUMENT_ACCEPTA signer has started to accept a consent or disclosure.NoYesYes
ESL:MESSAGE:SUCCESS:DOCUMENT_ACCEPTA signer has successfully accepted a consent or disclosure.YesYesYes
ESL:MESSAGE:ERROR:DOCUMENT_ACCEPTA signer has failed in their attempt to accept a consent or disclosure.No YesYes
ESL:MESSAGE:STARTED:PACKAGE_OPT_OUTA signer has started to opt out of a transaction.No YesYes
ESL:MESSAGE:SUCCESS:PACKAGE_OPT_OUTA signer has successfully opted out of a transaction.YesYesYes
ESL:MESSAGE:ERROR:PACKAGE_OPT_OUTA signer has failed in their attempt to opt out of a transaction.NoYesYes
ESL:MESSAGE:STARTED:PACKAGE_DECLINEA signer has started to decline a transaction.NoYesNo
ESL:MESSAGE:SUCCESS:PACKAGE_DECLINEA signer has successfully declined a transaction.YesYesNo
ESL:MESSAGE:ERROR:PACKAGE_DECLINEA signer has failed in their attempt to decline a transaction.NoYesNo
ESL:MESSAGE:STARTED:DOCUMENT_CONFIRMA signer has started to confirm a document.NoYesYes
ESL:MESSAGE:SUCCESS:DOCUMENT_CONFIRMA signer has successfully confirmed a document.YesYesYes
ESL:MESSAGE:ERROR:DOCUMENT_CONFIRMA signer has failed in their attempt to confirm a document.NoYesYes
ESL:MESSAGE:STARTED:SIGNER_COMPLETEA signer has started to complete a transaction.YesYesYes
ESL:MESSAGE:SUCCESS:SIGNER_COMPLETEA signer has successfully completed a transaction.NoYesYes
ESL:MESSAGE:STARTED:DOCUMENT_NAVIGATIONThe user has started navigating to another document.YesYesYes
ESL:MESSAGE:SUCCESS:DOCUMENT_NAVIGATIONThe user has successfully navigated to another document.NoYesYes

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
Share on Facebook0Tweet about this on Twitter0Share on Google+0Share on LinkedIn6Print this pageEmail this to someone
Share on Facebook0Tweet about this on Twitter0Share on Google+0Share on LinkedIn6Print this pageEmail this to someone
@eSignLive Setting Up An Event Notifier http://bit.ly/2kHduiH#esignlive # event # notifier # javascript Click to tweet

Leave a Reply