Embed Document in an iFrame

The generated URL can be embedded within your website using the iFrame HTML element, and some parts of the embedded request page can be controlled using the client side triggers.

<iframe
    id = "prepare_page"
    src = "https://app.boldsign.com/document/embed/?documentId=documentId=625cff3d..."
    height = "100%"
    width = "100%"
    class = "frame">
</iframe>

Client side triggers

Client side triggers are special commands that are used to control the embedded request page loaded in your website's iFrame element.

There are currently five triggers available and they are listed as follows.

onNextClickThis trigger is used to move the embedded request page from FillingPage to PreparePage. It will work only when the current page is FillingPage.
onPreviewClickThis trigger is used to navigate to the preview document page where your user can view the document from each signer's perspective. It will work only when the current page is PreparePage.
onSaveClickThis trigger is used to save the current state of the document without completing the document creation process. When triggered, it allows users to save their progress and continue working on the document at a later time.
onSaveAndCloseClickThis trigger is used to save the current state of the document as a draft and completes the document creation process. For this trigger, it is necessary to set ShowSaveButton to true during the URL generate request, and the current page to be PreparePage.
onSendClickThis trigger is used to complete the document and send it out for signature. For this trigger, it is necessary to set ShowSendButton to true during the URL generate request, and the current page to be PreparePage.

Usage

<div>
    <button onclick="onNextClick()">Configure fields</button>
    <button onclick="onPreviewClick()">Preview document</button>
    <button onclick="onSaveClick()">Save</button>
    <button onclick="onSaveAndCloseClick()">Save and close</button>
    <button onclick="onSendClick()">Send document</button>
</div>
<script>
    var iframeEle = document.getElementById("prepare_page");

    function onNextClick() {
        iframeEle.contentWindow.postMessage("onNextClick", "*");
    }

    function onPreviewClick() {
        iframeEle.contentWindow.postMessage("onPreviewClick", "*");
    }

    function onSaveClick() {
        iframeEle.contentWindow.postMessage("onSaveClick", "*");
    }

    function onSaveAndCloseClick() {
        iframeEle.contentWindow.postMessage("onSaveAndCloseClick", "*");
    }

    function onSendClick() {
        iframeEle.contentWindow.postMessage("onSendClick", "*");
    }
</script>

Client side events

Client side events are special events that are triggered from the embedded request page to the host/parent (Your website).

There are currently four events available, and they are listed, as follows.

onDraftSuccessThis event will be triggered when the user selects the Save & Close option from the More Action drop-down menu and the document draft save process is successful.
onDraftFailedThis event is triggered when the user selects the Save & Close option from the More Action drop-down menu, but the draft save process fails.
onCreateSuccessThis event will be triggered when the user clicks the Send button, and the document creation process is successful.
onCreateFailedThis event will be triggered when the user clicks the Send button, but the document creation process fails.

Usage

<script>
    window.addEventListener("message", function (params) {
        if (params.origin !== "https://app.boldsign.com") {
            return;
        }

        switch (params.data) {
            case "onDraftSuccess":
                // handle draft success
                break;
            case "onDraftFailed":
                // handle draft failure
                break;
            case "onCreateSuccess":
                // handle create success
                break;
            case "onCreateFailed":
                // handle create failure
                break;
            default:
                break;
        }
    });
</script>

Best practices

There are some best practices to follow when incorporating the embedded request URL into your application to provide the best user experience possible.

  • Allow BoldSign to take complete control of the browser window.
  • If you decide to use the iFrame sizing, ensure that the recommended minimum width and height are 1360 and 768, respectively. Additionally, the embedded page supports responsive layouts, with mobile mode for widths less than 768, tab mode for widths between 768 and 1024, and desktop mode for widths above 1024.

Webhooks

Please refer to the Webhooks article to subscribe to template events.

If you've subscribed to the Document Sent, your URL will receive a webhook request when the document creation process is finished. You can synchronize the document status, new signers and their configuration, and any document configuration changes made within the embedded request in your application/DB.