By embedding eformsign service pages in their legacy web application, customers can integrate and utilize eformsign electronic document services and workflow processes without actually visiting the eformsign site as if eformsign document service is a part of their legacy system. You will learn how to:
Embed an eformsign template in a webpage for the user to create a document
Get input data and recipients' information of the completed document
Load hosted libraries for Embed API
embedded-api.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- Load hosted libraries for EMBED API -->
<script src="https://www.eformsign.com/plugins/jquery/jquery.min.js"></script>
<script src="https://www.eformsign.com/lib/js/efs_embedded_v2.js"></script>
</head>
<body>
<span style="font-family: Arial, sans-serif;">
From your legacy application, you can open, fill in and submit eformsign documents.
</span><br>
<!-- declare iframe for eformsign page -->
<iframe id="eformsign_iframe" width="1080" height="850">
</iframe>
<script>
// login user
const user_key = "john.kim@forcs.com"; //const user_key = Date.now() + "";
console.log("user_key: " + user_key);
var eformsign = new EformSignDocument();
// prepare document option values
var document_option = {
"company": {
"id": '2b99....f427', // company id
"country_code": "sg", // sg, kr, ja
"user_key": user_key
// Compare the [user_key] with [outside_key] in browser local storage.
// force login if different.
},
"mode": {
"type": "01", // 01: create a document from the template,
// 02: update the document,
// 03: preview the document
"template_id": "44fc...3937", // form id
"document_id": "" // to edit a document
},
"user": {
"type": "01", // 01: internal user,
// 02: external user
"id": "john.kim@forcs.com" // default login id in the login form
},
"layout" : {
"lang_code" : "en", // display language: ko, en, ja
"header" : true, // eformsign header
"footer" : true // eformsign footer
},
"prefill": {
"document_name": "Leave Request Form",
"fields": [
]
},
"return_fields": [ // specify fields to get input values in return
"Name",
"Department",
"From",
"To",
"Reason",
"Other",
"Employee_Sign_Date"
],
"recipients": [
{
}
]
};
// success callback
var success_callback = function (response) {
console.log("response.code: " + response.code);
if (response.code == "-1") {
console.log(response.document_id);
console.log(response.title);
console.table(response.values);
console.table(response.recipients);
alert("Submitted successfully.");
$('#eformsign_iframe').remove();
} else if (response.code == "0") {
alert("Logged out.");
}
};
// error callback
var error_callback = function (response) {
console.log("response.code: " + response.code + ", message: " + response.message);
alert("Failed to submit.");
$('#eformsign_iframe').remove();
};
// set document options
eformsign.document(document_option, "eformsign_iframe", success_callback, error_callback);
// open document
eformsign.open();
</script>
</body>
</html>
document_option
Document option settings with Embed API will override those set in the Template management of the eformsign service.
Example
Employee
2. Complete the request and Send it to the approver
Approver
Log into the eformsign service as the approver.
Open the document from the Action required document box.
Complete the OFFICE USE ONLY section and Complete.
