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!