Sample JavaScript SDK and Instructions

The collection point JavaScript SDK is the simplest way to integrate OneTrust Universal Consent & Preference Management into your existing interfaces. You can use the SDK to pass preferences for purposes of processing, topics, as well as additional data elements. The following sample SDK and instructions can be used as reference when integrating the collection point SDK in your web form.

📘
This article only pertains to the Legacy implementation method for the JavaScript SDK. The JavaScript methods shown below are not supported when using the new Implementation method.

Example A: Single Purpose, Form Submit Only

The simplest model for using the SDK is for a collection point with a single purpose with no topics and a Form Submission Only interaction type. For Form Submission Only interaction types, a user will click a form submit button or similar, and a transaction is created for a single purpose of processing.

The following is an example of the SDK output for this model, using non-hosted settings:

<!-- OneTrust Consent Receipt Start -->
 
<script src="https://{BASE URL}/consent-receipt-scripts/otconsent-1.0.js" type="text/javascript" charset="UTF-8" id="consent-receipt-script">
triggerId="trigger";
identifierId="inputEmail";
confirmationId="confirmation";
token="eyJhbGciOiJSUzUxMiJ9.eyJwcm9jZXNzSWQiOiJlNWM1MzJjMi0yYzAyLTQ4OGEtYWY5MS02ZDBkOWNmZGVlZjUiLCJpYXQiOiIyMDE4LTA3LTI0VDExOjAzOjQxLjUyIiwibW9jIjoiV0VCX0ZPUk0iLCJzdWIiOiJlbWFpbCIsImlzcyI6Imh0dHBzOi8vZ292aWNwIiwidGVuYW50SWQiOiIxODRhMjBlNC1jODU4LTRlZDYtOTI5NC05ZDBjN2JiYzFhOWMiLCJkZXNjcmlwdGlvbiI6ImdvdmljcCIsImNvbnNlbnRUeXBlIjoiRk9STVNVQk1JVCIsInBvbGljeV91cmkiOiJodHRwczovL2dvdmljcCIsInB1cnBvc2VzIjpbeyJpZCI6IjM2NzMwNGIyLWU4MDktNDRmMi1iOWZhLTcwMGEwNjAyNGEzNSIsInRvcGljcyI6W119XSwiZHNEYXRhRWxlbWVudHMiOlsiRmlyc3ROYW1lIiwiTGFzdE5hbWUiXX0.muL6uxuSi7irrd0iqDBn3faggx748-2lsV_IHpu_jPfiSjNP9DWw9zUBvcb8K_STB5RU1Ku3k5vQmhVOv34tsEdrinLEVailGDIQapY1xxhPMUfosO2s5KM7ECPlFStodPt3c6c5xVDDYteAWoPy-1CtStHto2jLY6zd_CQaDA6llIu1ebNnv5Z2B261mfxpUZ5loIBXa1Z0Qd2NH6zgi-GTWZXv82e6HcZtIMLcSJ3HHh-CJPsvB-Xdx7SyF8t9xrFXQ4zIR4fpFHRqD2F8RU911KNj4Pa88vDEtpyXfkVLitqdCkfdWUgkWghPPkzU8Vh4X1PQMv58GEloOtLvdg";
settings="eyJyZWNlaXB0QXBpRW5kcG9pbnQiOiJodHRwczovL2NyLWRzLWVhc3R1cy5kZXYub3RkZXYub3JnL3JlcXVlc3QvdjEvY29uc2VudHJlY2VpcHRzIiwibWFudWFsVHJpZ2dlciI6ZmFsc2UsImNvbnRpbnVlT25FcnJvciI6dHJ1ZX0=";
</script>
<script type="text/javascript" charset="UTF-8">
  OneTrust.ScriptTag.Preferences = [
    {
       "purpose": "{PURPOSE GUID}",
       "identifierAttributes": "value",
       "identifierValues": "Purpose1 Name",
        "labels": [
        {
        "language": "de",
        "label": "Purpose1 DE",
        "description": "Allows us to send you news and information about our products and services. DE"
        },
        {
        "language": "en-us",
        "label": "Purpose1",
        "description": "Allows us to send you news and information about our products and services."
        },
        {
        "language": "fr",
        "label": "Purpose1 FR",
        "description": "Allows us to send you news and information about our products and services. FR"
        }
      ]
    }
  ];
