Skip to content

Commit

Permalink
feat(DIST-705): Add behavioural triggers (#192)
Browse files Browse the repository at this point in the history 
feat(DIST-705): Comments Review fixes
  • Loading branch information
Antonio authored Mar 3, 2021
1 parent a7dc4f8 commit 15c21da
Show file tree
Hide file tree
Showing 17 changed files with 993 additions and 1 deletion.
52 changes: 52 additions & 0 deletions packages/demo-html/public/behavioral-html/exit-html.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Open: exit (via embed code)</title>
<style>
#visual-threshold {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background: rgba(255, 0, 0, 0.2);
pointer-events: none;
}
</style>
<link rel="stylesheet" href="/lib/css/popup.css" />
</head>
<body>
<div id="visual-threshold"></div>
<h1>This popup opens on exit intent (via embed code)</h1>
<p>If a user wants to navigate away from your page, they usually need to access the browser toolbar.</p>
<p>We detect mouse movement in top part of the page - if the mouse is moving "up", we open the popup.</p>
<p>The popup is opened only once (on first detected exit intent).</p>
<button
id="popup"
class="typeform-share"
data-tf-popup="moe6aa"
data-tf-medium="unit-test"
data-tf-open="exit"
data-tf-open-value="50"
>
Open the popup manually instead
</button>

<h2>Technical stuff</h2>
<p>This is not available for customization on "Share" page, but the embed lib allows it.</p>
<form action="" method="get">
<label for="threshold">Pixels from top</label>
<input id="threshold" name="threshold" type="number" value="50" step="10" min="10" max="250" />
<button type="submit">Set</button>
</form>
<script src="../lib/embed-next.js"></script>
<script>
const threshold = parseInt(new URL(window.location.href).searchParams.get("threshold"), 10);
if (threshold) {
document.getElementById("visual-threshold").style.height = threshold + "px";
document.getElementById("popup").dataset.tfOpenValue = threshold;
document.getElementById("threshold").value = threshold;
}
</script>
</body>
</html>
46 changes: 46 additions & 0 deletions packages/demo-html/public/behavioral-html/load-html.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Open: load (via embed code)</title>
<link rel="stylesheet" href="/lib/css/popup.css" />
</head>
<body>
<h1>This popup opens on page load (via embed code)</h1>
<p>If you see this you very likely already closed the popup.</p>
<p>If the popup did not open automatically something is broken.</p>

<a
href="#"
class="typeform-share button"
data-tf-popup="moe6aa"
data-tf-medium="unit-test"
data-tf-open="load"
style="
width: 54px;
height: 54px;
position: fixed;
right: 26px;
bottom: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: #647;
overflow: hidden;
line-height: 0;
"
target="_blank"
>
<span class="icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-top: 10px">
<path
d="M21 0H0V9L10.5743 24V16.5H21C22.6567 16.5 24 15.1567 24 13.5V3C24 1.34325 22.6567 0 21 0ZM7.5 9.75C6.672 9.75 6 9.07875 6 8.25C6 7.42125 6.672 6.75 7.5 6.75C8.328 6.75 9 7.42125 9 8.25C9 9.07875 8.328 9.75 7.5 9.75ZM12.75 9.75C11.922 9.75 11.25 9.07875 11.25 8.25C11.25 7.42125 11.922 6.75 12.75 6.75C13.578 6.75 14.25 7.42125 14.25 8.25C14.25 9.07875 13.578 9.75 12.75 9.75ZM18 9.75C17.172 9.75 16.5 9.07875 16.5 8.25C16.5 7.42125 17.172 6.75 18 6.75C18.828 6.75 19.5 7.42125 19.5 8.25C19.5 9.07875 18.828 9.75 18 9.75Z"
fill="white"
/>
</svg>
</span>
</a>
<script src="../lib/embed-next.js"></script>
</body>
</html>
223 changes: 223 additions & 0 deletions packages/demo-html/public/behavioral-html/scroll-html.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,223 @@
<!-- intentionally leaving out the <!DOCTYPE html> -->
<html lang="en">
<head>
<title>Open: scroll (via embed code)</title>
<link rel="stylesheet" href="/lib/css/popup.css" />
<style>
html {
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
height: 100%;
}
body {
width: 100vw;
height: 100vh;
border-bottom: 10px rgba(0, 0, 0, 0.25) solid;
margin: 20px;
padding: 20px;
}
.scroll-indicator {
position: fixed;
top: 0;
right: 0;
text-align: right;
padding: 20px;
background: black;
color: white;
}
.lorem-ipsum {
opacity: 0.25;
}
</style>
</head>
<body>
<div class="scroll-indicator">
The popup will open at <span id="percent">30</span>%<br />
You scrolled <span id="scroll-pixels">0</span>px, that is <span id="scroll-percentage">0.00</span>% of the page
</div>
<h1>This popup opens on scroll - at <span id="percent-title">30</span>% (via embed code)</h1>
<p>The popup is opened automatically when you scroll past given percentage of the page height.</p>
<p>The popup is opened only once (when you scroll past the given percentage for the first time).</p>
<button
id="popup"
class="typeform-share"
data-tf-popup="moe6aa"
data-tf-medium="unit-test"
data-tf-open="scroll"
data-tf-open-value="30"
>
Open the popup manually instead
</button>

