KixPanganiban · March 24, 2022 13:09
diff --git a/fiddle.html b/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);
      }
      body {
        display: grid;
        place-items: center;
        position: relative;
      }
      .description {
        padding: 20px;
        text-align: center;
      }
      .description h1 {
        font-weight: bold;
        color: var(--primary-highlight);
      }
      .container {
        display: inline-flex;
        border-radius: var(--radius);
        border: 1px solid var(--secondary-light);
        background: var(--secondary-light);
        font-weight: bold;
        font-size: 18px;
        color: var(--primary-dark);
      }
      .button {
        width: var(--width);
        border-radius: var(--radius);
        text-align: center;
        padding: 20px;
        cursor: pointer;
      }
    
      .active {
        background: var(--primary-highlight);
        transition: background 1s;
      }
    </style>
  </head>
  <body>
    <div class="description">
      <h1>Ada Proactive Campaign Demo</h1>
      <p>Select the left button in the toggle.</p>
      <p>Refresh the page to try again.</p>
    </div>
    <div class="container">
      <div id="left" class="button">left</div>
      <div id="right" class="button active">right</div>
    </div>

    <script>
      /* In this demo, we trigger an Ada Campaign once per page refresh if:
       * - The user selects the "left" button
       */

      const leftBtn = document.querySelector("#left");
      const rightBtn = document.querySelector("#right");
      
      // Only show the campaign a single time per page refresh
      let campaignHasBeenShown = false;

      function toggleLeft(event) {
        leftBtn.classList.add("active");
        rightBtn.classList.remove("active");

        if (!campaignHasBeenShown) {
          window.adaEmbed.triggerCampaign("demo_campaign");
          campaignHasBeenShown = true;
        }
      }

      function toggleRight(event) {
        leftBtn.classList.remove("active");
        rightBtn.classList.add("active");
      }

      leftBtn.addEventListener("click", toggleLeft);
      rightBtn.addEventListener("click", toggleRight);
    </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);
	}
	body {
	display: grid;
	place-items: center;
	position: relative;
	}
	.description {
	padding: 20px;
	text-align: center;
	}
	.description h1 {
	font-weight: bold;
	color: var(--primary-highlight);
	}
	.container {
	display: inline-flex;
	border-radius: var(--radius);
	border: 1px solid var(--secondary-light);
	background: var(--secondary-light);
	font-weight: bold;
	font-size: 18px;
	color: var(--primary-dark);
	}
	.button {
	width: var(--width);
	border-radius: var(--radius);
	text-align: center;
	padding: 20px;
	cursor: pointer;
	}

	.active {
	background: var(--primary-highlight);
	transition: background 1s;
	}
	</style>
	</head>
	<body>
	<div class="description">
	<h1>Ada Proactive Campaign Demo</h1>
	<p>Select the left button in the toggle.</p>
	<p>Refresh the page to try again.</p>
	</div>
	<div class="container">
	<div id="left" class="button">left</div>
	<div id="right" class="button active">right</div>
	</div>

	<script>
	/* In this demo, we trigger an Ada Campaign once per page refresh if:
	* - The user selects the "left" button
	*/

	const leftBtn = document.querySelector("#left");
	const rightBtn = document.querySelector("#right");

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

	function toggleLeft(event) {
	leftBtn.classList.add("active");
	rightBtn.classList.remove("active");

	if (!campaignHasBeenShown) {
	window.adaEmbed.triggerCampaign("demo_campaign");
	campaignHasBeenShown = true;
	}
	}

	function toggleRight(event) {
	leftBtn.classList.remove("active");
	rightBtn.classList.add("active");
	}

	leftBtn.addEventListener("click", toggleLeft);
	rightBtn.addEventListener("click", toggleRight);
	</script>
	<script
	id="__ada"
	data-handle="ada-example"
	src="https://static.ada.support/embed2.js"
	></script>
	</body>
	</html>