Embed the template creation into your application

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

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

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

1. Customize UI for embed template request

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

For instance, you can collect user inputs for the following parameters:

Title
Description
DocumentTitle
DocumentMessage
Roles
Other customization options (e.g., ShowToolbar, ShowSaveButton, ViewOption, etc.)

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

Code snippet

curl --location --request POST 'https://api.boldsign.com/v1/template/createEmbeddedTemplateUrl' \
     --header 'X-API-KEY: {Your API Key}' \
     --form 'Title=" API template"' \
     --form 'Description=" API template description"' \
     --form 'DocumentTitle=" API document title"' \
     --form 'DocumentMessage=" API document message description"' \
     --form 'Roles[0][name]="Manager"' \
     --form 'Roles[0][index]="1"' \
     --form 'Roles[0][language]="English"' \
     --form 'ShowToolbar="true"' \
     --form 'ShowSaveButton="true"' \
     --form 'ShowSendButton="true"' \
     --form 'ShowPreviewButton="true"' \
     --form 'ShowNavigationButtons="true"' \
     --form 'ShowTooltip="false"' \
     --form 'ViewOption="PreparePage"' \
     --form 'Files=@"{Your file path}"'

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

var templateClient = new TemplateClient(apiClient);

var templateRequest = new CreateEmbeddedTemplateRequest
{
    Title = "Template created from API SDK",
    Description = "The is a template created to get a quick contract sign.",
    DocumentTitle = "Sent using template created from API SDK",
    DocumentMessage = "This is document message sent from API SDK",
    Roles = new List<TemplateRole>
    {
        new TemplateRole(
            roleIndex:1,
            name: "Manager", 
            signerType: SignerType.Signer,
            locale: Locales.EN),
    },
    Files = new List<IDocumentFile>
    {
        new DocumentFilePath
        {
            ContentType = "application/pdf",

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

    // customize page options
    ViewOption = PageViewOption.PreparePage,
    ShowToolbar = true,
    ShowNavigationButtons = true,
    ShowSaveButton = true,
    ShowPreviewButton = false,
    ShowCreateButton = true,
    ShowTooltip = false,
};

var templateCreated = await templateClient.CreateEmbeddedTemplateUrlAsync(templateRequest);

// url to send the document from your web application
var templateCreateUrl = templateCreated.CreateUrl;

import requests

url = "https://api.boldsign.com/v1/template/createEmbeddedTemplateUrl"

payload = {
'Title': ' API template',
'Description': ' API template description',
'DocumentTitle': ' API document title',
'DocumentMessage': ' API document message description',
'AllowMessageEditing': ' true',
'Roles[0][name]': 'Manager',
'Roles[0][index]': '1',
'Roles[0][language]': "English",
'ShowToolbar': 'true',
'ShowSaveButton': 'true',
'ShowSendButton': 'true',
'ShowPreviewButton': 'true',
'ShowNavigationButtons': 'true',
'ShowTooltip': 'false',
'ViewOption': 'PreparePage'}
files=[
  ('Files',('file',open('{Your 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', ' API template'); 
form.append('Description', ' API template description'); 
form.append('DocumentTitle', ' API document title'); 
form.append('DocumentMessage', ' API document message description');
form.append('Roles[0][name]', ' Manager'); 
form.append('Roles[0][index]', ' 1'); 
form.append('Roles[0][language]', ' English'); 
form.append('ShowToolbar', ' true'); 
form.append('ShowSaveButton', ' true'); 
form.append('ShowSendButton', ' true'); 
form.append('ShowPreviewButton', ' true'); 
form.append('ShowNavigationButtons', ' true'); 
form.append('ShowTooltip', 'false');
form.append('ViewOption', ' PreparePage'); 
form.append('Files', fs.createReadStream('{Your file path}'));
const response = axios.post( 

    ' https://api.boldsign.com/v1/template/createEmbeddedTemplateUrl', 

    form, 
    { 
        headers: { 
            ...form.getHeaders(), 
            'X-API-KEY': '{Your API key}' 
        } 
    } 
);

In this example, replace the placeholders (Title, Description, etc.) with actual input values gathered from your application's UI. If your application supports multiple roles, customize the UI accordingly to accommodate multiple roles. Update the values within the Roles array to match the customized roles. Additionally, you can customize button options (ShowSaveButton, ShowSendButton, etc.) based on your requirements by setting them to true or false. To direct users to a form field configuration page, set ViewOption to PreparePage. For a document upload page, set ViewOption to FillingPage.

Executing the provided code will generate an embed link, and the template 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 will enable your application users to:

Add extra roles
Upload additional documents
Configure form fields
Save the template to your BoldSign account through your application

Subsequently, you can leverage this embedded template for sending documents for signature within your application. This approach streamlines the template creation process for your users, enhancing their experience and promoting efficient document management within your application.