All Categories
Using SpotDraft
Learn how to implement Clickthrough in your application/website

Learn how to implement Clickthrough in your application/website

Step-by-step guide to implement SpotDraft Clickthrough in your website/application

How to Implement Clickthrough in Your Application

Implementing Clickthrough in your application is a straightforward process with the SpotDraft Clickthrough SDK. This guide will walk you through the steps to seamlessly integrate Clickthrough and enhance the user experience on your website.

Step 1: Add the Clickthrough SDK to Your Application 1.1. Begin by importing the Spotdraft Clickthrough SDK into your application 1.2. Add the following script tag to your HTML file (preferably in the head section

<script type="module"
src="https://sdk.spotdraft.com/clickwrap/v1/sdk.js"></script>

This script tag establishes the connection between your application and the Clickthrough SDK.

 

Step 2: Set Up the Clickthrough Object

2.1. Once the Clickthrough object is attached to the window, create a new Clickthrough object through constructor initialization. Here's how: Once the Clickthrough object is attached to the window, create a new Clickthrough object through constructor initialization. Here's how: 

window.addEventListener("sdClickthroughLoaded", function () {
    const clickthrough = new SdClickthrough({
      clickwrapId: "CLICKWRAP_ID_FROM_CONSOLE",
      hostLocationDomId: "HOST_ELEMENT_DOM_ID",
      baseUrl: "BASE_URL_FROM_CONSOLE"
    });
})

2.2 You can obtain the values for clickwrapId and baseUrl from the Clickthrough snippet from the SpotDraft console.

Notion image
 

2.3 The hostLocationDomId is the ID of the placeholder element in your application, where the Clickthrough will be rendered. For example:

<div id="some-unique-id"></div>

2.4: To attach the Clickthrough elements to the UI, use: 

clickthrough.init();

Your website will now display the Clickthrough element within the specified placeholder container. Step 3:  Execute Your First Clickthrough Contract 3.1. With the Clickthrough element in place, you can execute the Clickthrough contract when a user takes an action, such as submitting a form or clicking a button.

3.2: To do this, use the submit() method on the Clickthrough object with the appropriate payload data:

clickthrough.submit(payload).then(contractData => {
    // Continue with your actions
})

3.3: The payload you send with the submit method should have a structure like this: 

const payload = {
  user_identifier: 'johndoe@example.com', // This is a required field
  first_name: 'John',
  last_name: 'Doe',
  user_email: 'johndoe@example.com',
};
 
💡
user_identifier is the only required field. Other properties, if included, will be added to the audit log when the contract is executed. The user_identifier can be any string that uniquely identifies the user on your platform, like an email address or mobile number.

By following these simple steps, you can seamlessly integrate Clickthrough into your application and provide a user-friendly way for users to accept agreements with a single click. Additionally, you can easily track executed Clickthrough contracts in the SpotDraft Clickthrough console. Access the SpotDraft Clickthrough API documentation here for further information

 
Did this answer your question?
😞
😐
🤩

Last updated on October 27, 2023

How to add key pointers to your Clickthrough agreements What information is included in the certificate of completion and which sections can you personalize?