Using In-app Signing

How it works

In-app signing allows you to host a signing page within your application.
This works by hosting an iframe in your application, where the signing page will be rendered.

Step 1: Create a Document

Create a document that you want signed and assign the relevant signer details (e.g. name and email address).

Step 2: Retrieve the Signatory UUID

For each signer who will sign in-app, fetch their signatory_uuid.
The signatory_uuid is returned in the response when you create the document pack. You’ll need this for future steps.

Step 3: Generate In-App Signing URL

Generate a signing URL for a signatory by calling the following endpoint:

{{url}}/document_packs/{{document_pack_key}}/generate_in_app_signing_url/{{signatory_uuid}}?signing_page_url={{signing_page_url}}

Query string parameters:

signer_is_validated : Default is false. If false, a post-sign OTP validation is required. If true, no validation occurs. Apps using this must be pre-approved by contacting [email protected].
signing_page_url : This is the url where the iframe will be hosted in your app. It's important that this is set otherwise you'll end up with no signing page being returned. NB: t_signing_page_url must be urlencoded. The signing_page_url can be specified on the document instead as in_app_page_url.
is_in_person : If set to true, it indicates that this request is being signed in person. The user interface will require the user to tick/check the box indicating that the document was signed in each other's presence.

Step 4: Render the url that is returned in an iframe on your page.

Use the signing URL in your application (client side).
We provide a JavaScript widget which will insert an iframe into your page for a given container. If no container is specified, the widget automatically appends one to the <body>.

<script src="https://app.quicklysign.com/public/widgets/embed.widget.latest.min.js"></script>
<div id="container"></div>

<script>
    QuicklySign.init("<your client id>");
    QuicklySign.open({
        url:"<your signing url>",
        container_id:"container",
        message_listener:function(event_data){
            if(event_data.event === Quicklysign.EVENTS.SIGNED){
                alert("document signed");
            }
        },
        post_sign_url:""
    });
</script>

Parameters for QuicklySign.open()

Parameter name	Data
url (optional)	Signing URL to be used. If not specified, the widget will look in the host page URL for the query parameter `qs_url`.
container_id (optional)	The ID of the `div` that will be used to contain the iframe.
message_listener (optional)	Function to callback when signing completes or is deferred.
post_sign_url (optional)	Page to redirect to after the user has signed. Use this OR `message_listener`.

Message Listener Events

The message_listener function will receive an object with an event property.
Possible events are:

Event
`Quicklysign.EVENTS.SIGNED`	This indicates that the document was signed.
`Quicklysign.EVENTS.SIGN_LATER`	This indicates that the user has opted to sign later.