</script>
<!-- OneTrust Consent Receipt End -->

To use the script above

The code should be placed on the page where the form collecting the consent is located, and optionally placed on any page the user is directed to once the form has been submitted.
The following attributes should be customized for the form:

Attribute	Description
`triggerId`	ID of the form element that will trigger the service and generate a receipt when clicked. In standard web forms, this would be the ID of the submit button element.
`identifierID`	ID of the form element that contains the unique data subject identifier, such as an email address. The value submitted from this form element is passed to the receipt API and stored with the receipt, allowing future search and retrieval. This will also be the data subject identifier in the list of data subjects. ℹ️ Important The type of identifier that this value represents is determined by the identifier type configured for the Collection Point, so it is important that these match up correctly. For example, do not set the identifier type as 'Email' and then have the form input as a phone number. 📘 Note The identifier type 'Email' or 'Phone Number' is defined when you set up the Collection Point, but the SDK does not attempt to validate that the value submitted is of the correct type. If you define the identifier type as an email address, but send a value via the form that is actually a phone number, it will still be identified in the data subjects table as an Email type identifier.
`confirmationID` (optional)	If this parameter is used in a DOM element, then the receipt number will be written to that element when the SDK makes a successful call to the API to create a receipt. Using a hidden form field with a confirmationID, you can insert the receipt number, and through the form post, insert it into your own database.

📘
For more information, see below for uses of the ScriptTag.Preferences section including language labels. You do not need to change these values when using the Form Submission Only interaction type.

Example B: Multiple Purposes and/or Topics, Opt In Check Boxes

If you are getting consent for multiple purposes of processing and/or topics added to a purpose, and your collection point uses a check box interaction type, the SDK looks for check box elements in the web form to indicate consent for each purpose. You will need to configure the SDK so that the correct receipt and transaction information is created when visitors select the different options to indicate their consent.

The following is an example of the SDK output for this model:

<!-- OneTrust Consent Receipt Start -->
 
