Embed the document creation into your application

Integrating embedded document creation into your application allows you to seamlessly incorporate BoldSign's document creation functionalities within your app's user interface.

When utilizing the embedded document feature, documents generated will remain in the draft state until users finalize the creation process via the provided URL.

Follow these steps to seamlessly integrate document creation into your application:

1. Customize UI for embed document request

In your application, create a user interface (UI) that allows users to input relevant information for the embedded document request. This information will be used to create the document.

For instance, collect user inputs for the following parameters:

Title
Message
Signers
Other customization options (e.g., ShowToolbar, ShowSaveButton, SendViewOption, etc.)

Here are example codes that demonstrate how to create an embedded document:

Code snippet

curl -X POST 'https://api.boldsign.com/v1/document/createEmbeddedRequestUrl' \
    -H 'X-API-KEY: {your API key}' \
    -F 'Title=Sent from API Curl' \
    -F 'ShowToolbar=true' \
    -F 'ShowNavigationButtons=true' \
    -F 'ShowPreviewButton=true' \
    -F 'ShowSendButton=true' \
    -F 'ShowSaveButton=true' \
    -F 'SendViewOption=PreparePage' \
    -F 'ShowTooltip=false' \
    -F 'Locale=EN' \
    -F 'Message=This is document message sent from API Curl' \
    -F 'EnableSigningOrder=false' \
    -F 'Signers[0][Name]=Signer Name 1' \
    -F 'Signers[0][EmailAddress]=alexgayle@cubeflakes.com' \
    -F 'Files=@{Your file Path};type=application/pdf'

var apiClient = new ApiClient("https://api.boldsign.com", "{your API key}");

var documentClient = new DocumentClient(apiClient);

var documentRequest = new EmbeddedDocumentRequest
{
    Title = "Sent from API SDK",
    Message = "This is document message sent from API SDK",
    Signers = new List<DocumentSigner>
    {
        new DocumentSigner(
            signerName: "David",
            signerType: SignerType.Signer,
            signerEmail: "david@cubeflakes.com",
            locale: Locales.EN),
    },
    Files = new List<IDocumentFile>
    {
        new DocumentFilePath
        {
            ContentType = "application/pdf",

            // directly provide file path
            FilePath = "{Your file path}",
        },
    },

    // customize page options
    SendViewOption = PageViewOption.PreparePage,
    Locale = Locales.EN,
    ShowToolbar = true,
    ShowNavigationButtons = true,
    ShowSaveButton = true,
    ShowPreviewButton = true,
    ShowSendButton = true,
    ShowTooltip = false,
};

var documentCreated = await documentClient.CreateEmbeddedRequestUrlAsync(documentRequest);

// url to send the document from your web application
var documentSendUrl = documentCreated.SendUrl;

import requests

url = "https://api.boldsign.com/v1/document/createEmbeddedRequestUrl"

payload={
'Title': 'Sent from API Curl',
'ShowToolbar': 'true',
'ShowNavigationButtons': 'true',
'ShowPreviewButton': 'true',
'ShowSendButton': 'true',
'ShowSaveButton': 'true',
'SendViewOption': 'FillingPage',
'ShowTooltip': 'false',
'Locale': 'EN',
'Message': 'This is document message sent from API Curl',
'EnableSigningOrder': 'false',
'Signers[0][Name]': 'Signer Name 1',
'Signers[0][EmailAddress]': 'signer1@boldsign.dev'}
files=[
  ('Files',('file',open('{file path}','rb'),'application/pdf'))
]
headers = {
  'X-API-KEY': '{your API key}'
}

response = requests.request("POST", url, headers=headers, data=payload, files=files)
print(response.text)

const axios = require('axios'); 
const FormData = require('form-data'); 
const fs = require('fs'); 
const form = new FormData(); 
form.append('Title', 'Sent from API Curl'); 
form.append('ShowToolbar', 'true'); 
form.append('ShowNavigationButtons', 'true'); 
form.append('ShowPreviewButton', 'true'); 
form.append('ShowSendButton', 'true'); 
form.append('ShowSaveButton', 'true');
form.append('ShowTooltip', 'false');
form.append('Locale', 'EN');
form.append('Message', 'This is document message sent from API Curl'); 
form.append('EnableSigningOrder', 'false'); 
form.append('Signers[0][Name]', 'Signer Name 1'); 
form.append('Signers[0][EmailAddress]', 'signer1@boldsign.dev');
form.append('Files', fs.createReadStream('{Your file path}'));
const response = axios.post( 
    'https://api.boldsign.com/v1/document/createEmbeddedRequestUrl', 
    form, 
    { 
        headers: { 
            'Accept': 'application/json',
            'X-API-KEY': '{Your-API-KEY}'
        } 
    } 
);

In the above example, replace placeholders (Title, Message, etc,.) with actual input values gathered from your application's UI. If your application supports multiple signers, tailor the UI accordingly. Update values within the Signers array to match customized signers. Customize button options (ShowSaveButton, ShowSendButton, etc,.) based on requirements by setting them to true or false. To direct users to a form field configuration page, set SendViewOption to PreparePage. For a document upload page, set SendViewOption to FillingPage.

Executing the provided code will generate an embed link, and the document will be stored in draft status within your BoldSign account.

2. Utilize the Generated Link in an iFrame

Once the embed link is generated, integrate it into an iFrame within your application. This iFrame enables your application users to:

Add extra signers
Upload additional documents
Configure form fields
Send the document to the signer for signing

After sending the document, it will be delivered to the signer via email. This approach streamlines document creation for users, enhancing their experience and promoting efficient document management within your application.