Products Technologies Demo Docs Blog Support Company

Customizing the Electronic Signature Box

An improved feature of the DocumentViewer allows the customization of the signature box to add additional information such as location information or IP addresses. This article shows how to use customized signature boxes.

Customizing the Electronic Signature Box

We published a new version of the ASP.NET MVC DocumentViewer with two new features:

  • Signature smoothing
    Signatures are simplified with an efficient line smoothing algorithm. Lines are captured as vectors, stored in arrays and finally de-noised and simplified in a post-process.
  • Customized signature boxes
    It is possible to define the content and style of the signature boxes in the template itself. Each signature box can have it's own individual style.

You can update the NuGet package with the current version to test these new features:

https://www.nuget.org/packages/TXTextControl.Web.DocumentViewer/29.0.301.500

Signature Smoothing

In an earlier version, we introduced the smoothing algorithm for annotations, but now the same line smoothing feature is available for drawn signatures using the signature soft pad:

Signature smoothing

Customized Signature Boxes

The signature box and the rendered information can now be completely customized. The following screenshot shows a customized signature box in the online document editor:

Signature box

The signature box must be a TextFrame object with static content, merge fields, image placeholders or barcodes. It can contain all available elements that will be merged during the creation of the document.

In the view helper, custom data can be passed in the SignatureSettings class that is used to merge the custom signature box content. Any object can be used to pass the additional data to the signing process.

@Html.TXTextControl().DocumentViewer(settings =>
{
    settings.DocumentPath = Server.MapPath("~/App_Data/Documents/nda.tx");
    settings.Dock = DocumentViewerSettings.DockStyle.Fill;
    settings.SignatureSettings = new SignatureSettings()
    {
        ShowSignatureBar = true,
        OwnerName = "Paul Paulsen",
        SignerName = "Tim Typer",
        SignerInitials = "TT",
        SignatureBoxName = "txsign",
        UniqueId = uniqueID,

        CustomSignatureData = new SignatureData() {
            Barcode = "123",
            IPAddress = Request.UserHostAddress,
            Signer = "Tim Typer",
            UniqueID = uniqueID
        }

    };
}).Render()

Just like with templates prepared for MailMerge, properties of the given CustomSignatureData object are matched to merge field names in the TextFrame. The image placeholder name that should be replaced with the actual signature should have the name TxSignatureImage to get properly merged.

In case, CustomSignatureData is found in the settings, the custom content is used in the template. Otherwise, the default signature box is rendered like in previous versions of the DocumentViewer.

Signature box

The above custom signature box renders the electronic signature, the given document ID, the IP address of the user, the signer's name and a time stamp. Additionally, a barcode is added that could be used to track the document. The QR Code could contain a link that opens a website to verify the document and validity.

Thanks to the flexibility and the way how the process of signing documents can be customized, any workflow can be implemented. Feel free to contact us to learn more about how Text Control can help you adding digital and electronic signatures to your business processes.

See these new features live in our live demos:

Start demo

Stay in the loop!

Subscribe to the newsletter to receive the latest updates.

ASP.NET

Integrate document processing into your applications to create documents such as PDFs and MS Word documents, including client-side document editing, viewing, and electronic signatures.

ASP.NET Core
Angular
Blazor
JavaScript
React
  • Angular
  • Blazor
  • React
  • JavaScript
  • ASP.NET MVC, ASP.NET Core, and WebForms

Learn more Trial token Download trial

Related Posts

AngularASP.NETDocument Processing

Creation of Custom Electronic Signature Boxes

This article describes the customization of electronic signature boxes. It contains further explanations including the creation of templates and shows all code snippets required. The step-by-step…


ASP.NETDS ServerElectronic Signature

Electronic Signature Reference Implementation Demo

We just released a reference implementation demo that shows how to use Text Control technology to integrate electronic signature workflows. The implementation is a fully functional web application…


ASP.NETASP.NET CoreDOCX

Sign Documents with a Self-Signed Digital ID From Adobe Acrobat Reader in…

This article shows how to create a self-signed digital ID using Adobe Acrobat Reader and how to use it to sign documents in .NET C#. The article also shows how to create a PDF document with a…


ASP.NETASP.NET CoreElectronic Signature

Whitepaper: Integrate On-Premise Electronic Signature Processes into Web…

We published a whitepaper that gives an overview of how to integrate on-premises electronic signature processes into web applications. Download the full whitepaper and learn how Text Control can…


AngularASP.NETASP.NET Core

Document Viewer: Uploading Signatures

The document viewer that is part of TX Text Control .NET Server provides a feature to deploy forms and documents to collect electronic signatures from users. This article shows how signature…