This feature supports TrustArc customers’ checkout process flow by embedding our consent form to submit data subjects’ consent when they click the “Checkout” button. Customers have the ability to embed TrustArc consent form on their workflow (such as signup or purchase) without a submit button. Customers can tie the consent submission to their workflow’s checkout or submit button and submit the consent using their own website's form elements as a trigger.
For information on how to build the script, in the Publish tab of the Consent Form creation process, click the Configuration Guidelines button and scroll down to the “External submit” section.
External Submit
The External Submit feature allows you to integrate TrustArc consent forms more seamlessly into your existing website workflows. This method enables you to trigger consent form submission using external webpage elements like your own Sign Up, Checkout, or Submit buttons, instead of relying on the built-in TrustArc submit button.
Key Benefits:
- Allows you to embed the TrustArc consent form without displaying the default submit button
- Enables consent submission to be triggered by custom elements on your website
- Supports passing default values and custom identifiers at the time of submission for more flexible data handling
Using the External Submit Feature
Embedding the Script
Embed the TrustArc script as part of your webpage or checkout flow. To trigger the consent form submission manually, use:
window.trustarc.upm.externalSubmit()().then(
(response) => {
// Handle success response here
},
(error) => {
// Handle error response here
}
);
Using
awaitSyntaxThe
externalSubmit()method returns a Promise, allowing use withawait:
await window.trustarc.upm.externalSubmit()();
Passing Default Values
You can add default values when submitting by supplying an object with key-value pairs, where each key is an identifier ID in the TrustArc form and the value is the data to submit:
await window.trustarc.upm.externalSubmit()({
"<IDENTIFIER_ID_HERE>": "<IDENTIFIER_VALUE_HERE>",
"<IDENTIFIER_ID_2_HERE>": "<IDENTIFIER_2_VALUE_HERE>"}
);
Error Handling
If the submission fails, the method will return an error object. Below is an example of what the error object might look like:
{
"errorType": "form",
"message": "Failed to submit. Please fill up all required fields and input valid values."
}
Error Object Properties
- errorType (
String): Describes the type of error"form": Validation error (e.g., required field is missing or invalid)"server": Internal server error when saving the submission
- message (
String): A human-readable explanation of the failure error (
Object, optional): Returned only whenerrorTypeis"server", contains additional server-side error details
Sample Use Cases
Use Case 1: Using the Client’s Custom Form with their Fields
- Embed the CPM Script Tag
- Go to the Publish tab in the CPM platform. Copy the script tag provided, then paste it into the client’s website
<head>or<body>.
- Hide the CPM Form (if not needed visually).
- Create a
<div>element with a unique ID (for example, cpm-form). Then, add the CPM form to this<div>. Apply a style to display none so the CPM form will not display on their website:
</style>
<body>
<div id="cpm-form" style="display: none"></div>
<div class="form-container">
<h2>Client Form</h2>
<h5>This is a sample client form</h5>
<form>
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="Enter email address"
required
/>
<label for="jurisdiction">Jurisdiction</label>
<select id="jurisdiction" name="jurisdiction" required>
<option value="">Select Jurisdiction</option>
<option value="AS_PH">Philippines</option>
<option value="NA_CA">Canada</option>
<option value="NA_US">United States</option>
</select>
<div class="checkbox-container">
<input type="checkbox" id="agree" name="agree" />
<label for="agree" style="margin: 0"
>I agree to the <a href="">terms and conditions</a>
</label>
</div>
- Create a client-side custom Submit button.
<button type="button" id="external-submit" class="submit-btn">
Submit
</button>
- Create a script tag to add an Event Listener. The script listens for clicks on the Submit button.
This triggers the external submit function using the CPM-provided method.
- Pass the required data to External Submit. Create an object with fields matching the CPM form fields (by UID).
<script>
const externalButton = document.getElementById("external-submit");
externalButton.addEventListener("click", function () {
const email = document.getElementById("email").value.trim();
const jurisdiction = document.getElementById("jurisdiction").value;
const checkbox = document.getElementById("agree").checked;
window.trustarc.upm
.externalSubmit()({
"c7894273-24b6-441d-abb8-55dfa75f7b43": checkbox,
"34c24c01-b919-4ee0-969e-8d91b95101d5": email,
"00000000-0000-0000-0000-100000000000": jurisdiction,
"6c335b54-1dd2-4ce9-b85d-4331bd19da50": "Terms and Conditions",
})
.then(
(response) => {
// Handle success response here
},
(error) => {
// Handle success response here
});
</script>
USE CASE 1: SAMPLE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<style>
body {
background: #f4f6f8;
font-family: Arial, Helvetica, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.form-container {
background: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
padding: 2rem;
width: 100%;
max-width: 400px;
}
h2 {
margin-top: 0;
text-align: center;
color: #333;
}
h5 {
text-align: center;
color: #666;
font-size: 12px;
margin-bottom: 1.5rem;
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
color: #555;
}
input[type="email"],
select {
width: 100%;
padding: 0.75rem;
margin-bottom: 1.5rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}
.checkbox-container {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
}
.checkbox-container input[type="checkbox"] {
margin-right: 0.5rem;
}
.submit-btn {
width: 100%;
padding: 0.75rem;
background: #007bff;
color: #fff;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s ease;
}
.submit-btn:hover {
background: #0056b3;
}
.note {
font-size: 10px;
color: #4a4848;
text-align: center;
text-align: left;
}
</style>
<body>
<div id="cpm-form" style="display: none"></div>
<div class="form-container">
<h2>Client Form</h2>
<h5>This is a sample client form</h5>
<form>
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="Enter email address"
required
/>
<label for="jurisdiction">Jurisdiction</label>
<select id="jurisdiction" name="jurisdiction" required>
<option value="">Select Jurisdiction</option>
<option value="AS_PH">Philippines</option>
<option value="NA_CA">Canada</option>
<option value="NA_US">United States</option>
</select>
<div class="checkbox-container">
<input type="checkbox" id="agree" name="agree" />
<label for="agree" style="margin: 0"
>I agree to the <a href="">terms and conditions</a>
</label>
</div>
<button type="button" id="external-submit" class="submit-btn">
Submit
</button>
<p class="note">
Note: Once the Submit button is clicked, the CPM External Submit
function is triggered. The input values entered in the form fields
above are passed along with their corresponding field IDs as defined
in the CPM form configuration.
</p>
</form>
</div>
<script>
!(function () {
"use strict";
var t = document.createElement("script");
(t.src = "https://cpm-form.trustarc.com/browser/client.js"),
(t.type = "text/javascript"),
(t.defer = !0),
document.body.appendChild(t),
(window.trustarc = window.trustarc || {});
var r = window.trustarc;
r.upm = [];
for (
var n = ["init", "destroy", "externalSubmit"], e = 0;
e < n.length;
e++
) {
var o = n[e];
r.upm[o] =
r.upm[o] ||
(function (t) {
return function () {
var n = Array.prototype.slice.call(arguments);
r.upm.push([t, n]);
};
})(o);
}
r.upm.init(
{
brandId: "9c221d31-4424-402c-bb74-cdbf160662f8",
consentFormId: "6a51f0c6-d9f9-486f-aaa8-e4ca799dd60c",
containerId: "cpm-form",
},
(error) => {
console.log("[CPM Error]", error);
}
);
})();
</script>
<script>
const externalButton = document.getElementById("external-submit");
externalButton.addEventListener("click", function () {
const email = document.getElementById("email").value.trim();
const jurisdiction = document.getElementById("jurisdiction").value;
const checkbox = document.getElementById("agree").checked;
window.trustarc.upm
.externalSubmit()({
"c7894273-24b6-441d-abb8-55dfa75f7b43": checkbox,
"34c24c01-b919-4ee0-969e-8d91b95101d5": email,
"00000000-0000-0000-0000-100000000000": jurisdiction,
"6c335b54-1dd2-4ce9-b85d-4331bd19da50": "Terms and Conditions",
})
.then(
(response) => {
window.alert(
"Consent created successfully: " + JSON.stringify(response)
);
},
(error) => {
window.alert("Error creating consent: " + JSON.stringify(error));
}
);
});
</script>
</body>
</html>
Use Case 2: Using TrustArc CPM Form but with a Custom Client Submit Button
- Embed the CPM Script Tag
- Go to the Publish tab in the CPM platform. Copy the script tag provided.
- Then create a <div> on the page where the CPM form should appear.
<h2 style="text-align: center;">This is a sample client website</h2>
<div id="cpm-form" class="d-flex"></div>
<button type="button" id="external-submit" class="submit-btn">
This is a Client Submit button
</button>
- Initialize the CPM Form. Use the init method and pass the container ID.
}
r.upm.init(
{
brandId: "9c221d31-4424-402c-bb74-cdbf160662f8",
consentFormId: "6a51f0c6-d9f9-486f-aaa8-e4ca799dd60c",
containerId: "cpm-form",
hideSubmitButton: true,
hideFooterButtons: true,
},
(error) => {
console.log("[CPM Error]", error);
}
Create a custom Client Submit Button. Each time this button is clicked, it will trigger the external submit function. There is no need to manually pass an object. Form field values will be automatically included and sent to the external submit function.
However, clients can still choose to pass a custom object if needed. If they are using the TrustArc CPM form, all form values will be passed automatically by default.
<script>
const externalButton = document.getElementById("external-submit");
externalButton.addEventListener("click", function () {
window.trustarc.upm
.externalSubmit()()
.then(
(response) => {
window.alert(
"Consent created successfully: " + JSON.stringify(response)
);
},
(error) => {
window.alert("Error creating consent: " + JSON.stringify(error));
}
);
});
</script>
USE CASE 2: SAMPLE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<style>
.submit-btn {
width: 100%;
padding: 0.75rem;
background: #007bff;
color: #fff;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s ease;
}
.submit-btn:hover {
background: #0056b3;
}
</style>
<body>
<h2 style="text-align: center;">This is a sample client website</h2>
<div id="cpm-form" class="d-flex"></div>
<button type="button" id="external-submit" class="submit-btn">
This is a Client Submit button
</button>
<script>
!(function () {
"use strict";
var t = document.createElement("script");
(t.src = "http://localhost:3000/browser/client.js"),
(t.type = "text/javascript"),
(t.defer = !0),
document.body.appendChild(t),
(window.trustarc = window.trustarc || {});
var r = window.trustarc;
r.upm = [];
for (
var n = ["init", "destroy", "externalSubmit"], e = 0;
e < n.length;
e++
) {
var o = n[e];
r.upm[o] =
r.upm[o] ||
(function (t) {
return function () {
var n = Array.prototype.slice.call(arguments);
r.upm.push([t, n]);
};
})(o);
}
r.upm.init(
{
brandId: "9c221d31-4424-402c-bb74-cdbf160662f8",
consentFormId: "6a51f0c6-d9f9-486f-aaa8-e4ca799dd60c",
containerId: "cpm-form",
hideSubmitButton: true,
hideFooterButtons: true,
},
(error) => {
console.log("[CPM Error]", error);
}
);
})();
</script>
<script>
const externalButton = document.getElementById("external-submit");
externalButton.addEventListener("click", function () {
window.trustarc.upm
.externalSubmit()()
.then(
(response) => {
window.alert(
"Consent created successfully: " + JSON.stringify(response)
);
},
(error) => {
window.alert("Error creating consent: " + JSON.stringify(error));
}
);
});
</script>
</body>
</html>
Use Case 3: Mixing Client’s Form with TrustArc’s Form Fields
This use case involves combining custom form fields with the TrustArc form fields for submission.
- Follow the same steps as Use Case 1 (using the client’s form).
- Instead of manually passing all values in the object, you can mix client-specific data with TrustArc form values.
This hybrid method is useful when you want to integrate your own form fields alongside the TrustArc form fields while ensuring both sets of data are captured and submitted together.