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;
        --height: calc(var(--width) / 2);
        --border-radius: calc(var(--height) / 2);
        --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);
      }
      
      /* Thank you to dcode for the CSS-Only Toggle Switch example:
       * https://dev.to/dcodeyt/creating-a-css-only-toggle-switch-5cg3
       */
      .toggle {
        width: var(--width);
        height: var(--height);
        border-radius: var(--border-radius);
        display: inline-block;
        cursor: pointer;
      }
      .toggle_input {
        display: none;
      }
      .toggle_fill {
        position: relative;
        width: var(--width);
        height: var(--height);
        border-radius: var(--border-radius);
        background: var(--secondary-light);
        transition: background 0.2s;
      }
      .toggle_fill::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: var(--height);
        width: var(--height);
        background: #ffffff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
        border-radius: var(--border-radius);
        transition: transform 0.2s;
      }
      .toggle_input:checked ~ .toggle_fill {
        background: var(--primary-highlight);
      }
      .toggle_input:checked ~ .toggle_fill::after {
        transform: translateX(var(--height));
      }
    </style>
  </head>
  <body>
    <div class="description">
      <h1>Ada Proactive Campaign Demo</h1>
      <p>Select the toggle.</p>
      <p>Refresh the page to try again.</p>
    </div>
    <label class="toggle" for="demoToggle">
      <input class="toggle_input" name="" type="checkbox" id="demoToggle" />
      <div class="toggle_fill"></div>
    </label>
    <script>
      /* In this demo, we trigger an Ada Campaign once per page refresh if:
       * - The user selects the toggle
       */

      function handleToggle() {
        window.adaEmbed.triggerCampaign("demo_campaign");
      }

      const toggle = document.querySelector(".toggle");
      toggle.addEventListener("click", handleToggle, { once: true });
    </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;
	--height: calc(var(--width) / 2);
	--border-radius: calc(var(--height) / 2);
	--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);
	}

	/* Thank you to dcode for the CSS-Only Toggle Switch example:
	* https://dev.to/dcodeyt/creating-a-css-only-toggle-switch-5cg3
	*/
	.toggle {
	width: var(--width);
	height: var(--height);
	border-radius: var(--border-radius);
	display: inline-block;
	cursor: pointer;
	}
	.toggle_input {
	display: none;
	}
	.toggle_fill {
	position: relative;
	width: var(--width);
	height: var(--height);
	border-radius: var(--border-radius);
	background: var(--secondary-light);
	transition: background 0.2s;
	}
	.toggle_fill::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: var(--height);
	width: var(--height);
	background: #ffffff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
	border-radius: var(--border-radius);
	transition: transform 0.2s;
	}
	.toggle_input:checked ~ .toggle_fill {
	background: var(--primary-highlight);
	}
	.toggle_input:checked ~ .toggle_fill::after {
	transform: translateX(var(--height));
	}
	</style>
	</head>
	<body>
	<div class="description">
	<h1>Ada Proactive Campaign Demo</h1>
	<p>Select the toggle.</p>
	<p>Refresh the page to try again.</p>
	</div>
	<label class="toggle" for="demoToggle">
	<input class="toggle_input" name="" type="checkbox" id="demoToggle" />
	<div class="toggle_fill"></div>
	</label>
	<script>
	/* In this demo, we trigger an Ada Campaign once per page refresh if:
	* - The user selects the toggle
	*/

	function handleToggle() {
	window.adaEmbed.triggerCampaign("demo_campaign");
	}

	const toggle = document.querySelector(".toggle");
	toggle.addEventListener("click", handleToggle, { once: true });
	</script>

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