Guides

Getting Started

Suggest Edits

Embedded signing is a feature that enables users to sign documents electronically directly within your application, without needing to switch to an external platform. This integration streamlines the entire document creation and signing process, making it more efficient and user-friendly. By keeping the signing experience within your application, you can maintain a cohesive workflow and provide a seamless user experience.

This guide provides developers a fundamental understanding of how to integrate DottedSign Embedded Signing SDK into their web applications.

Prerequisites

Installation

Include the DottedSign Library

To include the DottedSign Embedded Signing SDK in your HTML document, add the script using a <script> tag within the <head> or <body> section. This script reference points to the DottedSign library hosted on CDN.

<script src="https://embed.dottedsign.com/static/dottedsign-embedded-signing.min.js"></script>

Integration Steps

1. Initialize the DottedSign Object

Once the library loads, it creates a global DottedSign object.

2. Prepare the Signing Container

Define an HTML element in your web page to serve as the container for the embedded signing experience.

<div id="embed-container"></div>

3. Setup Access Token

Developers need to obtain the access token by integrating the necessary API calls. Use the Client Credential Flow to request an access token, which is necessary to authenticate the signing session.

For demonstration or testing purposes, you can use a prompt to enter the access token.

const accessToken = prompt("Please enter your access token");

🚧

Notice

Ensure that your application is configured with the embedded_signing scope to enable the creation of an access token for embedded signing. Furthermore, the process of exchanging the access token must be handled server-side to prevent CORS issues.

4. Initiate Embedded Signing

Use the dottedSign.open() function to initiate the embedded signing session. This function takes three arguments:

  • embedContainer: The HTML element ID referencing the container for the signing experience.
  • options: A configuration object with options like signing type, language preference, and UI customization options. See SDK Constants for more details.
  • callback: A callback function that executes after the signing session is loaded.
window.dottedSign.open(embedContainer, {
  token: accessToken,
  type: window.dottedSign.embedTypes.create,
  language: "zh-tw" // Set language to Traditional Chinese
});

5. Handle Signing Events

DottedSign provides event listeners to monitor the signing process. You can subscribe to events like signing completion, cancellation, and errors.

window.dottedSign.eventListener.onCreate(function(task) {
    alert(`Task ${id} created is successfully!`);
});
window.dottedSign.eventListener.onCancel(function() {
    alert("Task creation process is cancelled!");
});

Full Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      http-equiv="Content-Security-Policy"
      content="script-src 'unsafe-inline' https://embed.dottedsign.com; frame-src https://embed.dottedsign.com;"
    />
    <title>DottedSign Embedded Signing</title>
    <script src="https://embed.dottedsign.com/zh-tw/static/dottedsign-embedded-signing.min.js"></script>
  </head>
  <body>
    <div id="embed-container" style="width: 99%; height: 99vh;"></div>
    <script>
      document.addEventListener(
        "DOMContentLoaded",
        function () {
          // prepare the signing container
          const embedContainer = document.getElementById("embed-container");

          // setup access token
          const accessToken = prompt("Please enter your access token:", "");

          // initialize embedded signing
          window.dottedSign.open(embedContainer, {
            token: accessToken,
            type: window.dottedSign.embedTypes.create,
            language: "en",
          });

          // setup language after the document content is loaded
          window.dottedSign.eventListener.onLoad = () => {
            window.dottedSign.setLanguage("zh-tw");
            window.dottedSign.hideElement(
              window.dottedSign.elementsId.createLabels,
            );
          };

          // handle signing events
          window.dottedSign.eventListener.onCreate = (id) => {
            window.dottedSign.close();
            alert(`Task ${id} created is successfully!`);
          };
          window.dottedSign.eventListener.onCancel = () => {
            window.dottedSign.close();
            alert("Task creation process is cancelled!");
          };
        },
        false,
      );
    </script>
  </body>
</html>

📘

Notice

This guide provides a basic overview of integrating DottedSign Embedded Signing SDK. You'll need to customize the code based on your specific requirements and desired functionalities. For any questions or support, feel free to contact us through our support channel.

Updated 4 months ago