<script src="https://{BASE URL}/consent-receipt-scripts/otconsent-1.0.js" type="text/javascript" charset="UTF-8" id="consent-receipt-script">
triggerId="trigger";
identifierId="inputEmail";
conditionalConsentTriggerId="conditionalCheckbox";
confirmationId="confirmation";
token="eyJhbGciOiJSUzUxMiJ9.eyJwcm9jZXNzSWQiOiJlNWM1MzJjMi0yYzAyLTQ4OGEtYWY5MS02ZDBkOWNmZGVlZjUiLCJpYXQiOiIyMDE4LTA3LTI0VDExOjAzOjQxLjUyIiwibW9jIjoiV0VCX0ZPUk0iLCJzdWIiOiJlbWFpbCIsImlzcyI6Imh0dHBzOi8vZ292aWNwIiwidGVuYW50SWQiOiIxODRhMjBlNC1jODU4LTRlZDYtOTI5NC05ZDBjN2JiYzFhOWMiLCJkZXNjcmlwdGlvbiI6ImdvdmljcCIsImNvbnNlbnRUeXBlIjoiT1BUSU5DSEVDS0JPWCIsInBvbGljeV91cmkiOiJodHRwczovL2dvdmljcCIsInB1cnBvc2VzIjpbeyJpZCI6IjM2NzMwNGIyLWU4MDktNDRmMi1iOWZhLTcwMGEwNjAyNGEzNSIsInRvcGljcyI6W119LHsiaWQiOiJiYTU0ZWIyNS05MGYwLTQ2MzMtYWIxMi1jN2JmNWFmZGQ4NTYiLCJ0b3BpY3MiOlt7ImlkIjoiMDBiZTYwOGItMjhkZC00NzBhLWJlNjItZGE5ZWMwNTBlYjQwIn0seyJpZCI6ImY3MTJmNzczLWUyMWUtNDc1Mi05NjEwLWNlZTA0YjU2ZDMxMSJ9LHsiaWQiOiI0NmYwYzkwYS1lZTdiLTRhODQtYTkzMi1hZDU2MDlkNzE2YTIifV19XSwiZHNEYXRhRWxlbWVudHMiOlsiRmlyc3ROYW1lIiwiTGFzdE5hbWUiXX0.lE9D0Ri025kLyhfcKUJ2OV6CfH3wrhijh_J8rs_9yW9wmoQ3RcLzgeTtDiX8GAKc6AFwSQXukyscMW_xg-Agjq0e6RqOUoE3hBZhmcKX4DKQ_Oo8a-Kom5AMOndrpgGHjn2emNBrHnhG_snVMeW_Rl0KUkb6xqXwfyUjqrdLS5K6K39hJJLQDZDtKzRUEtbK0AL98ImzWyrECXnIc4B04BXIF9fGjDSql0aRCq8Lx64a5rY2qWKUf6m8Z0LFcvFYsHykDT-Aa5GCg0SOgR6rg2WGa1rafJuZd-fCNw8jeN9bRKn559RNz24n6kUIx9eGXIJsPdNMVrCBhvvz6zgyDQ";
settings="eyJyZWNlaXB0QXBpRW5kcG9pbnQiOiJodHRwczovL2NyLWRzLWVhc3R1cy5kZXYub3RkZXYub3JnL3JlcXVlc3QvdjEvY29uc2VudHJlY2VpcHRzIiwibWFudWFsVHJpZ2dlciI6ZmFsc2UsImNvbnRpbnVlT25FcnJvciI6dHJ1ZX0=";
</script>
<script type="text/javascript" charset="UTF-8">
OneTrust.ScriptTag.Preferences = [
   {
       "purpose": "{GUID}",
       "identifierAttributes": "value",
       "identifierValues": "Purpose1 Name",
        "labels": [
        {
        "language": "de",
        "label": "Purpose1 DE",
        "description": "Allows us to send you news and information about our products and services. DE"
        },
        {
        "language": "en-us",
        "label": "Purpose1",
        "description": "Allows us to send you news and information about our products and services."
        },
        {
        "language": "fr",
        "label": "Purpose1 FR",
        "description": "Allows us to send you news and information about our products and services. FR"
        }
      ]
    } ,
    {
       "purpose": "{GUID}",
       "identifierAttributes": "value",
       "identifierValues": "Purpose2 Name",
        "labels": [
        {
        "language": "de",
        "label": "Purpose2 DE",
        "description": "Allows us to send you news and information about our products and services. DE"
        },
        {
        "language": "en-us",
        "label": "Purpose2",
        "description": "Allows us to send you news and information about our products and services."
        },
        {
        "language": "fr",
        "label": "Purpose2 FR",
        "description": "Allows us to send you news and information about our products and services. FR"
        }
      ]
       "topics" : [
        {  
            "topic": "{GUID}",
            "identifierAttributes": "value",
            "identifierValues": "Topic1",
            "labels": [
            {
            "language": "en-us",
            "label": "Topic1"
            },
            {
            "language": "de",
            "label": "Topic1 DE"
            }
          ]
        } ,
        {
            "topic": "{GUID}",
            "identifierAttributes": "value",
            "identifierValues": "Topic2",
            "labels": [
            {
            "language": "en-us",
            "label": "Topic2"
            },
            {
            "language": "de",
            "label": "Topic2 DE"
            }
          ]
        } ,
        {
            "topic": "{GUID}",
            "identifierAttributes": "value",
            "identifierValues": "Topic3",
            "labels": [
            {
            "language": "en-us",
            "label": "Topic3"
            },
            {
            "language": "de",
            "label": "Topic3 DE"
            }
          ]
        }
       ]
    }
];
 
</script>
<!-- OneTrust Consent Receipt End -->

To use the script above

When using the above code, you may need to modify the identifierAttributes and identifierValues values to match the form in your page (or edit your form to use these values) for each purpose of processing in your collection point.

Attribute	Description
`identifierAttributes`	`identifierAttributes` should be the attribute name in your check box element that contains the unique identifying value that distinguishes each box from all the others. 'Value' is the default, but it can be changed if your form is different.
`identifierValues`	`identifierValues` should be the stored value of that attribute that maps to the particular purpose or topic. By default, this is populated with the purpose or topic name that matches the system GUID, but it can be changed if your form uses different values.

