bfb2a2a-dbc8-24df-7567-81ac84125fb_timeline_generator_2-0-0_beta_10_1

0	0	0	0
DAYS	HOURS	MINS	SECS

0. Preparation ✔️

First create a (new) Kajabi form with an unique Timeline form field. Have your opt-in page, sales page and redirect page ready.

0. Form Field Finder ✔️

These field IDs are found:

No Form is selected in the Timeline Helper or no Form Fields are found. Or you might need to refresh this page to run the search script.

1. Funnel Settings️ 🖊

Unique Funnel Number: 1

Timeline Form Field ID: 7

Show Timeline code in url

Do not use cookie

1. Timer Settings️ 🖊

0 Days, 0 Hours, 0 Mins

Plus the remaining time till midnight

When expired, redirect to:
/

2. Select the Trigger 🖥

Start with: Zapier Trigger

Triggers when a Zapier action was triggered (tag added, purchase made or external trigger.

const currentDate = new Date();
const tltm = currentDate.getTime();
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`;
const reversedTldt = tldt.split("").reverse().join("");

output = [{timeline: reversedTldt}];

3. Set up a Bonus Landing Page ⏰

This will add the countdown timer and the redirect scripts to any (existing) landing page in Kajabi. This is the page with your time sensitive bonus offer.

<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: false,
  setcookienumber: "1",
  setcookiedays: 90,
  tltimeendday: true,
  tltimeday: 0,
  tltimehour: 0,
  tltimemin: 0,
  tlenable_end_action: "redirect",
  tlaction: "/",
  useFlipAnimation: true
};

// Hoofdlogica
const encodedData = getQueryParam('t');
if (encodedData) {
  if (settings.setcookie) {
    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>

4. Email Sequence URL ✉️️

You can create an email sequence URL by appending ?t={{custom_7}} to your landing page URL, which already includes the Timeline Funnel code from step 3. Paste this URL into your funnel email sequences to ensure that the Countdown Timer activates on your landing page whenever the link is accessed.
The complete Email Sequence URL will be: https://www.jiffycoursesonline.com/checkout?t={{custom_7}}

https://www.jiffycoursesonline.com/checkout?t={{custom_7}}

Timeline Checklists for a Zapier Trigger

Zapier Checklist - Preparation ✔️

- Kajabi Opt-in Form: With an unique timeline field

- Bonus Landing Page: For countdown timer with special offer

- Redirect Landing Page: Is shown when timer is expired

- Form Field Finder: Is the Opt-in form selected?

Zapier Checklist - Settings 🖊

- Funnel Settings: Funnel has an unique number

- Funnel Settings: Timeline Form Field ID is same as Opt-in field

- Optional - Funnel Settings: Hide url code (preferred)

- Optional - Funnel Settings: Set cookie (preferred)

- Timer Settings - Days, hours, minutes is set

- Timer Settings - Redirect Landing Page is selected

Zapier Checklist - Trigger 🖥

- Copy the code from step 2

- Open Zapier & Create new Zap

- Step 1 Trigger: Use any trigger (for example tag is added in Kajabi

- Step 2 Extra step: Code by Zapier > select Javascript

- Paste the full code in the javascript block

- Step 3 Action: Create form submission in Kajabi

- Select name, email from stap 1. Trigger

- Select Timeline info from step 2. Code by Zapier

- Test and save the Zap

Zapier Checklist - Landing Page ⏰

- Adjust your timer layout

- Double check the Timer Settings

- Copy the code from step 3

- Go to landing pages and customize the Bonus Landing Page

- Add a new Custom Code block anywhere on the page

- Paste the full code in the custom code block

- Double check: You have only 1 timer on the page

- Save the page