Set up a custom Form CTA integration

Want to integrate your Hub with an external system that Uberflip doesn’t have a built-in integration for? To do that, you can create Custom Form CTAs.

Overview

Custom Form CTAs provide a method to push Uberflip CTA Data from Uberflip to an external service for further processing. They allow you to leverage Uberflip CTA functionality (Asset Gating, Show Besides, etc) without having to integrate a Marketing Automation Platform with Uberflip. This is useful in the following scenarios:

• Your Marketing Automation Platform does not directly integrate with Uberflip
• You have a custom solution in place to ingest data
• You want to pass user data to a third party service for processing

Limitations

One thing that is important to understand about Custom Form CTAs is that they come with their own list of caveats and limitations. You will need to consider the following before attempting to create a Custom Form CTA:

• Anything to do with Marketing Automation Platform cookies will not be leveraged by the CTA. If you wish to use MAP tracking cookies, they will need to be managed through the Custom Code area of Uberflip.
• CTAs will always display, regardless of if they've been submitted before. This could be remedied with a custom code solution (leveraging the onCtaSubmitSuccess Javascript event within Uberflip. More information on how to do that can be found here)
• Progressive Profiling is not available with Custom Form CTAs through Uberflip. This could be built as a custom Javascript solution, if desired.
• All data points will need to be assigned manually, including Uberflip conversion data. For example, uf_conversion_item_id would normally be pushed into a MAP field automatically. When using Custom Form CTAs, the JSON that is sent across will need to be leveraged and written to the contact record in the receiving system by the endpoint.
• Item tracking is not sent with the submit, only the last viewed stream. Any item tracking would need to be built as custom JS and appended to the CTA Submit manually (through hidden fields, for example)

Create an Endpoint

The first thing you have to do when creating a custom CTA is define where the data from your CTA submit is going to be sent once the user submits their information. This process is the "Custom" in Custom Form CTA, and is entirely up to you and your internal resources.

When Uberflip sends CTA data, it is sent as JSON. Here's an example of what data is passed across in an Uberflip Custom Form CTA submission:

{
    "event": "cta_submitted",
    "occurred_at": "2016-05-31T11:24:33-04:00",
    "account_id": 8227,
    "cta_id": 10194,
    "hub_id": 4003,
    "submission": {
        "url": "http:\/\/hub.dev.flyptech.com\/h\/i\/1232097-7-google-docs-hacks-for-more-efficient-content-creation",
        "ip_address": "10.5.5.6",
        "fields": {
            "first_name": "John",
            "last_name": "Doe",
            "email_address": "john.doe@gmail.com",
            "favourite_ice_cream": "dark_chocolate",
            "opt_in_flag": "1"
        },

        "item_id": 1232097,
        "stream_id": 38898,
        "previous_item_id": 1232094,
        "previous_stream_id": 38898
    }
}

In order to do anything with that information, we'll need something to receive and process that output. Once that piece has been built, we can then integrate that with Uberflip.

Set Up Custom Integration with Uberflip

In order to integrate your brand new endpoint, do the following:

1. Go to Account Settings > Integration > Custom Integration
   
2. Click "Add Custom Integration"
   
3. This screen has a few parameters; see below for instructions.

Custom Integration Parameters

Required and Recommended

• Name (Required): The Name of your Custom Integration
• Description: A short description of your integration (i.e. what it does, what its for etc)
• On Submit (Required) - The action taken when a user submits your CTA. This is the mechanism that sends data to the endpoint that you've specified

Optional

On Create: Fires when a new CTA is created

On Update: Fires when a CTA is updated

On Delete: Fires when a CTA is deleted

On Get Fields: Fetches predefined CTA fields when you create a new CTA

API Reference can be found here.

Configure Your CTA

The process for using your newly-minted Custom Form CTA is almost identical to using a regular Form CTA, with the following notes:

• The option you will select appears as the Name of the Custom Form CTA you defined in the Integration area earlier
• You will need to define which fields you want to see on the CTA, as no default fields are pushed into the Custom Form CTA (unless you've defined a "On Get Fields" action).

From there, you can use and place this CTA as you would any other.