ConvertFlow prides itself on being a powerful no-code tool and has multiple features to help build custom campaigns without needing to use custom codes or looping in developers.
The codes listed below were created by the ConvertFlow team and have worked for multiple customers. For information on how to add custom codes to different areas of a campaign, please refer to this article →
While we provide the tools to add custom code to campaigns, helping write and troubleshoot any custom code added to ConvertFlow goes beyond the scope of our support offerings while on our self-service plans.
Some of these codes need to be updated to work with a specific campaign, and the parts that need to be edited will be specified in each code as seen below:
#ctaID_GOES_HERE, CTA_ID_HERE
YOUR_GLOBAL_VARIABLE
REPLACE_WITH_FIELD_DATA_NAME
#cta_REPLACEWITHCTAID
?Id=INFUSIONSOFT_ID_GOES_HERE
#navigation-id
REPLACE_WITH_FIELD_DATANAME
WEBSITEID: Is the ConvertFlow ID number assigned to a website in a ConvertFlow account. It can be found in the install code or the account URL after "websites/"
CTAID: Is the campaign ID number assigned to each ConvertFlow campaign that is found in the second part of the URL when in the campaign after "cta/"
If a code isn't working or an error is found, we suggest looping in the website developer and reaching out to the ConvertFlow team through the chat widget or emailing us at support@convertflow.com.
Close hook/overlay with backdrop click
<script>
jQuery('.cf-overlay, .cf-hook').css('cursor', 'pointer');
jQuery(document).on('click', '.cf-overlay, .cf-hook', function(event) {
if (jQuery(event.target).hasClass('cf-overlay') || jQuery(event.target).hasClass('cf-hook')) {
jQuery(event.target).find('.cf-close').trigger('click');
};
});
</script>
Add a custom font
<style>
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
.convertflow-cta body, .convertflow-cta h1, .convertflow-cta h2, .convertflow-cta h3, .convertflow-cta h4, .convertflow-cta h5, .convertflow-cta p, .convertflow-cta input, .convertflow-cta select, .convertflow-cta span, .convertflow-cta textarea {
font-family: 'Raleway', sans-serif !important;
}
</style>
Sticky bar push down header
<script>
$cf('#navigation-id').css('top', $cf('#cta' + 'CTA_ID_HERE').outerHeight() + 'px')
$cf('.cf-cta-close[data-cta-id="' + 'CTA_ID_HERE' + '"]').on('click', function() {
$cf('#navigation-id').css('top', '0')
})
</script>
Same page reload (for single page apps)
<script>
var currentUrl = window.location.href;
// Redirect User with Access
window.location.href = currentUrl + '?access=true';
</script>
NOTE: We also suggest using the ConvertFlow API call when dealing with a single-page app. For details on this API call, please refer to this article →
Auto close popup after 5 seconds
<script>
setTimeout(function() {
$cf('#ctaID_GOES_HERE .cf-close').click();
}, 5000);
</script>
Clear pre-filled values
<script>
$cf('.cf-form-field, .cf-custom-field').find('input, select, textarea').each(function() {
$cf(this).val('')
$cf(this).prop('checked', false);
$cf(this).attr('checkstate', 'false');
})
</script>
Pre-fill hidden field with global variable
<script>
var global_variable = window.YOUR_GLOBAL_VARIABLE;
var field = $cf('input[name="contact[extra][REPLACE_WITH_FIELD_DATANAME]')
if (global_variable) {
$cf(field).val(global_variable)
}
</script>
Hide hook when sticky bar is visible
<script>
if ($cf('.cf-bar[style*="bottom: 0"]').is(':visible')) {
$cf('.cf-hook').hide()
}
</script>
Click to call button
<script>
window.location.href = 'tel:5555555555';
</script>
Google maps address autocomplete for form fields
Swap API_KEY with your Google maps API key.
<script>
let autocomplete;
let addressField;
let addressCityField;
let addressStateField;
let addressZipCodeField;
let addressCountryField;
function initAutocomplete() {
addressField = document.querySelector(
'.cf-form input[name="contact[address]"]'
);
console.log("addressField", addressField);
addressCityField = document.querySelector(
'.cf-form input[name="contact[city]"]'
);
addressStateField = document.querySelector(
'.cf-form input[name="contact[state]"]'
);
addressZipCodeField = document.querySelector(
'.cf-form input[name="contact[zip_code]"]'
);
addressCountryField = document.querySelector(
'.cf-form select[name="contact[country]"]'
);
autocompleteAddress = new google.maps.places.Autocomplete(addressField);
autocompleteCity = new google.maps.places.Autocomplete(addressCityField, {
fields: ["address_components", "geometry"],
types: ["locality", "administrative_area_level_3"],
});
autocompleteState = new google.maps.places.Autocomplete(addressStateField, {
fields: ["address_components", "geometry"],
});
autocompleteZipCode = new google.maps.places.Autocomplete(
addressZipCodeField,
{
fields: ["address_components", "geometry"],
types: ["postal_code"],
}
);
google.maps.event.addListener(
autocompleteAddress,
"place_changed",
function () {
var place = autocompleteAddress.getPlace();
fillInAddress(place);
}
);
google.maps.event.addListener(
autocompleteCity,
"place_changed",
function () {
var place = autocompleteCity.getPlace();
fillInAddress(place);
}
);
google.maps.event.addListener(
autocompleteState,
"place_changed",
function () {
var place = autocompleteState.getPlace();
fillInAddress(place);
}
);
google.maps.event.addListener(
autocompleteZipCode,
"place_changed",
function () {
var place = autocompleteZipCode.getPlace();
fillInAddress(place);
}
);
}
function fillInAddress(place) {
let address = "";
let postcode = "";
let city = "";
let state = "";
let country = "";
if (place) {
for (const component of place.address_components) {
const componentType = component.types[0];
switch (componentType) {
case "street_number":
address = `${component.long_name} ${address}`;
break;
case "route":
address += component.short_name;
break;
case "postal_code":
postcode = `${component.long_name}${postcode}`;
break;
case "postal_code_suffix":
postcode = `${postcode}-${component.long_name}`;
break;
case "locality":
city = component.long_name;
break;
case "administrative_area_level_1":
state = component.short_name;
break;
case "country":
country = component.long_name;
break;
}
}
addressField.value = address;
addressCityField.value = city;
addressStateField.value = state;
addressZipCodeField.value = postcode;
addressCountryField.value = country;
}
}
window.initAutocomplete = initAutocomplete;
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initAutocomplete&libraries=places&v=weekly"
defer
></script>