I've been reading up on Answers for Topaz integrations, and it seems everyone references the same couple of articles (https://answers.laserfiche.com/questions/114543/Forms-102--Topaz-Signature-Pad#117279 and https://answers.laserfiche.com/questions/86327/Topaz-signature-Pads-and-Laserfiche-Forms).

I've attempted to replicate this functionality with a T-L462-HSB-R, and have had zero luck with getting anything other than a custom HTML box/buttons staring me in the face using the code from these articles.

Through a customer and myself, we started using SigPlusExtLite and some custom HTML fields to get a working solution. (Code below) Through some trial and error along with some sample code from Topaz, I've got it working and have multiple signature fields all working as expected when viewing the form. Unfortunately, the signature doesn't actually save into Laserfiche when submitted. The field reverts back to the static text of "Click to sign" essentially, and there is no signature to be found (in either a PDF or Tiff).

So now I'm stuck with a solution that I can't get to work, but seems to be working elsewhere, and a solution that half works with the inability to save the signatures that are captured. Any input/direction would be greatly appreciated in getting this integration complete.

Custom HTML Field for signature:

<canvas id="staffsign" name="staffsign" width="500" height="100" style="border:1px solid #000000;"></canvas>

JavaScript running for this:

$(document).ready(function(){
var signspace = document.getElementById("staffsign")
var ink = signspace.getContext("2d");
ink.font = "30px Courier";
ink.fillStyle = "black";
ink.textAlign = "center";
ink.fillText("Click For Staff Signature", signspace.width/2, signspace.height/2); 
  $('#staffsign').on("click", function(e) {
StartStaffSign();
  }); 
});

var staffimgWidth;
var staffimgHeight;

function StartStaffSign()
	 {      
	    var canvasObj = document.getElementById('staffsign');
		canvasObj.getContext('2d').clearRect(0, 0, canvasObj.width, canvasObj.height);
		staffimgWidth = canvasObj.width;
		staffimgHeight = canvasObj.height;
		var message = { "firstName": "", "lastName": "", "eMail": "", "location": "", "imageFormat": 1, "imageX": staffimgWidth, "imageY": staffimgHeight, "imageTransparency": false, "imageScaling": false, "maxUpScalePercent": 0.0, "rawDataFormat": "ENC", "minSigPoints": 25 };
		document.addEventListener('SignResponse', StaffSignResponse, false);
		var messageData = JSON.stringify(message);
		var element = document.createElement("MyExtensionDataElement");
		element.setAttribute("messageAttribute", messageData);
		document.documentElement.appendChild(element);
		var evt = document.createEvent("Events");
		evt.initEvent("SignStartEvent", true, false);				
		element.dispatchEvent(evt);		
    }

function StaffSignResponse(event)
	{	
		var str = event.target.getAttribute("msgAttribute");
		var obj = JSON.parse(str);
		SetStaffValues(obj, staffimgWidth, staffimgHeight);

	}

function SetStaffValues(objResponse, imageWidth, imageHeight)
	{
        var obj = JSON.parse(JSON.stringify(objResponse));
	    var ink = document.getElementById('staffsign').getContext('2d');

			if (obj.errorMsg != null && obj.errorMsg!="" && obj.errorMsg!="undefined")
			{
                alert(obj.errorMsg);
            }
            else
			{
                if (obj.isSigned)
				{
					var img = new Image();
					img.onload = function () 
					{
						ink.drawImage(img, 0, 0, imageWidth, imageHeight);
					}
					img.src = "data:image/png;base64," + obj.imageData;
                }
            }
    }