timeline-funnel

2	0	0	0
DAYS	HOURS	MINS	SECS

Initiating the Timeline Funnel

Step 1: Build a unique Kajabi Form

Create a form in Kajabi with a unique Timeline form field. Do NOT make this new form field mandatory. Add an automation to start an email sequence. Select this form in the sidebar. Save the page to run the field finder script.

YOUR FORM FIELD FINDER SETTINGS:

Kajabi Form selected:

No custom form fields are found. You might need to refresh this page to run the search script.

Step 2: Timeline Funnel Settings

Copy the Timeline form field ID from step 1 to the sidebar. Cookies are needed to add extra security to your funnel. You can deselect the cookie option if you don't want to use cookies or when you want to test your funnel. For multiple Timeline funnels with different start dates, select a new number to create unique cookies for those funnels.

YOUR FUNNEL SETTINGS:

Timeline Form Field ID: 7

Cookie will be set for 90 days

Unique Funnel Number: 1

Step 3: Funnel Starting Trigger

Kick off your funnel with an opt-in form on a landing page or via a Zapier trigger.

START WITH AN OPT-IN FORM AND LANDING PAGE

3.1: Copy the code from this trigger. Customize your opt-in page and paste the code at the end of the page in a custom-code block.

3.2: In the opt-in form on this page add the full url to the thank you page.

<style>
/* Timeline code for Kajabi form and landing page */
#form_submission_custom_7 {display: none;}
</style>

<script>
function setCookie(name, value, days) {
    const date = new Date();
    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
    document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`;
}

function deleteCookie(name) {
    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`;
}

// Main code
var inputElement = document.querySelector('input[name="thank_you_url"]');
let tlrdt = "";
let cookietrue = false;
const settings = {
    setcookie: true,
    setcookienumber: 1,
    tlcustom: 7,
    setcookiedays: 90
};

const cookies = document.cookie.split(';').map(cookie => cookie.trim());
const timelineCookie = cookies.find(cookie => cookie.startsWith(`timeline${settings.setcookienumber}=`));

if (!settings.setcookie) {
    deleteCookie(`timeline${settings.setcookienumber}`);
}

if (timelineCookie) {
    tlrdt = timelineCookie.substring(`timeline${settings.setcookienumber}=`.length);
    cookietrue = true;
}

function updateField() {
    const tltm = Date.now();
    const tlsom = Array.from(tltm.toString()).reduce((acc, curr) => acc + parseInt(curr, 10), 0);
    const tltmGrootte = tltm.toString().length;
    const tldt = `tL${tlsom}dC3729${tltm}GtR1969Hrf${tltmGrootte}fU`;
    tlrdt = tldt.split("").reverse().join("");

    document.getElementById(`form_submission_custom_${settings.tlcustom}`).value = tlrdt;
}

function updateURL(tlrdt) {
    if (inputElement) {
        const originalValue = inputElement.value;
        inputElement.value = originalValue + '?t=' + tlrdt;
    }
}

if (!timelineCookie && !tlrdt) {
    updateField();
} else if (tlrdt) {
    document.getElementById(`form_submission_custom_${settings.tlcustom}`).value = tlrdt;
}

document.getElementById("form-button").addEventListener("click", function() {
    if (!cookietrue && settings.setcookie) {
        updateField()
        setCookie(`timeline${settings.setcookienumber}`, tlrdt, settings.setcookiedays);
        setTimeout(() => {
            deleteCookie(`timeline${settings.setcookienumber}`);
        }, 5000); // 5000 milliseconden = 5 seconden
    } else if (!settings.setcookie) {
        updateField()
        deleteCookie(`timeline${settings.setcookienumber}`);
    }
  updateURL(tlrdt)
});
</script>

Countdown Timer Setup

Step 4: Configure Expiration Settings

Select the duration of the countdown timer, calculated from the moment the trigger became active. Select the redirect page after the timer expires. The redirect page is your page without the special offer.

YOUR TIMER SETTINGS:

2 Days, 0 Hours, 0 Mins

Plus the remaining time till midnight

When expired, redirect to: add-url-from-page-without-your-special-offer

Step 5: Countdown Timer Layout

Style the countdown timer layout. The changes can be seen in the timer on top of this page.
Optional: You can change this width of the countdown timer in the settings to match the block size on your landing page.

Step 6: Special Offer Landing Page

Copy and paste the countdown timer code on your Kajabi landing page (one timer per page). This page holds your time sensitive offer. Paste this code anywhere you want to have the countdown timer into a custom code block.

Optional: Select if you want to hide the timeline funnel code from the url. This makes the url more clean and only works when the cookie from step 2 is active.