<h2>Customize the percentage</h2>
<p>This can be set on "Share" page as well.</p>
<form action="" method="get">
<label for="threshold">Percent</label>
<input id="threshold" name="percent" type="number" value="30" step="10" min="10" />
<button type="submit">Set</button>
</form>
<script src="/lib/embed-next.js"></script>
<script>
const { open, close, toggle } = window.tf.createPopup("moe6aa", { medium: "unit-test" });

document.getElementById("popup").onclick = toggle;

const percent = parseInt(new URL(window.location.href).searchParams.get("percent"), 10);
if (percent) {
document.getElementById("popup").dataset.tfCustomOpenValue = percent;
document.getElementById("threshold").value = percent;
}

document.addEventListener("scroll", function () {
const offsetTop = window.pageYOffset || document.documentElement.scrollTop;
const clientTop = document.documentElement.clientTop || 0;
const scrollTopPixels = offsetTop - clientTop;
const pageHeight = document.documentElement.scrollHeight;
const scrollTopPercentage = (scrollTopPixels / pageHeight) * 100;
document.getElementById("scroll-pixels").innerHTML = scrollTopPixels;
document.getElementById("scroll-percentage").innerHTML = (Math.round(scrollTopPercentage * 100) / 100).toFixed(2);
});
</script>

