Import the WebView component in your file and create a functional component (SignForm, in this case). Inside the component, use the WebView with the HTML source that contains your DocuSeal form. Customize the HTML as needed, including the form's URL and data attributes.
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.
import { WebView } from 'react-native-webview';
export default function SignForm() {
return (
<WebView
source={{ html: `
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.docuseal.com/js/form.js"></script>
</head>
<body>
<docuseal-form
style="height: 100vh"
data-src="https://docuseal.com/d/LEVGR9rhZYf86M"
data-email="signer@example.com"
> Loading...
</docuseal-form>
</body>
</html>
` }}
/>
);
}
Prerequisites:
Sign Up and Obtain API Key: Visit DocuSeal API Console to obtain your API key.
The API can be used to initiate a signing session for a single-party form or for a multi-party form. For multi-party forms, the API returns a unique embed_src URL for each submitter, and each URL can be used to embed the signing form for the corresponding party.
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 from 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 an array of submitters. Each submitter contains an embed_src with the full signing form URL, as well as a slug key which can be appended to your DocuSeal host URL.
Pass the embed_src value directly to the src prop of the <DocusealForm /> component, or construct the URL from the slug key (e.g. https://docuseal.com/s/${slug}). Either value links the embedded form in your React Native app to the specific submitter created through the DocuSeal API.
Learn more:
import express from 'express';
import axios from 'axios';
import docuseal from "@docuseal/api";
const app = express();
docuseal.configure({ key: "API_KEY", url: "https://api.docuseal.com" });
app.post('/your_backend/api/init_form', async (req, res) => {
const submission = await docuseal.createSubmission({
template_id: 1000001,
send_email: false,
submitters: [
{
email: 'john.doe@example.com',
role: 'Director'
},
{
email: 'roe.moe@example.com',
role: 'Contractor'
}
]
});
const slug = submission.slug;
res.json({ slug });
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
import { useEffect, useState } from 'react';
import { WebView } from 'react-native-webview';
export default function SignForm() {
const [slug, setSlug] = useState('');
useEffect(() => {
// Fetch data from the API endpoint
fetch('https://your-backend.com/api/init_form')
.then(response => response.json())
.then(data => {
setSlug(data.slug); // The API response has a 'slug' field
})
}, []); // Empty dependency array ensures this runs only once on component mount
return (
<WebView
source={{ html: `
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.docuseal.com/js/form.js"></script>
</head>
<body>
<docuseal-form
style="height: 100vh"
data-src="https://docuseal.com/s/${slug}"
> Loading...
</docuseal-form>
</body>
</html>
` }}
/>
);
}