Overview
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
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 when errorType is "server", contains additional server-side error detailsSample Use Cases
Use Case 1: Using the Client's Custom Form with their Fields
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
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.
1.Follow the same steps as Use Case 1 (using the client's form).
2.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.
TrustArc · External Submit · trustarc.com