The TrueSign signing interface can be embedded in an iFrame which allows TrueSign's signing interface to be included directly within your application. This is currently supported only for external signers.

iFrame URL#

To generate the URL that will be used to embed TrueSign in the iFrame, you will need to access the envelope JSON once the envelope has been sent for signature. Each Signer will have an EnvelopeUrl populated which will look something like this:

https://app.truesign.com/External/CfDJ8I5BVl0IBUpAtwWpltgoOrk367y7hQvD98jN4aYw4_QPJyKjYAnMcgIZG5LZNf2SElCnxPA7442tz6y81y3h8rEObPBJuFKxQPmo4nz2ql1OjjS2fReQYwRgdYMD3zPPgMsOg9PVg74RqnIN2UPEZ-WC7y0SNIGAavJILVfQk879HGHuO9KVkU0t_2KZEA-400GIuEWx0Iv9SZaFiMvwcA16fwabQaqXMuS4fzHs8cIUMFQyVTqKPxDRoCLn_JDAHA

This URL must be updated so the "/External/" section of the URL is replaced with "/EmbeddedExternal/". This is the updated URL from above:

https://app.truesign.com/EmbeddedExternal/CfDJ8I5BVl0IBUpAtwWpltgoOrk367y7hQvD98jN4aYw4_QPJyKjYAnMcgIZG5LZNf2SElCnxPA7442tz6y81y3h8rEObPBJuFKxQPmo4nz2ql1OjjS2fReQYwRgdYMD3zPPgMsOg9PVg74RqnIN2UPEZ-WC7y0SNIGAavJILVfQk879HGHuO9KVkU0t_2KZEA-400GIuEWx0Iv9SZaFiMvwcA16fwabQaqXMuS4fzHs8cIUMFQyVTqKPxDRoCLn_JDAHA

iFrame External Signing Page#

The iFrame version of the external signing page has been optimized to be embedded in an iFrame. Because of this, it does not include the top header bar and the "Welcome to TrueSign" modal does not display. Additionally it includes mechanisms for the parent page to send and receieve messages with the TrueSign signing page. The consent dialog will still display, requiring acceptance by the signer.

Communication between the embedded TrueSign page and the parent page is managed through the javascript PostMessage function. See MDN postMessage() method for more information.

Receiving Messages from TrueSign#

The TrueSign iFrame will send messages to the parent page, which can be received by registering an event listener to the "message" event.

Messages that are sent to TrueSign and received by TrueSign have the following structure:

{
     EventType : "ConsentAccepted",
     EventData : ""
}

This is typically how to add an event listener to receive the messages:

window.addEventListener("message", function(event) {
    if (event.origin === "https://app.truesign.com") {
        // React to the message here
        // event.data.EventType -- a string indicating the type of event that occurred
        // event.data.EventData -- a string that may include additional information about the event
    }
});

These are the events that TrueSign will send:

Event	EventType	Notes
Accept/Decline Consent clicked	"ConsentAccepted" or "ConsentDeclined"	When the consent dialog is either accepted or declined, a message is sent.
Document Loaded	"DocumentLoaded"	When a document has successfully loaded in TrueSign. This will occur when the envelope/document initially loads and also when a user moves between documents. The index (zero based) of the document that was loaded is passed in the EventData.
Document Failed to Load	"DocumentLoadFailed"	When a document cannot be loaded in TrueSign. This can occur if the document cannot be accessed, or if there is an issue with the PDF. The index (zero based) of the document that was loaded is passed in the EventData.
Continue Later Clicked	"ContinueLaterClicked"	When the user clicks the Continue Later button.
Complete Clicked	"CompleteClicked"	When the user clicks the Complete button.
Reject Clicked	"RejectClicked"	When the user clicks the Reject button.

Sending Messages to TrueSign#

Messages can also be sent to the TrueSign iFrame from the parent. This is accomplished using the postMessage method. The following example method can be used to send a message:

function sendMessage(eventType, eventData) {
    const iframe = document.getElementById("dynamicIframe"); // "dynamicIframe" must be replaced by the id of the TrueSign iFrame
        iframe.contentWindow.postMessage({
        EventType: eventType,
        EventData: eventData
    }, "*");
}

These are the Event Types that TrueSign can receive:

EventType	Notes
GoToPage	The EventData should include the page number (not zero based). When this event is received, TrueSign will navigate to the page provided in the EventData.
GoToDocument	The EventData should include the document index (zero based). When this event is received, TrueSign will navigate to the document provided in the EventData.
ContinueLaterClick	When this event is received, TrueSign will trigger the Continue Later button.
CompleteClick	When this event is received, TrueSign will trigger the Complete button.
RejectClick	When this event is received, TrueSign will trigger the Reject button.
GuideMeClick	When this event is received, TrueSign will trigger the Guide Me button. If there are no anchors on the document, then this event will be ignored.

Additional iFrame Customization#

The TrueSign embedded page can also be customized by adding additional parameters to the URL. The following parameters can be included:

URL Parameter	Values	Notes
RemoveSideBar	True/False	If the value is set to True, then the side bar will not be rendered on the page. If the RemoveSideBar parameter is not included in the URL, then the side bar will be shown by default. NOTE: The side bar includes the buttons necessary for the user to complete the envelope, so if the side bar is removed then it is expected that the parent application will use the "CompleteClick" or "RejectClick" messages to complete the envelope.
HideSideBar	True/False	If the value is set to True, then the side bar should be initially hidden. If the HideSideBar parameter is not included in the URL, then the side bar will be visible by default.
ShowContinueLater	True/False	If the value is set to True, then the Continue Later button will be displayed. The Continue Later button will be hidden by default.

For example, to hide the side bar (properties panel), the HideSideBar parameter can be included at the end of the iFrame URL and set to True. The URL would look like this:

https://app.truesign.com/EmbeddedExternal/CfDJ8I5BVl0IBUpAtwWpltgoOrk367y7hQvD98jN4aYw4_QPJyKjYAnMcgIZG5LZNf2SElCnxPA7442tz6y81y3h8rEObPBJuFKxQPmo4nz2ql1OjjS2fReQYwRgdYMD3zPPgMsOg9PVg74RqnIN2UPEZ-WC7y0SNIGAavJILVfQk879HGHuO9KVkU0t_2KZEA-400GIuEWx0Iv9SZaFiMvwcA16fwabQaqXMuS4fzHs8cIUMFQyVTqKPxDRoCLn_JDAHA?HideSideBar=True