Embed Template in an iFrame

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

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

Client side triggers

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

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

`onNextClick`	This trigger is used to move the embedded create template page from FillingPage to PreparePage. It will only function if the current page is FillingPage.
`onPreviewClick`	This trigger is used to navigate to the preview document page, where your user can view the document from each role's perspective. It will work only when the current page is PreparePage.
`onSaveClick`	This trigger is used to save the current state of the template without completing the template creation process. It does not finalize the template but allows you to save your progress as a draft. This trigger can be used when you want to continue working on the template at a later time.
`onSaveAndCloseClick`	This trigger is used to save the current state of the template as a draft and completes the template creation process. For this trigger, it is necessary to set the `ShowSaveButton` to `true` during the URL generate request, and current page should correspond to be the PreparePage.
`onCreateClick`	This trigger is used to finalize the template creation process. For this trigger, it is necessary to set the `ShowSendButton` to `true` during the URL generate request, and current page should correspond to the PreparePage.
`onPreviewExit`	This trigger is used to exit the preview document page and return to the PreparePage.

Usage

<div>
    <button onclick="onNextClick()">Configure fields</button>
    <button onclick="onPreviewClick()">Preview template</button>
    <button onclick="onSaveClick()">Save</button>
    <button onclick="onSaveAndCloseClick()">Save and close</button>
    <button onclick="onCreateClick()">Create template</button>
    <button onclick="onPreviewExit()">Exit preview</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 onCreateClick() {
        iframeEle.contentWindow.postMessage("onCreateClick", "*");
    }

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

Client side events

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

There are currently four events available, listed as follows.

`OnDraftSavedSuccess`	This event will be triggered when the user selects the `Save & Close` option from the `More Action` drop-down menu and the template draft save process is successful.
`onDraftFailed`	This event is triggered when the user selects the `Save & Close` option from the `More Action` drop-down menu but the draft save process fails.
`onCreateSuccess`	This event will be triggered when the user clicks the `Create template` button and the template creation process is successful.
`onCreateFailed`	This event will be triggered when the user clicks the "Create template" button but the template creation process fails.
`onTemplateEditingCompleted`	This event will be triggered when the user clicks the `save template` button, and the template editing process is successful.
`onTemplateEditingFailed`	This event will be triggered when the user clicks the `save template` button, and the template editing process is failed.

Usage

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

        switch (params.data.status) {
            case "OnDraftSavedSuccess":
                // handle draft success
                break;
            case "onDraftFailed":
                // handle draft failure
                break;
            case "onCreateSuccess":
                // handle create success
                break;
            case "onCreateFailed":
                // handle create failure
                break;
            case "onTemplateEditingCompleted":
                // handle edit success
                break;
            case "onTemplateEditingFailed":
                // handle edit 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 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 for information on subscribing to template events.

If you have subscribed to the Template Create event, your URL will receive a webhook request when the template creation process is finished. You can synchronize any changes that were made in the embedded process within your application or database.