BoldSign Site Logo

Embed signing process within your app

Seamlessly collect eSignatures within your app by embedding BoldSign signer page in it.
Fill in for the Demo
Info-icon Try filling out the below form details, sending the document, and signing it. This will provide you with a better understanding of how the signing process works.
ID of a template created in BoldSign Web App
Code Reference The embedded sign request allows the signers to sign the document within your website or mobile app using an iFrame, popup window, or new tab.
Code flow:
Step 1
On the form submission, create the new document from the template using Send document from Template API. It will return the document Id which we can use to generate the embedded signing link.
curl -X 'POST' 'https://api.boldsign.com/v1/template/send?templateId=YOUR_TEMPLATE_ID' \
  -H 'accept: application/json' \
  -H 'X-API-KEY: YOUR_API_KEY' \
  -H 'Content-Type: application/json;odata.metadata=minimal;odata.streaming=true' \
  -F 'DisableEmails=true'
  -d '{}' 
var apiClient = new ApiClient("https://api.boldsign.com", "Your_API_Key");

var templateClient = new TemplateClient(apiClient);

var sendForSignFromTemplate = new SendForSignFromTemplate
{
    TemplateId = "YOUR_TEMPLATE_ID",
    DisableEmails = true,
    Roles =
    [
        new Roles()
        {
            RoleIndex = 1,
            SignerName = "David",
            SignerEmail = "[email protected]",
            SignerType = SignerType.Signer
        }
    ]
};

var documentCreated = templateClient.SendUsingTemplate(sendForSignFromTemplate);
import boldsign

configuration = boldsign.Configuration(host="https://api.boldsign.com", api_key="YOUR_API_KEY")

with boldsign.ApiClient(configuration) as api_client:
    template_api = boldsign.TemplateApi(api_client)
    send_for_sign_from_template_form = boldsign.SendForSignFromTemplateForm(
        roles=[
            boldsign.Role(
                roleIndex=1,
                signerRole="HR",
                signerName="David",
                signerEmail="[email protected]",
            )
        ],
        disableEmails=True
    )
    document_created = template_api.send_using_template(
        template_id="YOUR_TEMPLATE_ID",
        send_for_sign_from_template_form=send_for_sign_from_template_form
    )
<?php
require_once __DIR__ . '/vendor/autoload.php';

use BoldSign\Configuration;
use BoldSign\Api\TemplateApi;

$config = new Configuration();
$config->setHost("https://api.boldsign.com");
$config->setApiKey('YOUR_API_KEY');

$templateApi = new TemplateApi($config);

$role = new BoldSign\Model\Role();
$role->setRoleIndex(1);
$role->setSignerName('David');
$role->setSignerEmail('[email protected]');

$sendForSignFromTemplateForm = new BoldSign\Model\SendForSignFromTemplateForm();
$sendForSignFromTemplateForm->setRoles([$role]);
$sendForSignFromTemplateForm->setDisableEmails(true);

$result = $templateApi->sendUsingTemplate('YOUR_TEMPLATE_ID', $sendForSignFromTemplateForm);
ApiClient client = Configuration.getDefaultApiClient();
client.setBasePath("https://api.boldsign.com");
client.setApiKey("YOUR_API_KEY");

TemplateApi templateApi = new TemplateApi(client);
Role role = new Role();
role.setRoleIndex(1);
role.setSignerName("David");
role.setSignerEmail("[email protected]");
SendForSignFromTemplateForm sendForSignFromTemplateForm = new SendForSignFromTemplateForm();
sendForSignFromTemplateForm.setRoles(java.util.Arrays.asList(role));
sendForSignFromTemplateForm.setDisableEmails(true);
DocumentCreated documentCreated = templateApi.sendUsingTemplate("YOUR_TEMPLATE_ID", sendForSignFromTemplateForm);
import * as boldsign from "boldsign";

const templateApi = new boldsign.TemplateApi("https://api.boldsign.com");
templateApi.setApiKey("YOUR_API_KEY");

const role = new boldsign.Role();
role.roleIndex = 1;
role.signerName = "David";
role.signerEmail = "[email protected]";

const sendForSignFromTemplateForm = new boldsign.SendForSignFromTemplateForm();
sendForSignFromTemplateForm.roles = [role];
sendForSignFromTemplateForm.disableEmails = true;

const response = templateApi.sendUsingTemplate("YOUR_TEMPLATE_ID", sendForSignFromTemplateForm);
Step 2
Use the following code by updating the received document ID from the previous step to generate the embedded signing URL.
curl -X GET 'https://api.boldsign.com/v1/document/getEmbeddedSignLink?documentId=YOUR_DOCUMENT_ID&signerEmail=Enter Signer Email' \
  -H 'X-API-KEY: YOUR_API_KEY'
var apiClient = new ApiClient("https://api.boldsign.com", "Your_API_Key");

var documentClient = new DocumentClient(apiClient);

var embeddedSigningLink = documentClient.GetEmbeddedSignLink("YOUR_DOCUMENT_ID", "Enter Signer Email");
var signLink = embeddedSigningLink.SignLink;
import boldsign

configuration = boldsign.Configuration(host="https://api.boldsign.com", api_key="YOUR_API_KEY")

with boldsign.ApiClient(configuration) as api_client:
    document_api = boldsign.DocumentApi(api_client)

    document_id = "YOUR_DOCUMENT_ID"
    signing_email = "Enter Signer Email"

    embedded_signing_link = document_api.get_embedded_sign_link(
        document_id=document_id,
        signer_email=signing_email
    )
<?php

require_once "vendor/autoload.php";

use BoldSign\Configuration;
use BoldSign\Api\DocumentApi;

$config = new Configuration();
$config->setHost('https://api.boldsign.com');
$config->setApiKey('YOUR_API_KEY');

$document_api = new DocumentApi($config);

$document_id = 'YOUR_DOCUMENT_ID';
$signer_email = 'Enter Signer Email';

$embedded_signing_link = $document_api->getEmbeddedSignLink($document_id, $signer_email);
ApiClient client = Configuration.getDefaultApiClient();
client.setBasePath("https://api.boldsign.com");
client.setApiKey("YOUR_API_KEY");

DocumentApi documentApi = new DocumentApi(client);

String documentId = "YOUR_DOCUMENT_ID";
String signerEmail = "Enter Signer Email";

EmbeddedSigningLink embeddedSigningLink = documentApi.getEmbeddedSignLink(documentId, signerEmail, null, null, null, null);
import { DocumentApi } from "boldsign";

const documentApi = new DocumentApi("https://api.boldsign.com");
documentApi.setApiKey("YOUR_API_KEY");

const documentId = "YOUR_DOCUMENT_ID";
const signerEmail = "Enter Signer Email";

const embeddedSigningLink = documentApi.getEmbeddedSignLink(documentId, signerEmail);
Step 3
Once the embedded signing URL is generated, load the URL in iFrame inside your App using the following code.
<iframe src="https://app.boldsign.com/document/sign/?documentId=17882f5a-xxxx-xxxx-xxxx-ce5737756339s_dyU07s_hkU07;dfeab145-xxxx-xxxx-xxxx-d705b85823c8" style="width:100%;height:100%"/>