ConvertFlow Javascript API examples

Once you've placed ConvertFlow's script on your website, you can access ConvertFlow's client-side javascript API.

How to access a visitor's personalization data

Once ConvertFlow's script has finished loading, you can access a visitor's data after the cfReady event has fired, by calling convertflow.person

jQuery(document).on('cfReady', function(event) {
   // log currently tracked data in console
   console.log(convertflow.person);
});

Don't want to use jQuery? ConvertFlow fires plain javascript events too.

window.addEventListener("cfReady", function(event) {
   // log currently tracked data in console
   console.log(convertflow.person); 
});

How to help ConvertFlow identify contacts on your website

If you already have collected the email address of your visitor (example: you're using ConvertFlow for logged in users in an app), you can tell ConvertFlow who the person is using the identify function.

Here's a snippet you can use, just replace  EMAIL_ADDRESS_HERE with a string of your contact's email address.

The option "override" can be set to  false if you want ConvertFlow to identify someone only if the visitor isn't already tracked as a contact.

Make sure to run this after the cfReady event by wrapping it with the given event listener.

jQuery(document).on('cfReady', function(event) {
   convertflow.identify({email: 'EMAIL_ADDRESS_HERE', override: true});
});

How to access contact fields after form submissions

If you want to access the fields collected by ConvertFlow forms upon submission with a site-wide script, you can hook into the  cfSubmit event to access the latest conversion event with the data variable inside the conversion event callback. You can access the latest submitted field data with data.fields

jQuery(document).on('cfSubmit', function(event, data) {
   // log latest conversion event in console
   console.log(data);
});

If you're not using jQuery, the field data from the conversion event is accessed using event.details and the field data is accessed using event.details.fields

window.addEventListener("cfSubmit", function(event) {
   // log latest conversion event in console
   console.log(event.details);
});

Pro tip: You can also add custom javascript in each form element's completion script manager, if you wanted the script to run only upon submission of that form. Here's more info on using ConvertFlow's custom script management tools →

How to access conversion event data upon all conversions

By hooking into the cfConversion event callback, you can capture conversion event details upon completion of any button, form or survey. For form and survey conversion events, the latest submitted fields will be accessible under data.fields, or event.details.fields for plain javascript events.

jQuery(document).on('cfConversion', function(event, data) {
   // log latest conversion event in console
   console.log(data);
});

How to initiate ConvertFlow with Javascript (for one-page apps)

If you use ConvertFlow in a one-page application, where navigating the app doesn't initiate an entire page load, you can manually initiate ConvertFlow's campaign targeting logic by calling convertflow.start()

For example, if you use Ruby on Rails, where Turbolinks is used to load only certain parts of pages upon page navigation, you can trigger ConvertFlow's campaign targeting logic to run on page change navigation in the page Turbolinks callback, like so...

jQuery(document).on('page:change', function() {
   convertflow.start()
});