Optional: You can also add this code to the thank you page after the first opt-in to show the timer immediately.

YOUR LANDING PAGE COUNTDOWN TIMER SETTING:

Timeline code is shown in the url

Countdown Timer is visible

<style>
/* Timeline countdown timer code for Kajabi landing pages */
#timer-table {
  width: 100%;
  border-collapse: collapse;
}
#timer-table td {
  text-align: center;
  padding: 0px;
}
#timer-table .timer-cell {
  font-size: 50px;
  font-weight: bold;
}
#timer-table .timer-cell .background-cell {
  color: #0f5d4e;
  background-color: ;
  border-radius: 50%;
  width: 80px;
  height: 80px; 
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}
#timer-table .label-cell {
  font-size: 12px;
  color: #ab0000;
}
.timercontainer {padding: 20px; background-color: rgba(255, 255, 255, 0.9);}

.flip-card {
  perspective: 1000px;
  width: 80px;
  height: 80px;
  display: inline-block;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: flat;
  transform-origin: center center;
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 35%;
}
.flip-card-inner.flipped {
  transform: rotateX(180deg);
}

</style>

<div id="timer" class="timercontainer">
<table id="timer-table">
  <tr>
    <td class="timer-cell"><div class="background-cell" id="dagen"></div></td>
    <td class="timer-cell"><div class="background-cell" id="uren"></div></td>
    <td class="timer-cell"><div class="background-cell" id="minuten"></div></td>
    <td class="timer-cell"><div class="background-cell" id="seconden"></div></td>
  </tr>
  <tr>
    <td class="label-cell" kjb-settings-id="sections_timeline_countdown_settings_days">DAYS</td>
    <td class="label-cell" kjb-settings-id="sections_timeline_countdown_settings_hours">HOURS</td>
    <td class="label-cell" kjb-settings-id="sections_timeline_countdown_settings_minutes">MINS</td>
    <td class="label-cell" kjb-settings-id="sections_timeline_countdown_settings_seconds">SECS</td>
  </tr>
</table>
</div>

<script>
// Timeline script for landing page
function isInTestMode() {
  const url = window.location.href;
  const isKajabiAdmin = url.includes('app.kajabi.com/admin/themes/');
  const previewParam = getQueryParam('preview_theme_id');
  const hasPreviewParam = previewParam !== null && previewParam !== undefined && previewParam !== '';
  return isKajabiAdmin || hasPreviewParam;
}

function getQueryParam(name) {
  const params = new URLSearchParams(window.location.search);
  return params.get(name);
}

