FormAssembly

The FormAssembly integration allows you to embed DataGuard CPM consent capture points directly into your FormAssembly 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 FormAssembly forms.

Prerequisites

Before you begin, ensure you have the following:

Access to the DataGuard CPM Platform.
Administrative access to a FormAssembly account.

If you don't have access to the DataGuard CPM Platform, please contact us.

Integration Setup

To integrate DataGuard CPM with FormAssembly, follow these steps:

Step 1: Insert the Code Snippet

Log in to your FormAssembly account and navigate to the form where you want to embed the DataGuard CPM consent capture.
Open the form in the editor and locate the section where you can add custom HTML or code.
Insert the following code snippet into the form:

<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 = '#button';
    var WIDGET_SIBLING_SELECTOR = '.actions'
    var STYLING_CLASS = 'ff-group-row';

    // 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);
            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 FormAssembly integration with DataGuard CPM is now complete. Any consents collected through your FormAssembly form will be automatically synced with the DataGuard CPM platform!