For example, the first purpose mapping in the code above (with identifierAttributes: value and identifierValues: Purpose1 Name), would map to the following check box:

📘
You should not alter the purpose or topic GUIDs provided by the code. This will most likely result in no receipts being generated.
The variable conditionalConsentTriggerId is an optional additional control for triggering consent, beyond the mapping of purposes and topics. This may be useful in scenarios where you want an additional check box type interaction to signify giving of consent. If used, the SDK will only trigger a consent request if this additional check box is selected, regardless of any mappings.
This variable should contain the ID of the check box required to be selected, such as conditionalConsentTriggerId = conditionalCheckbox.

Purpose Preferences

Mappings for purpose preferences work in a similar way to purposes and topics. For each purpose, the purpose preference options identifierAttributes and identifierValues must match the identifiers in the form fields that allow the SDK to get the correct values on submitting.

The following is an example of mapping purpose preferences in JavaScript.


<script>
OneTrust.ScriptTag.Preferences = [
    {
      "purpose": "{GUID}",
      "identifierValues": "purpose1",
      "identifierAttributes": "value",
      "topics": [],
      "customPreferences": [
        {
          "customPreference": "{GUID}",
          "options": [
            {
              "option": "{GUID}",
              "identifierValues": "customPreference1Option1",
              "identifierAttributes": "value"
            },
            {
              "option": "{GUID}",
              "identifierValues": "customPreference1Option2",
              "identifierAttributes": "value"
            },
            {
              "option": "{GUID}",
              "identifierValues": "customPreference1Option3",
              "identifierAttributes": "value",
               
            }
          ]
        }
      ]
    }
  ]
}];
</script>

The following is an example of mapping purpose preferences in HTML web forms.

<form action="confirm.html" method="get">
    <input type="hidden" id="confirmation" name="receiptId" value="" />
 
    <label for="firstName" class="sr-only">Your first name</label>
    <input type="text" id="firstName" placeholder="Your first name" autocomplete='given-name'>
 
    <label for="lastName" class="sr-only">Your last name</label>
    <input type="text" id="lastName" placeholder="Your last name" autocomplete='family-name'>
 
    <label for="inputEmail" class="sr-only">Email address</label>
    <input type="email" id="inputEmail"placeholder="Email address" required
            autocomplete='email'>
 
    <div class="checkbox">
        <label>
            <input type="checkbox" value="purpose1"> Purpose checkbox for Purpose 1
        </label>
 
        <div class="ml-1 my-1">
            <h6>Custom Preferences</h6>
 
            <label>
                <select id="customPreferenceOptions">
                    <option selected value="">
                        -----------
                    </option>
                    <option value="customPreference1Option1">
                        Custom Preference Option 1
                    </option>
 
                    <option value="customPreference1Option2">
                        Custom Preference Option 2
                    </option>
 
                    <option value="customPreference1Option3">
                        Custom Preference Option 3
                    </option>
                </select>
            </label>
        </div>
    </div>
 
    <button id="trigger" type="button">Submit form</button>
</form>

Overriding Purpose Preferences Options

If your web form uses elements different from check boxes (i.e. radio, selects, custom web components, etc.), you may override how the SDK will retrieve the value of the option consented. For example, if we use a select drop-down HTML element so that only a single option will be consented, then we can override how the SDK retrieves this.

Configuration Signature

The following is an example of a custom collection point definition interface.

interface CustomPreferenceDefinition {
   identifierValues: string;
   identifierAttributes: string;
   customPreference: string;
   getOptionsValue(): string[];
}

Method Signature

The following is an example of an interface for setting up a collection point for a purpose.

OneTrust.Api.SetCustomPreferencesDefinitions(purpose: string, definitions: CustomPreferenceDefinition[]): void;

Web Form HTML

The following is an example of a web form with select.

