Begin by setting up your Android project in Android Studio. Ensure you have a layout file named activity_webview.xml in the project's res/layout directory. Layout file should contain webview element with ID.
The code comprises a class named WebViewActivity. Inside the onCreate method of this class, the layout is set using setContentView(...).
The WebView is initialized in this code using findViewById(R.id.webView), obtaining the WebView object from the layout file. JavaScript is enabled for the WebView via webView.settings.javaScriptEnabled = true.
Lastly, the HTML content is loaded into the WebView using webView.loadDataWithBaseURL(null, htmlContent, "text/html", "UTF-8", null).
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 android.annotation.SuppressLint
import android.os.Bundle
import android.webkit.WebChromeClient
import android.webkit.WebSettings
import android.webkit.WebView
import androidx.appcompat.app.AppCompatActivity
class WebViewActivity : AppCompatActivity() {
private lateinit var webView: WebView
@SuppressLint("SetJavaScriptEnabled")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_webview) // Replace with your layout file
webView = findViewById(R.id.webView) // Replace with your WebView ID
val webSettings: WebSettings = webView.settings
webSettings.javaScriptEnabled = true // Enable JavaScript for the WebView
// Load the HTML content into the WebView
val htmlContent = """
<html>
<head>
<script src="https://cdn.docuseal.co/js/form.js"></script>
</head>
<body>
<docuseal-form
data-src="https://docuseal.co/d/LEVGR9rhZYf86M"
data-email="signer@example.com">
</docuseal-form>
</body>
</html>
""".trimIndent()
webView.webChromeClient = WebChromeClient() // Optional, for better web experience
webView.loadDataWithBaseURL(null, htmlContent, "text/html", "UTF-8", null)
}
}
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.co/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.co/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 android.annotation.SuppressLint
import android.os.Bundle
import android.webkit.WebChromeClient
import android.webkit.WebSettings
import android.webkit.WebView
import androidx.appcompat.app.AppCompatActivity
class WebViewActivity : AppCompatActivity() {
private lateinit var webView: WebView
@SuppressLint("SetJavaScriptEnabled")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_webview) // Replace with your layout file
webView = findViewById(R.id.webView) // Replace with your WebView ID
val webSettings: WebSettings = webView.settings
webSettings.javaScriptEnabled = true // Enable JavaScript for the WebView
// Simulating API call to fetch the slug
val slugFromAPI = "LEVGR9rhZYf86M" // Replace this with your actual slug loaded from the API
// Load the HTML content into the WebView with the modified data-src attribute
val htmlContent = """
<html>
<head>
<script src="https://cdn.docuseal.co/js/form.js"></script>
</head>
<body>
<docuseal-form
data-src="https://docuseal.co/s/$slugFromAPI">
</docuseal-form>
</body>
</html>
""".trimIndent()
webView.webChromeClient = WebChromeClient() // Optional, for better web experience
webView.loadDataWithBaseURL(null, htmlContent, "text/html", "UTF-8", null)
}
}