RClick allows enterprise users within RSign to seamlessly integrate electronic signatures into their web applications, while also generating signature certificates for signers.
This article includes the following topics:
Required configuration in RSign
These are the steps the customer admin needs to take to use the RClick feature:
1. Set the Enable RClick setting to Y (enabled).
When set to enabled, two additional controls become available, specifying the RClick ID, which uniquely identifies the client web application, and the RClick Key, a secure code that the client's web application needs to send to RSign during web API calls.
2. Enable the Show Control ID setting.
3. Create a template that mirrors the form or document where the user will input their information and signature in the webpage. To make the template appear like the webpage on which the signer will apply their signature, affix your company logo to the document before uploading it to the template. Place controls fields where the transactional data appears on the customer's webpage to hold that data.
4. Take note of the Template code.
Required configuration in the client's web app
Application developers of the client application can embed an RClick signature block, which is a snippet of JavaScript code, in their web application. The RClick signature block allows them to pass authentication and transaction data displayed on the webpage to RSign, along with the signer's signature image via API calls. RSign combines the client's transaction data, and signers’ electronic signature with the template document, and applies its digital certificate to provide a final signed document and certification of completion to the invoking application.
Here are the steps that developers in the client's web app need to follow to use the RClick feature:
1. Fetch the structure of the JSON payload to send transaction data by invoking an RSign API.
To ensure that transaction data displayed on the client's webpage is correctly mapped onto the template, RSign offers the GetSignerControls API. This API fetches the structure of the JSON payload containing the control IDs for all the controls positioned within the document. Retrieve the payload, assign corresponding values to the control IDs within the JSON structure, and transmit it to RSign through an API call. To do so, follow these steps:
- Invoke the GetSignerControls API: To do so, you will need an authentication token. To get it, install a REST client from the Chrome web store in your Chrome browser.
- Invoke the Authenticate User API by passing the following payload:
API URL: https://api3.use.rsign.com/api/V1/Authentication/AuthenticateUser
Payload:
{
"EmailId": "johndoe@rpost.com",
"Password": "rpostpassword"
}
In the plugin, enter your RSign username and password and select Post from the dropdown menu.
Then click on Send Request.
The browser client will send the request and return the AuthToken. Copy the highlighted content and preserve it for subsequent API calls.

