Embedding
With the document API you can create a new document. The response of this request will contain an
edit_url property. This URL can be send directly to the end user or it can be used to embed filling out the document in your application.To allow a user to edit the document in your application, embed fillthedoc using an iframe. The URL of the iframe is the
edit_url of the document.<iframe id="fillthedoc" src="{{ document.edit_url }}" />
The UI has a minimalistic style without any branding, so it doesn't look out of place when embedded in most cases. The design is mobile friendly. It's not possible to customize the style.
If the template has a help view, it will be displayed by default, with the option of switching to the document preview. If there is no help view for the template, the document preview is displayed.
Use the
?preview=<mode> query parameter to toggle what is shownmode | |
never | Never show the document preview.
Shows the help if available, otherwise just the form. |
off | Show the help by default (if available) |
on | Show the document preview by default |
always | Don't show the help (even if available) |
The iframe will send a message to the parent window when the user finishes the form using
window.postMessage(). The parent window can add a even listener for the "message" event. In the handler, make sure the message originated from https://filthedoc.com to prevent abuse with this feature.<script>
window.addEventListener("message", function (event) {
if (event.origin !== "https://fillthedoc.com") return;
// Optionally use document data
let documentData = event.data;
// Next...
}, false);
</script>
The message contains the JSON of the document, which can be used to display information to the user in a rich web application. Data that is not be available for the end user is omitted from the event data.
You should NOT rely on the message for processing the data. Instead, always specify a
callback URL when creating the document.<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>fillthedoc iframe</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
}
iframe {
height: 100%;
width: 100%;
border: none;
}
</style>
<script>
window.addEventListener("message", documentCompleted, false);
function documentCompleted(event) {
if (event.origin !== "https://fillthedoc.com") return;
// Optionally use document data
let documentData = event.data;
// Show a different page
window.location.href = 'https://example.com';
}
</script>
</head>
<body>
<iframe id="fillthedoc" src="https://fillthedoc.com/legalthings/4gc4wow40gkg808040ck8scwwkskwc40okwkc00skws48848s8wo48k0k8c4c04w" />
</body>
</html>
Last modified 3yr ago