function setCookie(name, value, days) {
  let expires = "";
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

function getCookie(name) {
  const nameEQ = name + "=";
  const ca = document.cookie.split(';');
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}

function updateFlipCard(containerId, value) {
  let container = document.getElementById(containerId);
  if (!container.querySelector('.flip-card')) {
    container.innerHTML = `
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front"><div class="background-cell">${value}</div></div>
          <div class="flip-card-back"><div class="background-cell">${value}</div></div>
        </div>
      </div>
    `;
  } else {
    const flipCardInner = container.querySelector('.flip-card-inner');
    const front = flipCardInner.querySelector('.flip-card-front .background-cell');
    const back = flipCardInner.querySelector('.flip-card-back .background-cell');

    if (front.innerText != value) {
        flipCardInner.classList.add('flipped');

      setTimeout(() => {
        // Update the front with the new value after the flip animation
        front.innerText = value;
        flipCardInner.classList.remove('flipped');

        // Reset the back's text to be ready for the next flip
        back.innerText = front.innerText; 
      }, 200); // Matches the CSS transition time
    }
  }
}

const settings = {
  setcookie: true,
  setcookienumber: "1",
  setcookiedays: 90,
  tltimeendday: true,
  tltimeday: 2,
  tltimehour: 0,
  tltimemin: 0,
  tlenable_end_action: "redirect",
  tlaction: "add-url-from-page-without-your-special-offer",
  useFlipAnimation: true
};

function isValidTParameter(t) {
  var open = '\\{\\{';
  var content = '.*';
  var close = '\\}\\}';
  var regex = new RegExp('^' + open + content + close + '$');
  return !regex.test(t);
}

// Hoofdlogica
const encodedData = getQueryParam('t');
if (encodedData) {
  if (settings.setcookie && isValidTParameter(encodedData)) {
    setCookie(`timeline${settings.setcookienumber}`, encodedData, settings.setcookiedays);
  }
  process(encodedData);
} else {
  const cookieData = getCookie(`timeline${settings.setcookienumber}`);
  if (cookieData) {
    process(cookieData);
  } else {
    process(null);
  }
}

function process(encodedData) {
  const isTestMode = isInTestMode(); // Test mode
  let tlctmInt;
  if (isTestMode) {
    const nu = new Date().getTime();
    dayhourmin = (settings.tltimeday * 86400000) + (settings.tltimehour * 3600000) + (settings.tltimemin * 60000);
    var endday = 0;
    if (settings.tltimeendday) {
      endday = resterendeTijdTotEindeVanDag(nu);
    }
    var timeremaining = nu + dayhourmin + endday;
    timelineCountdown(timeremaining, settings.useFlipAnimation);
    return;
    
  } else if (encodedData) { // Timer found
    const tlcdt = encodedData.toString().split("").reverse().join("");
    const tlcsomEnd = tlcdt.indexOf("dC");
    const tlcsom = parseInt(tlcdt.substring(2, tlcsomEnd), 10);
    const tlctmEnd = tlcdt.indexOf("Gt");
    const tlctm = tlcdt.substring(tlcsomEnd + 6, tlctmEnd);
    const tlctmInt = parseInt(tlctm);
    const tlcalsom = [...tlctm].reduce((sum, num) => sum + parseInt(num, 10), 0);
    const tlgrt = tlcdt.match(/Hrf(.+?)fU/)?.[1];
    const tlgrtl = tlctm.length;

    if (tlcdt.indexOf("R1969") !== -1 && tlcdt.indexOf("dC3729") !== -1 && tlcalsom == tlcsom && tlgrt == tlgrtl) {
      var currentTime = new Date().getTime();
      var timeElapsed = currentTime - tlctmInt; // Time since the timer started
      var dayhourmin = (settings.tltimeday * 86400000 + settings.tltimehour * 3600000 + settings.tltimemin * 60000);
      var endday = 0;

      if (settings.tltimeendday) {
        endday = resterendeTijdTotEindeVanDag(tlctmInt);
      }
      
      var endtime = tlctmInt + dayhourmin + endday
      var timeremaining = endtime - currentTime;

      if (endtime > currentTime) { // Timer still active
        window.onload = function() {
          timelineCountdown(endtime, settings.useFlipAnimation);
        };
      } else { // Timer ended
        handleEndAction();
      }
    } else { // Invalid or no timer code
      handleEndAction();
    }
  } else { // No timer at all
    handleEndAction();
  }
}


function handleEndAction() {
  if (settings.tlenable_end_action === "redirect") {
    window.location.replace(settings.tlaction);
  }
}


function timelineCountdown(enddate, useFlipAnimation) {
  var timer = setInterval(function() {
    var huidigeTijd = new Date().getTime();
    var verschil = parseInt(enddate, 10) - parseInt(huidigeTijd, 10);
    if (verschil >= 0) {
      var dagen = Math.floor(verschil / (1000 * 60 * 60 * 24));
      var uren = Math.floor((verschil % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minuten = Math.floor((verschil % (1000 * 60 * 60)) / (1000 * 60));
      var seconden = Math.floor((verschil % (1000 * 60)) / 1000);
      
      // Determine if flip animation should be used
      if (useFlipAnimation) {
        // Update using flip animation
        updateFlipCard("dagen", dagen);
        updateFlipCard("uren", uren);
        updateFlipCard("minuten", minuten);
        updateFlipCard("seconden", seconden);
      } else {
        // Directly update the numbers without flip animation
          document.getElementById("dagen").innerHTML = dagen;
          document.getElementById("uren").innerHTML = uren;
          document.getElementById("minuten").innerHTML = minuten;
          document.getElementById("seconden").innerHTML = seconden;
      }  
    } else {
      clearInterval(timer);
      const isTestMode = isInTestMode(); // Testmode
      if (!isTestMode) {
          handleEndAction();
      }
    }
  }, 1000);
}

function resterendeTijdTotEindeVanDag(tijdstempel) {
  var startDay = new Date(tijdstempel); 
  var eindeVanDag = new Date(tijdstempel);
  eindeVanDag.setHours(23, 59, 59, 999);
  return eindeVanDag.getTime() - startDay.getTime();
}


</script>

Special Offer Link Creation

Step 7: Create a Link to Use in Your Emails️

Add the full url from the landing page in step 6 to the settings. It will create a link for all emails send by Kajabi. This link will be auto-completed by Kajabi and will start the countdown timer.

Optional: If you use a 3rd party email tool like ActiveCampaign, send the timeline funnel field to that tool and update the email link with its field codes.
The link must contain the url plus ?t=[some-field-macro] at the end of the url.

YOUR EMAIL SETTING:

Your Email link is: https://www.jiffycoursesonline.com/add-the-full-url-here?t={{custom_7}}

https://www.jiffycoursesonline.com/add-the-full-url-here?t={{custom_7}}