Implementing the Collection Point JavaScript SDK

You can use the collection point JavaScript SDK to map your web form to OneTrust Universal Consent & Preference Management and pass preferences for purposes of processing, purpose preferences, and data elements. Implementing the JavaScript SDK is the simplest method for collecting consent records through a web form collection point and provides a quick means for implementing OneTrust collection points. For more information on mapping an existing web form, see Mapping Field Attributes for an Existing Web Form.

Note:

In order to generate consent records, you must integrate our code into your web forms or other collection point applications. There are two methods for integration: a JavaScript SDK and a server-side REST API. The JavaScript SDK is only available for web form collection points. For more information on the alternate method, see Implementing the Collection Point with REST API.

JavaScript SDK Overview

The collection point JavaScript SDK is the simplest way to integrate OneTrust collection points into your existing interfaces. The purpose of the SDK is to provide the main functionality with minimal changes to existing web form interfaces. The SDK should be placed on the same page as the web form collecting consent. Optionally, you can also place the SDK on any page that the data subject is directed to once they have submitted the web form.

Integrating the JavaScript SDK

You can use the collection point JavaScript SDK to map your web form to OneTrust Universal Consent & Preference Management and pass preferences for purposes of processing, purpose preferences, and data elements.

To integrate using the New Integration Method

You can utilize the New SDK Integration setting on the Collection point details screen to simplify integration of the Hosted SDK for web form collection points.

  1. On the Universal Consent & Preference Management menu, select Interfaces > Collection points. The Collection points screen appears.

  2. Click the link in the Name column of the collection point you want to integrate. The Collection point details screen appears.

  3. Navigate to the Integrations tab.

  4. Click the SDK button.

  5. Enable the New SDK integration setting. The SDK integration section updates with the Updated Hosted SDK Integration instructions.



  6. Place the SDK in the <head> tag for a web page containing a collection point.

    1. Click the Copy button corresponding to step 1.

    2. Paste the copied code within a <head> tag of the web page containing a collection point.

  7. Place the data-ot-cp-id attribute in the form(s) that will act as a collection point.

    1. Click the Copy button corresponding to either the Draft or Production version of the collection point in step 2.

    2. Add the data-ot-cp-id attribute with the desired collection point ID to a <form> tag.

To integrate using the Legacy Method

  1. On the Universal Consent & Preference Management menu, select Interfaces > Collection Points. The Collection points screen appears.

  2. Click the link in the Name column of the collection point you want to integrate. The Collection point details screen appears.

  3. Navigate to the Integrations tab.

  4. Click the SDK button and disable the New SDK integration setting.



  5. Click the Copy SDK button and paste the copied SDK into your existing web form application page.

  6. Configure the SDK so that it can identify the fields for the submit button and conditional trigger checkbox (if used).

  7. When a transaction is triggered with the SDK, the service also returns a unique transaction number to the web page as a JavaScript variable name receiptID.

  8. You can configure the SDK to place this variable in a page DOM element, by identifying the name of the element in the JavaScript.

  9. Because the ID is generated before the normal form submission process is completed, you can pass this through a hidden form field to store the receiptID alongside your own records. This allows you to find the original transaction record in OneTrust and retrieve the additional information stored there.

Additional Information and Examples

Local Settings vs Hosted Settings

The SDK can be implemented using one of the following options: Local SDK Settings or Hosted SDK Settings.

Local SDK Settings

- The Local SDK Settings option includes the integration mappings as unencoded JavaScript which can be easily modified to map to your existing form once copied.

Hosted SDK Settings

- The Hosted SDK Settings option combines the authentication token and SDK settings into a published file which is accessed by a URL in the SDK Settings script. TheUse Hosted SDK Settingssetting for collection points is enabled by default.

The advantage of using the Hosted SDK Settings option is that changes made to collection points are automatically published to the settings script, including any updates to new versions of purposes. When you use hosted SDK settings, you can update the settings for your collection point without having to replace the SDK integrated on your site. The settings will be referenced in the SDK via a URL to the external storage.

Key Components of the JavaScript SDK

The web form collection point in OneTrust generates SDK integration code dynamically based on the number of purposes in the collection point, the consent interaction type, the languages defined on the collection point, and the Hosted SDK Settings setting.

The following are key components:

  • A link to the JavaScript file location where the main SDK functionality is hosted.

  • A JWT Authentication token used to verify the request and ensure the integrity of the transaction records. The token is updated whenever a new version of the collection point is saved or published.

  • Base-64 encoded settings string that contains the URL to call when creating transactions.

  • Customizable trigger controls

  • Additional unencoded settings parameters

Note:

Only these last two components should be changed locally during implementation.

Sample SDK and Instructions

Note:

For more information and code examples, see Sample JavaScript SDK and Instructions.