In the ViewController.swift file, make sure to import the necessary frameworks - UIKit and WebKit - at the outset of your code. Additionally, ensure that your ViewController class adopts the WKNavigationDelegate protocol to manage the web view's navigation.
The WebView is initialized in this code using WKWebView(frame: view.bounds), obtaining the WebView object.
Lastly, the HTML content is loaded into the WebView using webView.loadHTMLString(htmlString, baseURL: nil).
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 UIKit
import WebKit
class ViewController: UIViewController, WKNavigationDelegate {
var webView: WKWebView!
override func viewDidLoad() {
super.viewDidLoad()
// Create a WKWebView
webView = WKWebView(frame: view.bounds)
webView.navigationDelegate = self
view.addSubview(webView)
// Load HTML content
let htmlString = """
<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
data-src="https://docuseal.com/d/LEVGR9rhZYf86M"
data-email="signer@example.com">
</docuseal-form>
</body>
</html>
"""
webView.loadHTMLString(htmlString, baseURL: nil)
}
// WKNavigationDelegate method to handle page load completion or errors
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
print("Page loaded successfully")
}
func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
print("Failed to load page: (error.localizedDescription)")
}
}
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> component, ensure that you load "slug" from your back-end API 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 Android app to the specific submitter document form created through the DocuSeal platform.
Learn more:
import express from 'express';
import axios from 'axios';
const app = express();
const API_KEY = 'YOUR_API_KEY';
app.post('/your_backend/api/init_form', async (req, res) => {
const submissionData = {
template_id: 123,
send_email: false,
submitters: [
{
email: 'john.doe@example.com',
role: 'Director'
},
{
email: 'roe.moe@example.com',
role: 'Contractor'
}
]
};
const response = await axios.request({
method: 'POST',
url: 'https://api.docuseal.com/submissions',
headers: {
'X-Auth-Token': API_KEY,
'content-type': 'application/json'
},
data: submissionData
});
const slug = response.data[0].slug; // Extracting the slug from the response
res.json({ slug }); // Sending the slug in the response
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
import UIKit
import WebKit
class ViewController: UIViewController, WKNavigationDelegate {
var webView: WKWebView!
override func viewDidLoad() {
super.viewDidLoad()
// Create a WKWebView
webView = WKWebView(frame: view.bounds)
webView.navigationDelegate = self
view.addSubview(webView)
let slugFromAPI = "LEVGR9rhZYf86M" // Replace this with your actual slug loaded from the API
// Load HTML content
let htmlString = """
<html>
<head>
<script src="https://cdn.docuseal.com/js/form.js"></script>
</head>
<body>
<docuseal-form
data-src="https://docuseal.com/s/\(slugFromAPI)">
</docuseal-form>
</body>
</html>
"""
webView.loadHTMLString(htmlString, baseURL: nil)
}
// WKNavigationDelegate method to handle page load completion or errors
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
print("Page loaded successfully")
}
func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
print("Failed to load page: (error.localizedDescription)")
}
}