KixPanganiban/fiddle.html

## fiddle.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ada Engage Demo</title>
    <style>
      :root {
        --width: 100px;
        --radius: 30px;
        --primary-dark: #171a1e;
        --primary-highlight: #e7bb56;
        --secondary-light: #f1f1f1;
        background: var(--primary-dark);
        font-family: "Helvetica Neue", Helvetica, Arial;
        font-size: 20px;
        color: var(--secondary-light);
      }
      .description {
        padding: 20px;
        text-align: center;
      }
      .description h1 {
        font-weight: bold;
        color: var(--primary-highlight);
      }
      .card-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }
      .card {
        height: 350px;
        border: 1px solid var(--secondary-light);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20px;
        border-radius: 20px;
      }
      .cta {
        border: 1px solid var(--primary-highlight);
        color: var(--primary-dark);
        background: var(--primary-highlight);
        font-weight: bold;
      }
      @media (max-width: 1000px) {
        .card-container {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 500px) {
        .card-container {
          grid-template-columns: 1fr;
        }
      }
    </style>
  </head>
  <body>
    <div class="description">
      <h1>Ada Proactive Campaign Demo</h1>
      <p>Scroll until you find the yellow card. Then wait a few seconds.</p>
      <p>Refresh the page to try again.</p>
      <p>(Note: this example is not compatible with IE11.)</p>
    </div>
    <div class="card-container">
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card cta">You found it!</div>
      <div class="card"></div>
    </div>
    <script>
      /* In this demo, we trigger an Ada Campaign once per page refresh if:
       * - The call to action (CTA) card is ~75% visible in the viewport, AND
       * - if the CTA card has not left the viewport after 5 seconds.
       * ^ Adjust these numbers to fit your desired user experience.
       *
       * Note: This example leverages the Intersection Observer API, which is
       * not compatible with Internet Explorer.
       * https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
       */
      const delayTime = 5000;

      // Only show the campaign a single time per page refresh
      let campaignHasBeenShown = false;
      let timeoutId;

      function triggerCampaign(element) {
        window.adaEmbed.triggerCampaign("demo_campaign");
        campaignHasBeenShown = true;
        observer.unobserve(element);
      }

      function scheduleTrigger(element, delayTime) {
        if (timeoutId) {
          cancelScheduledTrigger();
        }
        timeoutId = setTimeout(function () {
          triggerCampaign(element);
          cancelScheduledTrigger();
        }, delayTime);
      }

      function cancelScheduledTrigger() {
        if (timeoutId) {
          clearTimeout(timeoutId);
        }
      }

      function checkIntersection(entries) {
        const [ entry ] = entries;
        const element = entry.target;

        if (entry.intersectionRatio >= 0.75) {
          console.log("Element is in view. A campaign will be scheduled.");
          scheduleTrigger(element, delayTime);
        } else {
          console.log("Element is not in view. Skip or cancel the trigger schedule.");
          cancelScheduledTrigger();
        }
      }

      const observer = new IntersectionObserver(checkIntersection, { threshold: 0.75 });
      const ctaCard = document.querySelector(".cta");
      observer.observe(ctaCard);

    </script>
    <script
      id="__ada"
      data-handle="ada-example"
      src="https://static.ada.support/embed2.js"
    ></script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Ada Engage Demo</title>
	<style>
	:root {
	--width: 100px;
	--radius: 30px;
	--primary-dark: #171a1e;
	--primary-highlight: #e7bb56;
	--secondary-light: #f1f1f1;
	background: var(--primary-dark);
	font-family: "Helvetica Neue", Helvetica, Arial;
	font-size: 20px;
	color: var(--secondary-light);
	}
	.description {
	padding: 20px;
	text-align: center;
	}
	.description h1 {
	font-weight: bold;
	color: var(--primary-highlight);
	}
	.card-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	}
	.card {
	height: 350px;
	border: 1px solid var(--secondary-light);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 20px;
	border-radius: 20px;
	}
	.cta {
	border: 1px solid var(--primary-highlight);
	color: var(--primary-dark);
	background: var(--primary-highlight);
	font-weight: bold;
	}
	@media (max-width: 1000px) {
	.card-container {
	grid-template-columns: repeat(2, 1fr);
	}
	}
	@media (max-width: 500px) {
	.card-container {
	grid-template-columns: 1fr;
	}
	}
	</style>
	</head>
	<body>
	<div class="description">
	<h1>Ada Proactive Campaign Demo</h1>
	<p>Scroll until you find the yellow card. Then wait a few seconds.</p>
	<p>Refresh the page to try again.</p>
	<p>(Note: this example is not compatible with IE11.)</p>
	</div>
	<div class="card-container">
	<div class="card"></div>
	<div class="card"></div>
	<div class="card"></div>
	<div class="card"></div>
	<div class="card"></div>
	<div class="card"></div>
	<div class="card"></div>
	<div class="card"></div>
	<div class="card"></div>
	<div class="card"></div>
	<div class="card cta">You found it!</div>
	<div class="card"></div>
	</div>
	<script>
	/* In this demo, we trigger an Ada Campaign once per page refresh if:
	* - The call to action (CTA) card is ~75% visible in the viewport, AND
	* - if the CTA card has not left the viewport after 5 seconds.
	* ^ Adjust these numbers to fit your desired user experience.
	*
	* Note: This example leverages the Intersection Observer API, which is
	* not compatible with Internet Explorer.
	* https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
	*/
	const delayTime = 5000;

	// Only show the campaign a single time per page refresh
	let campaignHasBeenShown = false;
	let timeoutId;

	function triggerCampaign(element) {
	window.adaEmbed.triggerCampaign("demo_campaign");
	campaignHasBeenShown = true;
	observer.unobserve(element);
	}

	function scheduleTrigger(element, delayTime) {
	if (timeoutId) {
	cancelScheduledTrigger();
	}
	timeoutId = setTimeout(function () {
	triggerCampaign(element);
	cancelScheduledTrigger();
	}, delayTime);
	}

	function cancelScheduledTrigger() {
	if (timeoutId) {
	clearTimeout(timeoutId);
	}
	}

	function checkIntersection(entries) {
	const [ entry ] = entries;
	const element = entry.target;

	if (entry.intersectionRatio >= 0.75) {
	console.log("Element is in view. A campaign will be scheduled.");
	scheduleTrigger(element, delayTime);
	} else {
	console.log("Element is not in view. Skip or cancel the trigger schedule.");
	cancelScheduledTrigger();
	}
	}

	const observer = new IntersectionObserver(checkIntersection, { threshold: 0.75 });
	const ctaCard = document.querySelector(".cta");
	observer.observe(ctaCard);

	</script>
	<script
	id="__ada"
	data-handle="ada-example"
	src="https://static.ada.support/embed2.js"
	></script>
	</body>
	</html>