search

Embed API

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

hashtag
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 = "[email protected]"; //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": "[email protected]" // 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>

hashtag
document_option

triangle-exclamation

Document option settings with Embed API will override those set in the Template management of the eformsign service.

hashtag
Example

hashtag
Employee

1. Open the embeded-api.htmlarrow-up-right

2. Complete the request and Send it to the approver

hashtag
Approver

  1. Log into the eformsign service as the approver.

  2. Open the document from the Action required document box.

  3. Complete the OFFICE USE ONLY section and Complete.

PreviousPreparationNextWebhook Overview

Last updated