Last active
March 24, 2022 13:09
-
-
Save KixPanganiban/2cd907982d1b18e43e63531cc61c4a7e to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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