timeline-funnel-2

14	0	10	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: Timeline funnel

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. A cookie are needed to add extra security to your funnel. You can deselect the cookie option if you don't want to use a cookie or when you want to test your funnel. For multiple Timeline funnels with different start dates, select a new number to create unique cookie for very funnels.

YOUR FUNNEL SETTINGS:

Timeline Form Field ID: 124

Cookie will be set for 13 days

Unique Funnel Number: 2

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 A ZAPIER TRIGGER

Start the funnel when a Zapier action is triggered. Copy the code to add it to your Zap. Follow the video tutorial.

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}];

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:

14 Days, 0 Hours, 10 Mins

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

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

Paste the mandatory countdown timer code into your Kajabi landing page (only once per page). This code controls the time-sensitive offer. To display the countdown timer wherever you want, simply add it inside a custom code block. You can use the optional second timer to show the same countdown in multiple places on the same page. Note: the second timer only works when the mandatory code is also present on the page.

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:

Default setting: Timeline code is shown in the url

Default setting: Countdown timer is visible on landing page.

<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: 30px;
  font-weight: bold;
}
.timer-table .timer-cell .background-cell {
  color: #123154;
  background-color: #cddbdc;
  border-radius: 0%;
  
  
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}
.timer-table .label-cell {
  font-size: 12px;
  color: #123154;
}
.timercontainer {
  padding: 20px;
  background-color: #ffffff;
}

.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 class="timercontainer" data-timer>
  <table class="timer-table">
    <tr>
      
        <td class="timer-cell"><div class="background-cell" data-unit="dagen"></div></td>
      
      <td class="timer-cell"><div class="background-cell" data-unit="uren"></div></td>
      <td class="timer-cell"><div class="background-cell" data-unit="minuten"></div></td>
      
        <td class="timer-cell"><div class="background-cell" data-unit="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>
function isInTestMode() {
  const url = window.location.href;
  const isKajabiAdmin = url.includes('app.kajabi.com/admin/themes/');
  const previewParam = getQueryParam('preview_theme_id');
  return isKajabiAdmin || previewParam;
}

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 deleteCookie(name) {
  document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
}

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

// URL opschonen als nodig
function hideQuery() {
    if (!isInTestMode()) {
      var url = window.location.href;
      var newUrl = url.split('?')[0];
      history.replaceState({}, document.title, newUrl);
    }
}

function updateFlipCardUnit(timerEl, unit, value) {
  let container = timerEl.querySelector('[data-unit="' + unit + '"]');
  if (!container) return;

  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(() => {
        front.innerText = value;
        flipCardInner.classList.remove('flipped');
        back.innerText = front.innerText;
      }, 200);
    }
  }
}

const settings = {
  setcookie: true,
  setcookienumber: "2",
  setcookiedays: 13,
  tltimeendday: false,
  tltimeday: 14,
  tltimehour: 0,
  tltimemin: 10,
  tlenable_end_action: "redirect",
  tlaction: "/resource_redirect/landing_pages/2151460657",
  useFlipAnimation: true
};

function isValidTParameter(t) {
  const regex = new RegExp('^\\{\\{.*\\}\\}$');
  return !regex.test(t);
}

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

function timelineCountdown(enddate, useFlipAnimation) {
  var timer = setInterval(function () {
    const now = new Date().getTime();
    const diff = parseInt(enddate, 10) - now;
    if (diff >= 0) {
      const dagen = Math.floor(diff / (1000 * 60 * 60 * 24));
      const uren = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minuten = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
      const seconden = Math.floor((diff % (1000 * 60)) / 1000);

      document.querySelectorAll('[data-timer]').forEach(function (el) {
        if (useFlipAnimation) {
          updateFlipCardUnit(el, "dagen", dagen);
          updateFlipCardUnit(el, "uren", uren);
          updateFlipCardUnit(el, "minuten", minuten);
          updateFlipCardUnit(el, "seconden", seconden);
        } else {
          el.querySelector('[data-unit="dagen"]').innerText = dagen;
          el.querySelector('[data-unit="uren"]').innerText = uren;
          el.querySelector('[data-unit="minuten"]').innerText = minuten;
          el.querySelector('[data-unit="seconden"]').innerText = seconden;
        }
      });
    } else {
      clearInterval(timer);
      if (!isInTestMode()) handleEndAction();
    }
  }, 1000);
}

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

function process(encodedData) {
  const isTestMode = isInTestMode();
  if (isTestMode) {
    const now = new Date().getTime();
    const offset = (settings.tltimeday * 86400000) + (settings.tltimehour * 3600000) + (settings.tltimemin * 60000);
    const endOfDay = settings.tltimeendday ? resterendeTijdTotEindeVanDag(now) : 0;
    const endTime = now + offset + endOfDay;
    timelineCountdown(endTime, settings.useFlipAnimation);
    return;
  }

  if (!encodedData) return handleEndAction();

  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, n) => sum + parseInt(n, 10), 0);
  const tlgrt = tlcdt.match(/Hrf(.+?)fU/)?.[1];
  const tlgrtl = tlctm.length;

  if (tlcdt.includes("R1969") && tlcdt.includes("dC3729") && tlcalsom == tlcsom && tlgrt == tlgrtl) {
    const now = new Date().getTime();
    const offset = (settings.tltimeday * 86400000) + (settings.tltimehour * 3600000) + (settings.tltimemin * 60000);
    const endOfDay = settings.tltimeendday ? resterendeTijdTotEindeVanDag(tlctmInt) : 0;
    const endTime = tlctmInt + offset + endOfDay;

    if (endTime > now) {
      if (document.readyState === 'complete') {
        timelineCountdown(endTime, settings.useFlipAnimation);
      } else {
        window.addEventListener('load', () => timelineCountdown(endTime, settings.useFlipAnimation));
      }
    } else {
      handleEndAction();
    }
  } else {
    handleEndAction();
  }
}

// Zet dit stuk helemaal onderaan
function startTimer() {
  try {
    const encodedData = getQueryParam('t');

    if (settings.setcookie) {
      if (encodedData && isValidTParameter(encodedData)) {
        setCookie(`timeline${settings.setcookienumber}`, encodedData, settings.setcookiedays);
      }
    } else {
      // Remove cookie if disabled in settings
      deleteCookie(`timeline${settings.setcookienumber}`);
    }

    const cookieData = getCookie(`timeline${settings.setcookienumber}`);
    process(encodedData || cookieData);
    
  } catch (err) {
    console.error("Fout in timeline timer:", err);
  }
}

// Wacht tot pagina helemaal geladen is (ook afbeeldingen, scripts, etc.)
if (document.readyState === 'complete') {
  startTimer();
} else {
  window.addEventListener('load', startTimer);
}
</script>

<!-- Second timer (display only) -->
<div class="timercontainer" data-timer>
  <table class="timer-table">
    <tr>
      
        <td class="timer-cell"><div class="background-cell" data-unit="dagen"></div></td>
      
      <td class="timer-cell"><div class="background-cell" data-unit="uren"></div></td>
      <td class="timer-cell"><div class="background-cell" data-unit="minuten"></div></td>
      
        <td class="timer-cell"><div class="background-cell" data-unit="seconden"></div></td>
      
    </tr>
    <tr>
      <td class="label-cell">DAYS</td>
      <td class="label-cell">HOURS</td>
      <td class="label-cell">MINS</td>
      <td class="label-cell">SECS</td>
    </tr>
  </table>
</div>

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://marketsavvy.mykajabi.com/healthpost-timeline?t={{custom_124}}

https://marketsavvy.mykajabi.com/healthpost-timeline?t={{custom_124}}