Braze In-App Campaigns

The Braze In-App Campaigns integration enables you to collect consent from users directly through interactive in-app messages. This integration supports both new users and existing users, providing flexibility in how you capture and synchronize consent data.

  • New User: This option should be used to collect consent from users who do not yet exist in DataGuard CPM. The widget will allow these users to sign up and give consent without being registered beforehand.
  • Existing User: This option is for users who are already registered in DataGuard CPM and are synchronised with Braze. The widget will show the current consent state of the user, allowing them to modify their consents.

Important: The Existing User Consent option will only work if the Braze integration with DataGuard CPM is properly set up. Make sure you have synchronised the userโ€™s access token using our Braze Integration Setup guide.

Prerequisites

Before you begin, ensure you have the following:

  • Access to the DataGuard CPM Platform.
  • Administrative access to a Braze account to set up the campaign.

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

Braze Setup

To use this integration, you need to create and configure an In-App Campaign in Braze.

Step 1: Create a New Braze In-App Campaign

  1. Log in to your Braze account.
  2. Navigate to In-App Messaging under Messaging in the left-hand menu.
  3. Click Create Campaign and choose In-App Message as the type.
  4. Give the campaign a name (e.g., "DataGuard Consent Collection").
  5. Click on Traditional Editor.
  6. Select the platform(s) where you want the campaign to appear (e.g., iOS, Android, Web).
  7. Change the Message Type to Custom Code.

Step 2: Insert the Code Snippet

In this section, you will find two HTML snippetsโ€”one for New Users and one for Existing Users. Use the tabs below to toggle between the two, depending on your campaign's target audience.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <style>
      body {
        height: 100vh;
        width: 100vw;
        margin: 0;
        background: #00000088;
      }
    </style>
</head>
<body>

<div id="dataguard-widget"></div>
<script>
    const loadWidget = () => {
        ExpressStatelessCapturePoint.load({
            id: 'dataguard-widget',
            templateId: '<template-id>',
            uniqueReference: '{{${user_id}}}',
            display: {
                location: 'centre',
                campaign: '<campaign-name> (optional)',
            },
            events: {
                onSuccess: () => appboyBridge.closeMessage(),
                onFailure: () => appboyBridge.closeMessage(),
                onEmptyLoad: () => appboyBridge.closeMessage(),
                onLoadError: () => appboyBridge.closeMessage(),
            },
        });
    }
</script>
<script src="<scripts-url>/capture-point.min.js" onload="loadWidget()"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <style>
      body {
        height: 100vh;
        width: 100vw;
        margin: 0;
        background: #00000088;
      }
    </style>
</head>
<body>

<div id="core-widget"></div>
<script>
    const loadWidget = () => {
        StatefulCapturePoint.load({
            id: 'core-widget',
            templateId: '<template-id>',
            token: '{{custom_attribute.${dg_access_token}}}',
            display: {
                location: 'centre',
                campaign: '<campaign-name> (optional)',
            },
            events: {
                onSuccess: () => appboyBridge.closeMessage(),
                onFailure: () => appboyBridge.closeMessage(),
                onEmptyLoad: () => appboyBridge.closeMessage(),
                onLoadError: () => appboyBridge.closeMessage(),
            },
        });
    }
</script>
<script src="https://scripts.sandbox.consentric.io/capture-point.min.js" onload="loadWidget()"></script>
</body>
</html>

Step 3: Choose the Correct Script URL

Replace the <scripts-url> with the appropriate script URL. The URLs can be found on the Environments page.

Step 4: 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.

Step 5: Complete and Publish the Campaign

  1. Configure any remaining settings such as scheduling, targeting, and frequency caps in the Braze UI.
  2. Review and test the campaign using Braze's preview options.
  3. Once you are satisfied with the campaign configuration, click Launch to make the campaign live.

Additional Resources

For more information on how to customise and configure your DataGuard CPM widget, check out our Sign Up Widget or Manage Widget pages.

Conclusion

Your Braze In-App Campaign integration with DataGuard CPM is now set up and ready to capture user consent. Whether you are collecting consent from new users or showing existing users their current consent state, the integration will ensure that consent is synced with DataGuard CPM automatically.