Embed document signing into iOS App

  1. Document signing form for specified email
  2. Document signing form initiated via API
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. It accepts either a template form URL with a template slug key, which can be obtained via the /templates API or copied from the template page in the web UI, or a submitter embed_src URL returned by the /submissions API to embed the form for a specific signer.

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.

Swift 
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: 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. 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 data-src attribute of the <docuseal-form> element, or construct the URL from the slug key (e.g. https://docuseal.com/s/\(slug)). Either value links the embedded form in your iOS app to the specific submitter created through the DocuSeal API. 

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');
});
Swift 
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)")
  }
}

Learn more