- Call the GetSignerControl API by entering this URL: https://api3.use.rsign.com/api/V1/Envelope/GetSignerControls/62649
Note: The final number corresponds to the template code of the template created to mimic the form on the client's webpage.
In Authentication enter the AuthToken you copied on the previous step,
Select Get from the dropdown menu. Then click on Send Request.
- This API returns the following payload. The client App code will populate the Control Values:
2. Embed the RSign signature block into a client web page.
- Create two DIV elements in the client HTML code where the HTML control needs to be placed. Name the div elements as rs-Signature1, and hdnSignatureID1.
- Embed the RClick JavaScript code snippet shown below in the HTML page.
- It will load the ‘sign.rclick.js' script provided by RSign.
- While creating the template, the HTML ID of the prefix of the signature control should be signControl, and while invoking, pass the same HTML ID signControl.
- The Control ID values in the payload are not mandatory in the current version.
// Comments in green colors
const script= document.createElement('script');
// Set RClick external file source. This will change when the code moves to production.
script.src = ' {{Base}}/scripts/custom/sign.rclick.js'; // Change base with host URL
// Set async to true for asynchronous loading
script.async = true;
// Append the script tag to the document head
document.head.appendChild(script);
// loadRClickScript function that will be called once the script is loaded
const loadRClickScript = () => {
const data = JSON.stringify({
rclickId:rclickId, // Available in RSign SETTINGS -> Advanced Tab
rclickKey:rclickKey, // Available in RSign SETTINGS -> Advanced Tab
token:authToken, // Authentication token returned from Authenticate User API
environment:'STG', // STG is staging env. After successful testing change to PROD.
signControls:[{
signControlId: 'rs-Signature1', // div control id in the client application for signature control
signHiddenControlId: 'hdnSignatureID1' // div control id in the client application to store the primary key of the client signature.
}
]
});
rclick.run(data); // The script is loaded. Now we can use functions defined in the external file.
};
const url =
' {{Base}}/api/V1/Envelope/SendClickSignEnvelope'; //Base is the hostname: https://app.rsign.com
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json','AuthToken': authToken
},
body: JSON.stringify(submitPayload),
})
.then((response) => response.json()) // fetch the response from RClick API
.then(result => {
alert("Document digital signature completed."); // For testing purposes only.
let res= JSON.stringify(result);
alert("RClick response:" + res); // For testing purposes only.
console.log("RClick response:",result)
return result;
})
.catch((error) => {
console.log('Document read error');
});
3. The client application sends the transaction information to RSign.
Pass the template ID, subject, body, signer role, name email. Replace the red code with the value of the “data” in the payload received above.
submitPayload = {
"templateID":62649,
"subject": "enter subject text here", // This value comes from popup. Signed Documents from Username
"body":"enter body text here", // This value comes from popup.
"signerList":[
{"roleName":"Manager","name":"John Doe","email":"johndoe@noemail.com","dataControls":[
{"controlID":"E294C207-13FD-4508-95FC-90C5D9C555FA","controlHtmlID":"signControl74069","controlValue":""}, // no need to send signcontrol value, RClick will get it from hidden control (hdnSignatureID1)
{"controlID":"76597505-F0DE-47EE-AF59-F721BE198242","controlHtmlID":"textControl41531","controlValue":"55"},
{"controlID":"76597505-F0DE-47EE-AF59-F721BE198242","controlHtmlID":"textControl41830","controlValue":"66"},
{"controlID":"76597505-F0DE-47EE-AF59-F721BE198242","controlHtmlID":"textControl56794","controlValue":"77"}]
"order": 1
}]
"sendEmail":1, // Send email when value is 1. Don’t send when it’s 0.
"returnFinalSignedDocument":1 // Send final signed document when value is 1. Don’t send when it’s 0.
}
response :
{
"StatusCode": 200,
"StatusMessage":"OK",
"Success":true,
"Message":"Success",
"EvelopeStatus":"Completed",
"EnvelopeCode":"54352548-4999-FAAF-3257-CACF",
"FinalSignedDocumentInBase64":"JVBERi0xLjcKJeLjz9MKODAgMCBvYmoKPDwvQnl0ZVJhbmdlI"
}
Functional Testing
For testing purposes, a prototype web page has been deployed on the RPost staging / QA environment.
You can access the prototype here: settings22.d1.rpost.info
Only to make it convenient to test the integration, the prototype displays a popup to let you pass API parameters via the user interface.
The Signature Payload popup shown on the web page accepts three parameters:
- Token: This is the Authentication token received after invoking the RSign Authenticate User API.
- RClick ID: This is a unique identifier generated by RSign to identify the client web application.
- RClick Key: This is a unique parameter generated by RSign, which the client web application must send to RSign during an API call.
Note: The customer administrator should obtain the RClick ID and RClick Key for their client application from the RSign Settings>Company>Advanced.
As if you were the signer, click on the signature control to apply your signature.
Once you click on the Signature control, the Add Signature popup will open. Sign and then click on OK.
Once the signature is applied to the document, select both checkboxes at the bottom of the screen and click on Submit to complete the transaction.
The client application sends the TemplateID, Subject, Body, and Signers list to RSign.
Enter the value in the Signer list text input box in the following format. Ensure that the HTML control ID in the payload matches the HTML control IDs of the controls placed on the document. Also, ensure that the HTML controlID of the signature control starts with signControl.
[
{"roleName":"Manager","name":"John Doer","email":"jdoer@yahoo.com","dataControls":[
{"controlID":"","controlHtmlID":"nameControl68146","controlValue":"Peter Johnson"},
{"controlID":"","controlHtmlID":"textControl56448","controlValue":"Golden Habitat, Kondapur"},
{"controlID":"","controlHtmlID":"dateControl92618","controlValue":"08/02/2024"},
{"controlID":"","controlHtmlID":"baserate","controlValue":"145.05"},
{"controlID":","controlHtmlID":"accomodation","controlValue":"0.00"},
{"controlID":"","controlHtmlID":"brokenlunch","controlValue":"20.10"},
{"controlID":"","controlHtmlID":"nightschoolbrokenlunch","controlValue":"0.00"},
{"controlID":"","controlHtmlID":"supplimentaryperformance","controlValue":"78.89"},
{"controlID":"","controlHtmlID":"otherexpenses","controlValue":"0.00"},
{"controlID":"","controlHtmlID":"overtime","controlValue":"0.00"},
{"controlID":"","controlHtmlID":"holidaycredit","controlValue":"15.62"},
{"controlID":"","controlHtmlID":"travelallowance","controlValue":"13.87"},
{"controlID":"","controlHtmlID":"fittingfee","controlValue":"0.00"},
{"controlID":"","controlHtmlID":"adjustment","controlValue":"0.00"},
{"controlID":"","controlHtmlID":"reasonforadjustment","controlValue":"Just for checking"},
{"controlID":"","controlHtmlID":"Total","controlValue":"273.53"},
{"controlID":"","controlHtmlID":"signControl1","controlValue":""}
],
"order": 1
}]
The final signed document is returned to the client web app in base 64 format. Verify that it is sent via email to the given email address.