How to restrict users from navigating back to modify documents and signer details in embedded requests?

BoldSign provides the capability to customize toolbars for embedded requests, enabling you to restrict users from navigating back to modify document or signer details. This ensures that users can only configure the document and proceed with sending it.

By disabling the back navigation and directing users to the configuration page, you can enforce a structured workflow where users finalize document settings before sending.

Customize UI for embed document request

In your application, create a user interface (UI) that allows users to input necessary details for an embedded document request. The UI should include fields for:

Title
Message

Configure the API Request

To restrict users from navigating backward and allow only document sending, set the following parameters:

1.ShowNavigationButton: false → Disables the back button, preventing users from returning to the previous page.

2.SendViewOption: PreparePage → Ensures users land directly on the document configuration page.

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=false' \
    -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][email protected]' \
    -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: "[email protected]",
                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 = false,
    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 boldsign

configuration = boldsign.Configuration(api_key = "YOUR_API_KEY")

with boldsign.ApiClient(configuration) as api_client:
    
    document_api = boldsign.DocumentApi(api_client)
	
    form_fields = [
        boldsign.FormField(
            fieldType = "Signature",
            pageNumber = 1,
            bounds = boldsign.Rectangle(x = 50, y = 50, width = 200, height = 30)
        )
    ] 
    
    document_signer = boldsign.DocumentSigner(
        name = "David",
        emailAddress = "[email protected]",
        signerType = "Signer",
        formFields = form_fields,
    )
    
    embedded_document_request = boldsign.EmbeddedDocumentRequest(
        title = "Sent from API Python SDK",
        showToolbar = True,
        sendViewOption = "PreparePage",
        showNavigationButtons = False,
        signers = [document_signer],
        files = ["YOUR_FILE_PATH"],           
    )
    
    embedded_send_created = document_api.create_embedded_request_url_document(embedded_document_request)

<?php require_once "vendor/autoload.php";

use BoldSign\Configuration;
use BoldSign\Api\DocumentApi;
use BoldSign\Model\{FormField, Rectangle, DocumentSigner, EmbeddedDocumentRequest};

$config = new Configuration();
$config->setApiKey('YOUR_API_KEY');

$document_api = new DocumentApi($config);

$form_field = new FormField();
$form_field->setFieldType('Signature');
$form_field->setPageNumber(1);
$bounds = new Rectangle([50, 100, 100, 60]);
$form_field->setBounds($bounds);

$document_signer = new DocumentSigner();
$document_signer->setName('David');
$document_signer->setEmailAddress('[email protected]');
$document_signer->setSignerType('Signer');
$document_signer->setFormFields([$form_field]);

$embedded_document_request = new EmbeddedDocumentRequest();
$embedded_document_request->setTitle('Sent from API Php SDK');
$embedded_document_request->setSendViewOption('PreparePage');
$embedded_document_request->setShowNavigationButtons(true);
$embedded_document_request->setShowToolbar(true);
$embedded_document_request->setSigners([$document_signer]);
$embedded_document_request->setFiles(['YOUR_FILE_PATH']);

$embedded_send_created  = $document_api->createEmbeddedRequestUrlDocument($embedded_document_request);

ApiClient client = Configuration.getDefaultApiClient();
client.setApiKey("YOUR_API_KEY");

DocumentApi documentApi = new DocumentApi(client);
Rectangle rectangle = new Rectangle();
rectangle.setX(50f);
rectangle.setY(50f);
rectangle.setWidth(200f);
rectangle.setHeight(30f);

FormField formField = new FormField();
formField.setFieldType(FormField.FieldTypeEnum.SIGNATURE);
formField.setPageNumber(1);
formField.setBounds(rectangle);

DocumentSigner documentSigner = new DocumentSigner();
documentSigner.setName("David");
documentSigner.setEmailAddress("[email protected]");
documentSigner.setFormFields(Arrays.asList(formField));

EmbeddedDocumentRequest embeddedDocumentRequest = new EmbeddedDocumentRequest();
embeddedDocumentRequest.setTitle("Sent from API Java SDK");
embeddedDocumentRequest.setShowToolbar(true);
embeddedDocumentRequest.setShowNavigationButtons(false);
embeddedDocumentRequest.setShowPreviewButton(true);
embeddedDocumentRequest.setShowSendButton(true);
embeddedDocumentRequest.setShowSaveButton(true);
embeddedDocumentRequest.setSendViewOption(EmbeddedDocumentRequest.SendViewOptionEnum.PREPARE_PAGE);
embeddedDocumentRequest.setLocale(EmbeddedDocumentRequest.LocaleEnum.EN);
embeddedDocumentRequest.setShowTooltip(false);
embeddedDocumentRequest.setRedirectUrl(URI.create("https://boldsign.dev/sign/redirect"));
embeddedDocumentRequest.setSigners(Arrays.asList(documentSigner));
File file = new File("Your_File_Path");
embeddedDocumentRequest.setFiles(Arrays.asList(file));

EmbeddedSendCreated embeddedSendCreated = documentApi.createEmbeddedRequestUrlDocument(embeddedDocumentRequest);

import { DocumentApi, DocumentSigner, EmbeddedDocumentRequest, FormField, Rectangle } from "boldsign"; 
import * as fs from 'fs';
import * as path from 'path';

const documentApi = new DocumentApi();
documentApi.setApiKey("YOUR_API_KEY");

const bounds = new Rectangle();
bounds.x = 100;
bounds.y = 50;
bounds.width = 100;
bounds.height = 100;

const formField = new FormField();
formField.fieldType = FormField.FieldTypeEnum.Signature;
formField.pageNumber = 1;
formField.bounds = bounds;

const documentSigner = new DocumentSigner();
documentSigner.name = "David";
documentSigner.emailAddress = "[email protected]";
documentSigner.signerOrder = 1;
documentSigner.signerType = DocumentSigner.SignerTypeEnum.Signer;
documentSigner.privateMessage = "This is private message for signer";
documentSigner.formFields = [formField];

const embeddedDocumentRequest = new EmbeddedDocumentRequest();
embeddedDocumentRequest.title = "Sent from API Node SDK";
embeddedDocumentRequest.showToolbar = true;
embeddedDocumentRequest.showNavigationButtons = false;
embeddedDocumentRequest.showPreviewButton = true;
embeddedDocumentRequest.showSendButton = true;
embeddedDocumentRequest.showSaveButton = true;
embeddedDocumentRequest.sendViewOption = EmbeddedDocumentRequest.SendViewOptionEnum.PreparePage;
embeddedDocumentRequest.locale = EmbeddedDocumentRequest.LocaleEnum.En;
embeddedDocumentRequest.showTooltip = false;
embeddedDocumentRequest.redirectUrl = "https://boldsign.dev/";
embeddedDocumentRequest.message = "This is document message sent from API Node SDK";
embeddedDocumentRequest.enableSigningOrder = false;
embeddedDocumentRequest.signers = [documentSigner];
const filePath = path.resolve("YOUR_FILE_PATH");
const files = fs.createReadStream(filePath);
embeddedDocumentRequest.files = [files];

const embeddedSendCreated = documentApi.createEmbeddedRequestUrlDocument(embeddedDocumentRequest);