<form action="confirm.html" method="get">
    <input type="hidden" id="confirmation" name="receiptId" value="" />
 
    <label for="firstName">Your first name</label>
    <input type="text" id="firstName" placeholder="Your first name" autocomplete='given-name'>
 
    <label for="lastName">Your last name</label>
    <input type="text" id="lastName" placeholder="Your last name" autocomplete='family-name'>
 
    <label for="inputEmail" class="sr-only">Email address</label>
    <input type="email" id="inputEmail" placeholder="Email address" requiredautocomplete='email'>
 
    <div>
        <label>
            <input type="checkbox" value="purpose1"> Purpose checkbox for Purpose 1
        </label>
 
        <div class="ml-1 my-1">
            <h6>Custom Preferences</h6>
 
            <label>
                <select id="customPreferenceOptions">
                    <option selected value="">
                        -----------
                    </option>
                    <option value="customPreference1Option1">
                        Custom Preference Option 1
                    </option>
                    <option value="customPreference1Option2">
                        Custom Preference Option 2
                    </option>
                    <option value="customPreference1Option3">
                        Custom Preference Option 3
                    </option>
                </select>
            </label>
        </div>
    </div>
 
    <button id="trigger" type="button">Submit form</button>
</form>

JavaScript

The following is an example of JavaScript code to override a purpose preference of a purpose.

// To ensure external settings are loaded, use the Initialized promise:
OneTrust.Api.Initialized.then(() => {
    console.log("External settings loaded. We're ready to use them.");
 
    const PURPOSE_ID = 'a6570910-4d90-48f8-8f8d-5f0b4af0ce12';
 
    // custom function to get the ID of the selected option
    const getOptionsValue = () => { 
        // select with id "customPreferenceOptions"
        const options = document.getElementById('customPreferenceOptions');
 
        // return the option's value attribute
        return options ? [options.value] : [];
    };
 
    // define custom preferences definitions for purpose with id PURPOSE_ID
    OneTrust.Api.SetCustomPreferencesDefinitions(PURPOSE_ID, [{
        identifierValues: 'customPreference1',
        getOptionsValue
    }]);
});

Using Hosted Settings

When using the hosted settings version of the SDK, the following two options can be used:

Option 1

Alter your form to rely on the default identifierValues and identifierAttributes. For more information, see the Attribute table in Example B.

Option 2

Override the hosted values. For more information, see Overriding the Hosted SDK Settings.

Overriding the Hosted SDK Settings

The following script is an example of overriding Hosted SDK Settings.

// To ensure external settings are loaded, use the Initialized promise:
OneTrust.Api.Initialized.then(() => {       
    // Override identifier value
    let customDefinitions = OneTrust.Api.GetPurposeDefinitions();
    customDefinitions[0].identifierValues = "purpose1-modified";
    OneTrust.Api.SetPurposeDefinitions(customDefinitions);
});

Purposes and Topics

You can also set purpose and topic identifier values directly with API calls:

OneTrust.Api.Initialized.then(() => {
    // Override purpose value
    OneTrust.Api.SetPurposeIdentifier("<purpose GUID>", "<purpose identifier value>");
 
    // Override purpose value
    OneTrust.Api.SetTopicIdentifier("<topic GUID>", "<topic identifier value>");
});

📘
Topics are children of purposes in the collection point schema. However, your UI does not have to include purpose check boxes where there are multiple topics. If the SDK detects that a topic check box has been selected, it will automatically create a consent record for the parent purpose. If your UI has purpose check boxes as parents of topics, then you should ensure your UI contains logic that reflects this behavior.

Data Elements

The SDK also supports the ability to send data element values from a form to be stored in OneTrust (name, country, company etc.). To do this, the data element names must first be configured on the collection point.

Once configured, you can include additional JavaScript code similar to the example that follows. Similar to Purposes above, the data element identifierAttributes and identifierValues must match the identifiers in the form fields that allow the SDK to get the correct values on submitting.

The following is an example of submitting data element values in SDK:

<script type="text/javascript" charset="UTF-8">
    OneTrust.ScriptTag.DataElements = [
      {
        "identifierAttributes": "id",
        "identifierValues": "firstName",
        "dataElementName": "First Name"
      },
      {
        "identifierAttributes": "id",
        "identifierValues": "lastName",
        "dataElementName": "Last Name"
      },
      {
        "identifierAttributes": "id",
        "identifierValues": "Company",
        "dataElementName": "Company"
      }
    ];
  </script>

Language Labels

