Custom Form CTAs

July 24, 2018 Success Team
Have you ever wanted to integrate with an external system that Uberflip doesn’t natively integrate with? If so, Custom Form CTAs may be something you'll find quite useful. Custom Form CTAs provide a method to push Uberflip CTA Data from Uberflip to an external service for further processing. If this sounds like something you’re interested in doing, read on!
 
 
Overview
Custom Form CTAs provide a way 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:
  1. Your Marketing Automation Platform does not natively integrate with Uberflip
  2. You have a custom solution in place to ingest data
  3. 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)
 

How to Create a Custom Form CTA

Create Your 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:
 
Go to Account Settings > Integration > Custom Integration
Click "Add Custom Integration"
 
Custom Integrations Menu
 
This screen has a few parameters, which are as follows:
 
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.
Previous Article
Copying a Form CTA
Copying a Form CTA

Copying your Form CTAs is a great way to save time when creating similar CTAs to be placed across your Hub.

No More Articles

Have questions about setting up your Form CTAs?

Contact Us