Embed document signing into iOS App

1

Document signing form for specified email

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)")
  }
}
2

Document signing form initiated via API

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:

Embed API Reference

REST API Reference

iOS WebView Documentation

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)")
  }
}