Brevo Forms
The Brevo Forms integration allows you to embed DataGuard CPM consent capture points directly into your Brevo forms. This integration ensures the automatic synchronization of consent data collected via your forms with the DataGuard CPM platform. The integration process involves embedding a code snippet into your Brevo forms.
Prerequisites
Before you begin, ensure you have the following:
- Access to the DataGuard CPM Platform.
- Administrative access to the page that the Brevo Form is embedded on.
If you don't have access to the DataGuard CPM Platform, please contact us.
Integration Setup
To integrate DataGuard CPM with Brevo Forms, follow these steps:
Step 1: Insert the Code Snippet
- Open the page that the Brevo Form is embedded on.
- Insert the following code snippet into the page:
<script>
// DG CPM Configuration
var SCRIPT_URL = '<scripts-url>/capture-point.min.js';
var TEMPLATE_ID = '<template-id>';
// Form builder configuration
var EMAIL_SELECTOR = '#EMAIL';
var BUTTON_SELECTOR = '.sib-form-block__button';
var WIDGET_SIBLING_SELECTOR = '.sib-form-block__button'
var STYLING_CLASS = 'sib-form-block';
// Global variables
var widget;
var email;
var hasSubmitted = false;
window.addEventListener('load', function () {
var dgScript = document.createElement('script');
dgScript.setAttribute('src', SCRIPT_URL);
dgScript.onload = function () {
var widgetId = 'dataguard-widget';
var widgetElement = document.createElement('div');
widgetElement.setAttribute('id', widgetId);
widgetElement.setAttribute('class', STYLING_CLASS);
var siblingElement = document.querySelector(WIDGET_SIBLING_SELECTOR).parentNode.parentNode;
siblingElement.parentNode.insertBefore(widgetElement, siblingElement);
widget = ExpressStatelessCapturePoint.load({
id: widgetId,
templateId: TEMPLATE_ID,
display: {
location: 'inside',
closeOnSubmit: false,
displayButtons: false,
},
contactDetails: {
verification: {
emailAddress: function () {
return email
},
},
}
});
}
document.body.appendChild(dgScript);
});
function pollForElement(selector, runWhenPresent) {
var pollTimer = setInterval(async function () {
var element = document.querySelector(selector);
if (element) {
await runWhenPresent(element);
clearInterval(pollTimer);
}
}, 100)
}
pollForElement(BUTTON_SELECTOR, function (button) {
button.addEventListener('click', async function (event) {
if (!hasSubmitted && email) {
event.preventDefault();
await widget.submit();
hasSubmitted = true;
button.click();
}
if (hasSubmitted) {
hasSubmitted = false;
}
});
});
pollForElement(EMAIL_SELECTOR, function (input) {
email = input.value;
input.addEventListener('change', async function (event) {
email = event.target.value;
});
});
</script>
Step 2: Select the Correct Script URL
Replace the <scripts-url>
with the appropriate script URL. The URLs can be found on the Environments page.
Step 3: Replace the Template Id
Replace the <template-id>
with the Template id for your DataGuard CPM widget. For details on how to set up your Template, please refer to the Template Setup page.
Additional Resources
For more information on how to customise and configure your DataGuard CPM widget, check out our Sign Up Widget page.
Conclusion
Your Brevo Forms integration with DataGuard CPM is now complete. Any consents collected through your Brevo form will be automatically synced with the DataGuard CPM platform!
Updated about 2 months ago