When you define the languages for a collection point, the SDK includes all available text labels for the purposes and topics, where the translations have been created. Both extracts above show examples of these labels which are also included in the Hosted SDK Settings file. OneTrust provides a range of JavaScript methods for using these labels in the UI of your web form. This allows your forms to ensure that they use the same language for purposes and topics as data subjects will see when logging in to preference centers.

The following is an example of supported JavaScript methods for languages:

// To ensure external settings are loaded first, use the Initialized promise:
OneTrust.Api.Initialized.then(() => {
 
    // Get all purpose labels for a language(can always be skipped to get a single/default/first label entry):
    const frenchPurposeLabels = OneTrust.Api.GetPurposeLabels("fr");
 
    // Get purpose label by language and purposeId/domIdentifier
    const frenchPurpose1Label = OneTrust.Api.GetPurposeLabel("purpose1", "fr");
 
    // Get all topic labels for a language:
    const frenchTopicLabels = OneTrust.Api.GetTopicLabels("fr");
 
    // Get topic label by language and topicId/domIdentifier
    const frenchTopic1Label = OneTrust.Api.GetTopicLabel("topic1", "fr");
 
    // Get all purpose labels for a default language(should only be used when a single language is defined)
    var allPurposeLabels  = OneTrust.Api.GetPurposeLabels();
});

Each label will have the following structure:

{
    id: "{GUID}",
    domId: "HTML attribute value used to find the checkbox on the page",
    language: "language code of the label",
    label: "Purpose/Topic label for a given language"
    description: "Purpose description for a given language(not defined for Topic labels)"
}

Sending Data Subject Language

The SDK can send the language for a data subject, along with the form submit, which will be stored as an attribute of that data subject. OneTrust will then use that language code to send out any email notifications, in the stored language of the data subject.

📘
This requires making sure the templates for that language are present in the Email Templates, which are part of the Global Settings configuration.

To store the language preference of a data subject correctly, your web form must generate the language using an ISO standard language or language-culture code format. This is done by setting the variable OneTrust.ScriptTag.Language.

The following is an example of setting the language preference of a data subject:

<script type="text/javascript" charset="UTF-8">
    OneTrust.ScriptTag.Language = "en-GB";
</script>

📘
Both 'en' and 'en-GB' formats are supported. In addition, this tag must be placed in a tag after the main SDK tag and should be set before the web form is submitted.
If you use this feature, you are responsible for notifying data subjects that this data is being collected and may be used to communicate with them in the selected/detected language.

Unencoded Settings Direct in JavaScript

You can write unencoded settings directly into your page to more easily make changes to the JavaScript.

identifierAttributes and identifierValues must match the identifiers in the form fields to allow the SDK to pass the correct values when the form is submitted.

The settings should be placed after the <body> tag in the HTML for the page. The following is an example of unencoded settings.

<script type="text/javascript" charset="UTF-8">
  
OneTrust.ScriptTag.ReceiptApiEndpoint = "{endpoint URL}";  //optional - can be left in settings - but if used settings can be removed completely.
   
OneTrust.ScriptTag.DataElements = [     
{    
"identifierAttributes": "id",       
"identifierValues": "firstName",  
"dataElementName": "First Name"     
},
     
{      
"identifierAttributes": "id",     
"identifierValues": "lastName",      
"dataElementName": "Last Name"    
},
     
{       
"identifierAttributes": "id",      
"identifierValues": "inputEmail",      
"dataElementName": "Email"     
}  
];
  
OneTrust.ScriptTag.Preferences = [      
{          
"purpose": "622ab782-8ad7-4886-9dc3-8618dcf03900",          
"identifierValues": "Sample Purpose",   
"identifierAttributes": "value",         
"topics": [
                {
                    "topic": "2b55ca4e-c232-4396-9602-d6f2ea5bbd18",                   
                    "identifierValues": "A Topic",                   
                    "identifierAttributes": "value"
                },
                {
                    "topic": "e4e19d3b-7de6-4054-a3f0-fd6b8a82775a",                 
                    "identifierValues": "AA Topic",                   
                    "identifierAttributes": "value"
                }           
]       
}  
];
</script>

Using manualTrigger

manualTrigger is a boolean variable included in the encoded settings portion of the SDK. You can decode the settings using a base64 decoding tool, alter it, and re-encode the settings string. The default value is false, but setting the value to true will allow custom workflow to be executed. This enables scenarios where you may want alternative logic or a workflow to trigger the receipt generation action, rather than the default check box/submit logic.

