Skip to content

Instantly share code, notes, and snippets.

@KixPanganiban
Last active March 24, 2022 13:09
Show Gist options
  • Save KixPanganiban/2cd907982d1b18e43e63531cc61c4a7e to your computer and use it in GitHub Desktop.
Save KixPanganiban/2cd907982d1b18e43e63531cc61c4a7e to your computer and use it in GitHub Desktop.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment