ConvertFlow developed custom codes (Advanced)

All these codes will be added to the CTA's script manager, unless otherwise advised. To get details on how to find the script manager, please refer to the "Adding conversion pixels & scripts" section of this article.

Some of these codes also have parts that need to be edited to be used for a specific CTA, for example, if you see: 

  • #ctaID_GOES_HERE, CTA_ID_HERE
  • YOUR_GLOBAL_VARIABLE
  • REPLACE_WITH_FIELD_DATA_NAME
  • #cta_REPLACEWITHCTAID
  • http://yourwebsite.com/favicon.ico
  • ?Id=INFUSIONSOFT_ID_GOES_HERE
  • #navigation-id
  • REPLACE_WITH_FIELD_DATANAME

Keep in mind that we don’t provide support custom code use unless you’re on a Business Plan. We’re only providing this information for our more tech savvy clients that wish to explore beyond the confines of ConvertFlow features at their own risk. 

If a code doesn’t work or you have any questions we suggest looping in your developer.

Add a favicon to your landing page

<script>
var callback = function(){
  var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
	link.type = 'image/x-icon';
	link.rel = 'shortcut icon';
	link.href = 'http://yourwebsite.com/favicon.ico';
	document.getElementsByTagName('head')[0].appendChild(link);
};


if (document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) {
  callback();
} else {
  document.addEventListener("DOMContentLoaded", callback);
}
</script>

Hide the close button

<style>
#ctaID_GOES_HERE .cf-cta-close {
	visibility: hidden !important;
}
</style>

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-cta-close').trigger('click'); 
	}; 
});
</script>

Custom font

<style>
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');


body, h1, h2, h3, h4, h5, p, input, select, span, textarea {
	font-family: 'Raleway', sans-serif !important;
}
</style>

Remove a hook’s drop shadow

<style>
#ctaID_GOES_HERE .cf-container {
	box-shadow: none !important;
}


#cta29780 .cf-cta-close {
	visibility: hidden !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="' + 'CTA_ID_HERE' + '"]').on('click', function() {
	$cf('#navigation-id').css('top', '0')
})
</script>

Countdown timer

<script>
  function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}


function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');


  function updateClock() {
    var t = getTimeRemaining(endtime);


    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);


    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }


  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}


var deadline = new Date(Date.parse(new Date("December 2, 2017 00:00:00")));
initializeClock('clockdiv', deadline);
</script>


<style>
   /* Big countdown at page bottom */
  
  #clockdiv{
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    font-family: Proxima-Nova, Proxima Nova, Helvetica, Arial, Sans-serif !important;
	color: #D2E7FF;
	display: inline-block;
	font-weight: 700;
	text-align: center;
	font-size: 50px;
}


#clockdiv > div{
	padding: 10px;
	border-radius: 3px;
	background: #242e6c;
	display: inline-block;
}


#clockdiv div > span{
	padding: 5px 10px 1px;
	border-radius: 3px;
	background: #242e6c;
  color: #fff !important;
	display: inline-block;
}


.smalltext{
	padding-top: 5px;
	font-size: 13px;
  text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
  
  @media (max-width: 500px) {
  #clockdiv{
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    font-family: Proxima-Nova, Proxima Nova, Helvetica, Arial, Sans-serif !important;
	color: #D2E7FF;
	display: inline-block;
	font-weight: 700;
	text-align: center;
	font-size: 20px;
}
    .smalltext{
	padding-top: 0px;
	font-size: 11px;
  text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
  }
</style>
<div id="clockdiv" style="margin-left: auto; margin-right: auto;"> <div> <span class="days"></span> <div class="smalltext">Days</div> </div> <div> <span class="hours"></span> <div class="smalltext">Hours</div> </div> <div> <span class="minutes"></span> <div class="smalltext">Minutes</div> </div> <div> <span class="seconds"></span> <div class="smalltext">Seconds</div> </div> </div>

Same page reload (for single page apps)

<script>
var currentUrl = window.location.href;
// Redirect User with Access
window.location.href = currentUrl + '?access=true';
</script>

Auto close after 5 seconds

<script>
setTimeout(function() {
	$cf('#ctaID_GOES_HERE .cf-cta-close').click();
}, 5000);
</script>

Add a border radius shadow

<style>
#cta_REPLACEWITHCTAID {
	border-radius: 5px !important;
	box-shadow: 0 0 30px rgba(33,33,33,.2) !important;
}
</style>

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>