Once the trigger conditions are met, call Receipt.TriggerReceiptAction(downloadRawReceipt) from JavaScript to create the receipt. To download the raw receipt signature, set the downloadRawReceipt parameter to true.

Loading OneTrust Through a Tag Manager

Once you have configured your script, it can be loaded via a tag management tool such as Google Tag Manager. It only needs to be loaded to the page your web form is on. If using Google Tag Manager, set the trigger for the page as DOM Ready to ensure that the form itself loads fully before the script.

Support for Multiple Forms on a Single Page

To support multiple forms on a single page, you can pass both the identifier and token via JavaScript using a custom flow. You can also trigger the receipt request.

OneTrust.Api.TriggerReceiptAction("[email protected]", "CP token"); // pass both token and identifier, which can be used to create receipts for multiple CPs with a single script tag
OneTrust.Api.TriggerReceiptAction("[email protected]"); // pass custom identifier only, when shared default token from the script tag is to be used.
OneTrust.Api.TriggerReceiptAction(); // trigger receipt request with defaults working as before

📘
Since the ingest service is not passing the default purpose ID from JWT for single-purpose non-explicit collection points, custom-flow users will need to manually pass the purpose ID into the request payload, as shown below. Ingest service will treat missing payload as correct, return the receipt ID, but will not create any transactions.

var purposes = [{Id: "b0dc5e4e-ffe8-4db5-ae5f-577747e5f86a"}];
OneTrust.Api.TriggerReceiptAction("[email protected]", "CP token", purposes); // pass both token and identifier, which can be used to create receipts for multiple CPs with a single script tag
OneTrust.Api.TriggerReceiptAction("[email protected]", null, purposes); // pass custom identifier only, when shared default token from the script tag is to be used.
OneTrust.Api.TriggerReceiptAction(null, null, purposes); // trigger receipt request with defaults working as before

Since using multiple consent forms on a single page would likely mean multiple collection points are used, the most common use case would be to pass both the identifier and the token as in the first line above. All other optional parameters (purposes, data elements, purpose preferences) can be passed into OneTrust.Api.TriggerReceiptAction() method.

Fire and Forget

You can fire a consent transaction with text content instead of JSON and bypass waiting for the receipt ID. To do this, you can call the TriggerBeaconReceiptAction function. This function accepts identifier, token, purposes, dsDataElements (data subject's data elements), customElements and downloadRawReceipt as optional parameters.

The following is an example of fire and forget.

<!-- OneTrust Consent Receipt Start -->
<script src="otconsent-1.0.js" type="text/javascript" charset="UTF-8" id="consent-receipt-script">
    settingsUrl="your setting url";
    identifierId="inputEmail1"
</script>
<!-- OneTrust Consent Receipt End -->
<!-- Custom Integration Start -->
<script type="text/javascript" charset="UTF-8">
    $(function () {
        var cp1Purpose = [{Id: "your purpose id"}];
        $("#sample_form1").submit(function (event) {
            event.preventDefault();
            const identifier = $("#inputEmail1").val();
            const token = "your token goes here";
            OneTrust.Api.TriggerBeaconReceiptAction(identifier, token, cp1Purpose).then((data) => {
                console.log("data", data);
                document.location.href = "/beacon-result.html";
            });
        });
    });
</script>
<!-- Custom Integration End -->

OneTrust Internal Users: DO NOT MAKE ANY DIRECT CHANGES!

📘

Example A: Single Purpose, Form Submit Only

To use the script above

📘

Example B: Multiple Purposes and/or Topics, Opt In Check Boxes

To use the script above

📘

Purpose Preferences

Overriding Purpose Preferences Options

Configuration Signature

Method Signature

Web Form HTML

JavaScript

Using Hosted Settings

Overriding the Hosted SDK Settings

Purposes and Topics

📘

Data Elements

Language Labels

Sending Data Subject Language

📘

📘

Unencoded Settings Direct in JavaScript

Using manualTrigger

Loading OneTrust Through a Tag Manager

Support for Multiple Forms on a Single Page

📘

Fire and Forget