<div class="lorem-ipsum">
<h2>Random text to make the page long</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra aliquam augue vitae volutpat. Integer eu turpis elit.
</p>
<p>Mauris nec lobortis metus. Quisque commodo quis neque sed volutpat. Integer a bibendum ante, at dapibus arcu.</p>
<p>
Curabitur at suscipit enim. Aliquam ut urna nunc. Praesent nisl elit, iaculis nec lectus vitae, posuere aliquet velit.
</p>
<p>Aenean id porttitor nisi. Phasellus vel fermentum elit. In ut maximus risus, quis lobortis elit.</p>
<p>
Phasellus pellentesque placerat turpis ac semper. Duis ligula enim, vulputate sed erat vitae, vehicula bibendum turpis.
</p>
<p>Donec nibh purus, vehicula at mauris volutpat, placerat molestie diam.</p>
<p>Mauris tristique posuere ipsum vitae venenatis. Donec ut orci id massa ullamcorper pulvinar.</p>
<p>
Morbi pulvinar ante mauris, at sollicitudin lorem molestie sit amet. Morbi tellus nisi, rutrum ut lectus et, luctus
eleifend mi.
</p>
<p>Quisque felis enim, blandit in convallis in, bibendum non metus. Proin consectetur ut ante nec malesuada.</p>
<p>Pellentesque interdum id metus condimentum varius. Nullam fringilla lacinia posuere.</p>
<p>
Morbi pellentesque ante vitae tellus ullamcorper sollicitudin. Proin leo dolor, molestie quis diam id, tempor ullamcorper
diam.
</p>
<p>Donec sed pulvinar nunc, et posuere purus. Morbi ornare, diam eget blandit molestie, massa leo sollicitudin nisi.</p>
<p>Id tempus ex nisi quis lectus. Etiam laoreet dui est, quis tempus augue pharetra et. Nullam sed elit turpis.</p>
<p>Donec et mi tellus. Aliquam ut interdum dolor. Aliquam dapibus velit non nunc porttitor finibus.</p>
<p>Proin elementum risus et molestie aliquam.</p>
<p>Duis a egestas lectus, sed mattis nisl. Ut ultricies id mi vel varius. Donec nec laoreet orci.</p>
<p>
Morbi pulvinar ante mauris, at sollicitudin lorem molestie sit amet. Morbi tellus nisi, rutrum ut lectus et, luctus
eleifend mi.
</p>
<p>Quisque felis enim, blandit in convallis in, bibendum non metus. Proin consectetur ut ante nec malesuada.</p>
<p>Pellentesque interdum id metus condimentum varius. Nullam fringilla lacinia posuere.</p>
<p>
Morbi pellentesque ante vitae tellus ullamcorper sollicitudin. Proin leo dolor, molestie quis diam id, tempor ullamcorper
diam.
</p>
<p>Donec sed pulvinar nunc, et posuere purus. Morbi ornare, diam eget blandit molestie, massa leo sollicitudin nisi.</p>
<p>Id tempus ex nisi quis lectus. Etiam laoreet dui est, quis tempus augue pharetra et. Nullam sed elit turpis.</p>
<p>Donec et mi tellus. Aliquam ut interdum dolor. Aliquam dapibus velit non nunc porttitor finibus.</p>
<p>Proin elementum risus et molestie aliquam.</p>
<p>
Phasellus sagittis iaculis nisi at molestie. Aliquam id justo orci. Aenean cursus nulla sit amet lectus consequat
vestibulum.
</p>
<p>In volutpat neque at egestas pellentesque. Vivamus in viverra eros, non facilisis mi.</p>
<p>
Suspendisse sed metus molestie dolor convallis porta eu vitae mauris. Curabitur pharetra, lorem non tincidunt
sollicitudin.
</p>
<p>Odio tortor consequat nisi, et feugiat lectus odio sit amet nisi. Curabitur et tempor purus.</p>
<p>Maecenas commodo lorem augue, sed varius est maximus auctor. Proin finibus justo eu ante bibendum mollis.</p>
<p>Proin laoreet dapibus lorem a euismod. Integer dignissim eleifend efficitur. Pellentesque vitae pellentesque nisl.</p>
<p>Suspendisse vitae sem vitae risus sollicitudin sagittis ac sed urna.</p>
<p>
In hac habitasse platea dictumst. Nulla sit amet mauris elit. Maecenas consectetur imperdiet nisl, a vestibulum lectus
maximus vel.
</p>
<p>Nulla sagittis tempus arcu id vestibulum. Donec at nulla congue, luctus orci sit amet, scelerisque ante.</p>
<p>Praesent faucibus, lacus et varius cursus, turpis nibh scelerisque est, sit amet lacinia sapien metus vitae tellus.</p>
<p>
Phasellus pellentesque placerat turpis ac semper. Duis ligula enim, vulputate sed erat vitae, vehicula bibendum turpis.
</p>
<p>Donec nibh purus, vehicula at mauris volutpat, placerat molestie diam.</p>
<p>Mauris tristique posuere ipsum vitae venenatis. Donec ut orci id massa ullamcorper pulvinar.</p>
<p>Mauris aliquam erat feugiat ligula faucibus, eu imperdiet ante molestie.</p>
<p>Donec convallis, nisi at molestie fringilla, mi dolor suscipit risus, vitae gravida nulla libero vitae urna.</p>
<p>
Vestibulum id nisi mauris. In faucibus vitae massa eget feugiat. Morbi in arcu congue, iaculis eros ac, fermentum purus.
</p>
<p>
Fusce lectus tortor, facilisis tincidunt varius ac, sodales quis eros. Pellentesque quis nulla a nisl feugiat pretium.
</p>
<p>Duis et magna finibus, hendrerit ligula non, rutrum nunc.</p>
<p>Pellentesque interdum id metus condimentum varius. Nullam fringilla lacinia posuere.</p>
<p>
Morbi pellentesque ante vitae tellus ullamcorper sollicitudin. Proin leo dolor, molestie quis diam id, tempor ullamcorper
diam.
</p>
<p>Donec sed pulvinar nunc, et posuere purus. Morbi ornare, diam eget blandit molestie, massa leo sollicitudin nisi.</p>
<p>Id tempus ex nisi quis lectus. Etiam laoreet dui est, quis tempus augue pharetra et. Nullam sed elit turpis.</p>
<p>Donec et mi tellus. Aliquam ut interdum dolor. Aliquam dapibus velit non nunc porttitor finibus.</p>
<p>Proin elementum risus et molestie aliquam.</p>
<p>
Phasellus sagittis iaculis nisi at molestie. Aliquam id justo orci. Aenean cursus nulla sit amet lectus consequat
vestibulum.
</p>
<p>In volutpat neque at egestas pellentesque. Vivamus in viverra eros, non facilisis mi.</p>
<p>
Suspendisse sed metus molestie dolor convallis porta eu vitae mauris. Curabitur pharetra, lorem non tincidunt
sollicitudin.
</p>
<p>Odio tortor consequat nisi, et feugiat lectus odio sit amet nisi. Curabitur et tempor purus.</p>
<p>Maecenas commodo lorem augue, sed varius est maximus auctor. Proin finibus justo eu ante bibendum mollis.</p>
<p>Proin laoreet dapibus lorem a euismod. Integer dignissim eleifend efficitur. Pellentesque vitae pellentesque nisl.</p>
<p>Suspendisse vitae sem vitae risus sollicitudin sagittis ac sed urna.</p>
<p>
In hac habitasse platea dictumst. Nulla sit amet mauris elit. Maecenas consectetur imperdiet nisl, a vestibulum lectus
maximus vel.
</p>
<p>Nulla sagittis tempus arcu id vestibulum. Donec at nulla congue, luctus orci sit amet, scelerisque ante.</p>
<p>Praesent faucibus, lacus et varius cursus, turpis nibh scelerisque est, sit amet lacinia sapien metus vitae tellus.</p>
<p>
Phasellus pellentesque placerat turpis ac semper. Duis ligula enim, vulputate sed erat vitae, vehicula bibendum turpis.
</p>
<p>Donec nibh purus, vehicula at mauris volutpat, placerat molestie diam.</p>
<p>Mauris tristique posuere ipsum vitae venenatis. Donec ut orci id massa ullamcorper pulvinar.</p>
<p>
Morbi pulvinar ante mauris, at sollicitudin lorem molestie sit amet. Morbi tellus nisi, rutrum ut lectus et, luctus
eleifend mi.
</p>
<p>Quisque felis enim, blandit in convallis in, bibendum non metus. Proin consectetur ut ante nec malesuada.</p>
<p>Pellentesque interdum id metus condimentum varius. Nullam fringilla lacinia posuere.</p>
<p>
Morbi pellentesque ante vitae tellus ullamcorper sollicitudin. Proin leo dolor, molestie quis diam id, tempor ullamcorper
diam.
</p>
<p>Donec sed pulvinar nunc, et posuere purus. Morbi ornare, diam eget blandit molestie, massa leo sollicitudin nisi.</p>
<p>Id tempus ex nisi quis lectus. Etiam laoreet dui est, quis tempus augue pharetra et. Nullam sed elit turpis.</p>
<p>Donec et mi tellus. Aliquam ut interdum dolor. Aliquam dapibus velit non nunc porttitor finibus.</p>
<p>Proin elementum risus et molestie aliquam.</p>
<p>
Phasellus sagittis iaculis nisi at molestie. Aliquam id justo orci. Aenean cursus nulla sit amet lectus consequat
vestibulum.
</p>
<p>In volutpat neque at egestas pellentesque. Vivamus in viverra eros, non facilisis mi.</p>
<p>
Suspendisse sed metus molestie dolor convallis porta eu vitae mauris. Curabitur pharetra, lorem non tincidunt
sollicitudin.
</p>
<p>Odio tortor consequat nisi, et feugiat lectus odio sit amet nisi. Curabitur et tempor purus.</p>
<p>Maecenas commodo lorem augue, sed varius est maximus auctor. Proin finibus justo eu ante bibendum mollis.</p>
<p>Proin laoreet dapibus lorem a euismod. Integer dignissim eleifend efficitur. Pellentesque vitae pellentesque nisl.</p>
<p>Suspendisse vitae sem vitae risus sollicitudin sagittis ac sed urna.</p>
<p>Mauris aliquam erat feugiat ligula faucibus, eu imperdiet ante molestie.</p>
</div>
</body>
</html>
40 changes: 40 additions & 0 deletions packages/demo-html/public/behavioral-html/time-html.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Open: time (via embed code)</title>
<link rel="stylesheet" href="/lib/css/popup.css" />
</head>
<body>
<h1>This popup opens in <span id="seconds">5</span> seconds (via embed code)</h1>
<p>The popup is opened automatically after the given time has passed.</p>
<a
id="popup"
class="typeform-share"
data-tf-popup="moe6aa"
data-tf-medium="unit-test"
data-tf-open="time"
data-tf-open-value="5000"
>
Open the popup manually instead
</a>

<h2>Customize the time</h2>
<p>This can be set on "Share" page as well.</p>
<form action="" method="get">
<label for="time">Milliseconds</label>
<input id="time" name="ms" type="number" value="5000" step="1000" min="1000" />
<button type="submit">Set</button>
</form>

<script>
const ms = parseInt(new URL(window.location.href).searchParams.get("ms"), 10);
if (ms) {
document.getElementById("popup").dataset.tfOpenValue = ms;
document.getElementById("time").value = ms;
document.getElementById("seconds").innerHTML = Math.round(ms / 1000);
}
</script>

<script src="../lib/embed-next.js"></script>
</body>
</html>
Loading

0 comments on commit 15c21da

Please sign in to comment.