First, add the DocuSeal functionality to your webpage by including the script. Copy and paste the following line into the <head> or <body> section of your HTML page:
To integrate a DocuSeal form, add the <docuseal-form> element to your webpage with the necessary attributes specifying the form's unique URL and, optionally, a default email address for the signer:
data-src: This attribute specifies the URL of the DocuSeal form that you want to embed. Each template form on DocuSeal has a unique URL with slug key. "Slug" key can be obtained via the /templates API or copied from the template page in the web UI.
data-email: This attribute is used to initialize the form for a specified email address for the signer.
Signing forms initialized via template URL and email work only if the template contains a single signing party. For signing forms with multiple parties all signers should be initiated via the API.
<script src="https://cdn.docuseal.com/js/form.js"></script>
<docuseal-form
data-src="https://docuseal.com/d/LEVGR9rhZYf86M"
data-email="signer@example.com">
</docuseal-form>
Prerequisites:
Sign Up and Obtain API Key: Visit DocuSeal API Console to obtain your API key.
Template ID: Identify the template ID you want to use for the form.
POST request to https://api.docuseal.com/submissions. Include the obtained API key in the headers along with the content type ('application/json'). Specify the template_id and submitter details:
send_email: set to false to disable automated emails form the platform.
email: pass email address of each individual party in the document signing process.
role: specifies the designated role of each participant (e.g., 'Director', 'Contractor'). Pass role names defined in the template form.
Upon a successful request, the API will respond with a an array of submitters with slug keys to be used in the embed form.
When utilizing the {{ slug }} within the <docuseal-form> element, ensure that you replace {{ slug }} with the actual key obtained from the DocuSeal API response. This "slug" key acts as a reference point to link the embedded form in your HTML to the specific document or workflow created through the DocuSeal platform.
import axios from "axios";
const API_KEY = 'YOUR_API_KEY';
axios.request({
method: 'POST',
url: 'https://api.docuseal.com/submissions',
headers: {
'X-Auth-Token': API_KEY,
'content-type': 'application/json'
},
data: {
template_id: 123,
send_email: false,
submitters: [
{
email: 'john.doe@example.com',
role: 'Director'
},
{
email: 'roe.moe@example.com',
role: 'Contractor'
}
]
}
}).then((response) => {
console.log(response.data[0].slug);
});
<script src="https://cdn.docuseal.com/js/form.js"></script>
<docuseal-form
data-src="https://docuseal.com/s/{{ slug }}">
</docuseal-form>
Styling certain elements of the form is achievable using custom CSS. Adding custom styles is possible via the <style> tag nested in the from HTML element:
For customizing the form, use the following id-selectors:
#form_container
#minimize_form_button
#submit_form_button
Learn more:
<script src="https://cdn.docuseal.com/js/form.js"></script>
<docuseal-form
data-src="https://docuseal.com/d/LEVGR9rhZYf86M"
data-email="signer@example.com"
>
<style>
#form_container {
background-color: #ededed;
}
#minimize_form_button {
color: #FFA500;
}
#submit_form_button {
background-color: #FFA500;
border-color: #F28C28;
}
</style>
</docuseal-form>