timeline_generator_2-0-0_beta

33	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: 1

Show Timeline code in url

Do not use cookie

1. Timer Settings️ 🖊

33 Days, 0 Hours, 0 Mins

When expired, redirect to:
/8-offer-7-faces

2. Select the Trigger 🖥

Start with: Kajabi Page with Form

For use with freebies, opt-in forms or any form on any (existing) landing page

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

<script>
// Utility functions
function calculateExpireDateFromTimestamp(timestamp, settings) {
    const currentDate = new Date(Number(timestamp));
    let endDay = settings.tltimeendday ? resterendeTijdTotEindeVanDag(currentDate) : 0;
    const expireTime = currentDate.getTime() + settings.tltimeday * 86400000 + settings.tltimehour * 3600000 + settings.tltimemin * 60000 + endDay;
    return new Date(expireTime).toISOString();
}

function resterendeTijdTotEindeVanDag(timestamp) {
    const endOfDay = new Date(timestamp);
    endOfDay.setHours(23, 59, 59, 999);
    return endOfDay.getTime() - timestamp.getTime();
}

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: false,
    setcookienumber: 1,
    tltimeendday: false,
    tltimeday: 33,
    tltimehour: 0,
    tltimemin: 0,
    tlcustom: 1,
    tlcustomemail: 8,
    tlemail: false,
    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 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`;
    tlrdt = tldt.split("").reverse().join("");

    document.getElementById(`form_submission_custom_${settings.tlcustom}`).value = tlrdt;
    const expireDate = calculateExpireDateFromTimestamp(tltm, settings);
    if (settings.tlemail) {
        document.getElementById(`form_submission_custom_${settings.tlcustomemail}`).value = expireDate;
    }
}

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

if (!timelineCookie && !tlrdt) {
    updateField();
} else if (tlrdt) {
    document.getElementById(`form_submission_custom_${settings.tlcustom}`).value = tlrdt;
    if (settings.tlemail) {
        const expireDate = calculateExpireDateFromTimestamp(new Date().getTime(), settings);
        document.getElementById(`form_submission_custom_${settings.tlcustomemail}`).value = expireDate;
    }
}

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>

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: #ff0ca1;
  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: rgba(1, 1, 1, 0.986);
}
.timercontainer {padding: 20px; background-color: ;}

.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: false,
  tltimeday: 33,
  tltimehour: 0,
  tltimemin: 0,
  tlenable_end_action: "redirect",
  tlaction: "/8-offer-7-faces",
  useFlipAnimation: false
};

// 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_1}} 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://awesomeartschool.mykajabi.com/7-faces-new-subscriber?t={{custom_1}}

https://awesomeartschool.mykajabi.com/7-faces-new-subscriber?t={{custom_1}}

Timeline Checklists for a Kajabi Page with Opt-in Form

Kajabi Page & Form Checklist - Preparation ✔️

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

- Opt-in Landing Page: With the Opt-in Form

- Bonus Landing Page: For countdown timer with special offer

- Redirect Landing Page: Is shown when timer is expired

- On Opt-in Page: Set thank you url in form to: Go to URL, with the Bonus page url

- On Opt-in Page: Only one form is allowed

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

Kajabi Page & Form 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

Kajabi Page & Form Checklist - Trigger 🖥

- Copy the code from step 2

- Go to your landing page and customize the Opt-in Landing Page

- Add new section with custom code at end of page

- Paste the full code in the custom code block

- Make Block: Flush

- Make Section padding for top and bottom zero on Desktop and Mobile

- Double check: Your form is set correctly with the thank you url set as: Go to URL

- Double check: There is only 1 opt-in form on the page

- Save the page

Kajabi Page & Form 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