timeline-embedder-2-0-0-beta6

1	0	0	0
DAYS	HOURS	MINS	SECS

Step 1. Create Funnel

First create a (new) Kajabi form or checkout with an unique Timeline form field.

🖊 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.

🖊 Funnel Settings️

Unique Funnel Number: 1

Timeline Form Field ID: 2

Show Timeline code in url

Set cookie for 90 days

🖊 Timer Settings️

1 Days, 0 Hours, 0 Mins

Plus the remaining time till midnight

When expired, redirect to:
/resource_redirect/landing_pages/2150212227

Step 2. 🖥 Select the Trigger

Start with: Kajabi Popup Checkout

Triggers when a purchase through the Kajabi popup-checkout on a landing page is made.

<style>
/* Timeline code for Kajabi popup checkout */
  .custom-fields__label-tag {display: none;}
  #custom_2, label[for="custom_2"] {display: none;}
  
</style> 

<script>
function modalGevonden(target) {
  setTimeout(() => {timelineRoutine();}, 500); 
}

function timelineRoutine() {
    // 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
let tlrdt = "";
let cookietrue = false;
const settings = {
    setcookie: true,
    setcookienumber: 1,
    tltimeendday: true,
    tltimeday: 1,
    tltimehour: 0,
    tltimemin: 0,
    tlcustom: 2,
    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(`custom_${settings.tlcustom}`).value = tlrdt;
    const expireDate = calculateExpireDateFromTimestamp(tltm, settings);

    if (settings.tlemail) {
        document.getElementById(`custom_${settings.tlcustomemail}`).value = expireDate;
    }
}

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

document.querySelector('button[data-testid="popup-submit-button"]').addEventListener("click", function() {
        if (!cookietrue && settings.setcookie) {
            updateField()
            setCookie(`timeline${settings.setcookienumber}`, tlrdt, settings.setcookiedays);
        } else if (!settings.setcookie) {
            updateField()
            deleteCookie(`timeline${settings.setcookienumber}`);
        }
});
}

// Observer callback functie die wordt aangeroepen bij elke mutatie
const observerCallback = (mutationsList, observer) => {
    for (const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            mutation.addedNodes.forEach(addedNode => {
                // Controleer of het toegevoegde node een element is en of het de class 'checkout-modal' bevat
                if (addedNode.nodeType === Node.ELEMENT_NODE && addedNode.classList.contains('checkout-modal')) {
                    modalGevonden(addedNode);
                    observer.disconnect(); // Stop met observeren na het vinden van de modal
                }
            });
        }
    }
};

// Observer opties, observeert toegevoegde nodes
const observerOptions = {
    childList: true, // Observeren van toegevoegde/verwijderde onderliggende elementen
    subtree: true // Observeer ook alle onderliggende elementen
};

// Maak een MutationObserver instantie en start het observeren
const observer = new MutationObserver(observerCallback);
observer.observe(document.body, observerOptions);
</script>

Step 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: 70px;
  font-weight: bold;
}
#timer-table .timer-cell .background-cell {
  color: #0f5d4e;
  background-color: ;
  border-radius: 5%;
  width: 70px;
  height: 70px; 
  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: 70px;
  height: 70px;
  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: 1,
  tltimehour: 0,
  tltimemin: 0,
  tlenable_end_action: "redirect",
  tlaction: "/resource_redirect/landing_pages/2150212227",
  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(); // Testmode
  let tlctmInt;
  if (isTestMode) {
    const nu = new Date().getTime();
    tlctmInt = (settings.tltimeday * 86400000) + (settings.tltimehour * 3600000) + (settings.tltimemin * 60000);
    var endday = 0;
    if (settings.tltimeendday) {
      endday = resterendeTijdTotEindeVanDag(nu);
    }
    var timeremaining = nu + tlctmInt + endday;
    timelineCountdown(timeremaining, settings.useFlipAnimation);
    voegResterendeTijdToe(timeremaining);
    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 extra = settings.tltimeday * 86400000 + settings.tltimehour * 3600000 + settings.tltimemin * 60000;
      var endday = 0;
      if (settings.tltimeendday) {
        endday = resterendeTijdTotEindeVanDag(tlctmInt);
      }

      var timelineDatum = tlctmInt + extra + endday;
      var huidigeTijd = new Date().getTime();
      
      
      if (timelineDatum > huidigeTijd) { // timer working
        window.onload = function() {
          timelineCountdown(timelineDatum, settings.useFlipAnimation);
          voegResterendeTijdToe(timelineDatum);
        };
      } else { // timer ended
        handleEndAction();
      }
    } else { // no legit code found
      handleEndAction();
    }
  } else { // no timer at all
    handleEndAction();
  }
}

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


function voegResterendeTijdToe(timelineDatum) {
  var cardbonusElements = document.getElementsByClassName("cardbonus");
  for (var i = 0; i < cardbonusElements.length; i++) {
    var linkElement = cardbonusElements[i].querySelector("a.card__button");
    if (linkElement) {
      var expiratieDatum = new Date(timelineDatum).getTime().toString();
      var url = linkElement.getAttribute("href");
      var nieuweUrl = url + "?t=" + encodeURIComponent(expiratieDatum);
      linkElement.setAttribute("href", nieuweUrl);
    }
  }
}

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 eindeVanDag = new Date(tijdstempel);
  eindeVanDag.setHours(23, 59, 59, 999);
  var now = new Date().getTime();
  return eindeVanDag.getTime() - now;
}

</script>

Step 4. ✉️ Email Sequence URL️

You can create an email sequence URL by appending ?t={{custom_2}} 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_2}}

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

Timeline Checklists for a Kajabi Page with Popup Checkout

Kajabi Popup Checkout Checklist - Preparation

- Landing Page with Popup Checkout: This can be a sales page.

- Bonus Landing Page: For countdown timer with special offer

- Redirect Landing Page: Is shown when timer is expired

- Kajabi Offer: Edit Checkout and add an unique Timeline field

- Kajabi Offer: Thank you page after purchase is Bonus Landing Page

- Optional for Form Field Finder: Kajabi Opt-in Form with an unique timeline field

Kajabi Popup Checkout Checklist - 🖊 Settings

- Field Finder: Select the optional Form to find the Field ID

- 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)

- Required - Funnel Settings: Set cookie

- Timer Settings - Days, hours, minutes is set

- Timer Settings - Redirect Landing Page is selected

Kajabi Popup Checkout Checklist - 🖥 Trigger

- Copy the code from step 2

- Go to the Landing Page with Popup Checkout and customize it

- Create a CTA on the page and select the Popup checkout with the offer

- 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: There is only 1 CTA with the popup checkout

- Double check: There is no Timeline code installed for a Form or Kajabi Checkout.

- Save the page

Kajabi Popup CheckoutChecklist - ⏰ 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