Skip to content

Commit 0f2941f

Browse files
Sofie Toft Kristensengitbook-bot
Sofie Toft Kristensen
authored and
gitbook-bot
committed
GITBOOK-21: Exit Intent Popup Template ++
1 parent 5d854b0 commit 0f2941f

File tree

3 files changed

+337
-24
lines changed

3 files changed

+337
-24
lines changed

‎13/umbraco-engage/tutorials/marketing-resources/generic-exit-intent-popup-template.md‎

Lines changed: 274 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,279 @@ Install [the client-side script](../../../../analytics/clientside-events-and-add
1717

1818
## JavaScript & CSS
1919

20-
Copy and paste this JavaScript into Umbraco Engage and your overlay is ready.
20+
Copy and paste the JavaScript and CSS into Umbraco Engage and your overlay is ready.
2121

22-
Feel free to play around with other properties. You can always use the following code to reset the styling.
22+
<details>
2323

24-
[Download CSS & JavaScript.](../../../../media/kxmpljfv/ums-exit-intent-overlay.zip)
24+
<summary>JavaScript</summary>
25+
26+
```javascript
27+
(function () {
28+
// Change your settings below
29+
const exitIntentSettings = {
30+
useCookie: true,
31+
cookieName: 'EngageExitIntentShown',
32+
cookieExpireDays: 30,
33+
timeout: 0,
34+
};
35+
36+
document.body.insertAdjacentHTML(
37+
'beforeend',
38+
`<div class="u-lightbox__container eng-exit-intent-popup">
39+
<div class="u-lightbox__scroll-container">
40+
<div class="u-lightbox-alert-message">
41+
<article class="u-lightbox-alert-content">
42+
<strong>Popups do convert!</strong>
43+
<p>
44+
Did you know that the average conversion rate of a popup
45+
is 3.09%? So if you have 1000 visitors on a daily basis,
46+
each month <b>927 visitors</b> will convert through this
47+
popup.
48+
</p>
49+
<div class="u-lightbox-alert-button-container">
50+
<a href="https://www.umbraco.com/"
51+
class="u-lightbox-alert-button secondary">I want this!</a>
52+
</div>
53+
</article>
54+
55+
<button class="u-lightbox-alert-close u-lightbox-alert-button">
56+
Close
57+
</button>
58+
</div>
59+
</div>
60+
<div class="u-lightbox__background"></div>
61+
</div>`,
62+
);
63+
const CookieService = {
64+
setCookie(name, value, days) {
65+
let expires = '';
66+
67+
if (days) {
68+
const date = new Date();
69+
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
70+
expires = '; expires=' + date.toUTCString();
71+
}
72+
73+
document.cookie = name + '=' + (value || '') + expires + ';';
74+
},
75+
76+
getCookie(name) {
77+
const cookies = document.cookie.split(';');
78+
79+
for (const cookie of cookies) {
80+
if (cookie.indexOf(name + '=') > -1) {
81+
return cookie.split('=')[1];
82+
}
83+
}
84+
85+
return null;
86+
},
87+
};
88+
const exit = (e) => {
89+
const shouldExit =
90+
// user clicks on mask
91+
[...e.target.classList].includes('u-lightbox__scroll-container') ||
92+
// user clicks on the close icon
93+
[...e.target.classList].includes('u-lightbox-alert-close') ||
94+
e.keyCode === 27; // user hits escape
95+
96+
if (shouldExit) {
97+
document.querySelector('.eng-exit-intent-popup').classList.remove('visible');
98+
if (umEngage) {
99+
umEngage('send', 'event', 'Popup', 'Close', 'Popup1');
100+
}
101+
}
102+
};
103+
104+
const mouseEvent = (e) => {
105+
const shouldShowExitIntent = !e.toElement && !e.relatedTarget && e.clientY < 10;
106+
107+
if (shouldShowExitIntent) {
108+
document.removeEventListener('mouseout', mouseEvent);
109+
document.querySelector('.eng-exit-intent-popup').classList.add('visible');
110+
if (exitIntentSettings.useCookie) {
111+
CookieService.setCookie(
112+
exitIntentSettings.cookieName,
113+
true,
114+
exitIntentSettings.cookieExpireDays,
115+
);
116+
}
117+
}
118+
};
119+
120+
if (!CookieService.getCookie(exitIntentSettings.cookieName)) {
121+
setTimeout(() => {
122+
document.addEventListener('mouseout', mouseEvent);
123+
document.addEventListener('keydown', exit);
124+
document.querySelector('.eng-exit-intent-popup').addEventListener('click', exit);
125+
}, exitIntentSettings.timeout);
126+
}
127+
})();
128+
```
129+
130+
131+
132+
</details>
133+
134+
<details>
135+
136+
<summary>CSS</summary>
137+
138+
```css
139+
:root {
140+
--c-lightbox-primary-surface: #3444b2;
141+
--c-lightbox-primary-contrast: #fff;
142+
--c-lightbox-secondary-surface: #3444b2;
143+
--c-lightbox-secondary-contrast: #fff;
144+
--c-lightbox-modal-background: rgba(0, 0, 0, 0.8);
145+
}
146+
.u-lightbox__container {
147+
position: fixed;
148+
top: 0;
149+
right: 0;
150+
bottom: 0;
151+
left: 0;
152+
width: 100%;
153+
height: 100%;
154+
margin: 0;
155+
justify-content: center;
156+
align-items: center;
157+
z-index: 999;
158+
display: none;
159+
}
160+
.u-lightbox__container.visible {
161+
display: flex;
162+
}
163+
.u-lightbox__scroll-container {
164+
position: relative;
165+
overflow: auto;
166+
-webkit-overflow-scrolling: touch;
167+
z-index: 10;
168+
width: 100%;
169+
height: 100%;
170+
}
171+
.u-lightbox__background {
172+
position: absolute;
173+
top: 0;
174+
right: 0;
175+
bottom: 0;
176+
left: 0;
177+
background: var(--c-lightbox-modal-background);
178+
opacity: 0;
179+
animation: fadeAnim 0.1s ease-in-out forwards;
180+
}
181+
.u-lightbox-alert-message {
182+
position: relative;
183+
background: #fff;
184+
border-radius: 20px;
185+
padding: 25px;
186+
max-width: min(100%, 480px);
187+
box-sizing: border-box;
188+
font-family: system-ui, sans-serif;
189+
opacity: 0;
190+
animation: showAnim 0.8s cubic-lightbox-bezier(0.68, 0.19, 0.14, 1.15) forwards;
191+
transition: all 1s;
192+
font-size: 16px;
193+
margin: 70px auto 60px;
194+
box-shadow: 2px 2px 30px rgb(0 0 0 / 20%);
195+
}
196+
197+
.u-lightbox-alert-content strong {
198+
font-size: 1.2em;
199+
max-width: 90%;
200+
display: inline-block;
201+
}
202+
203+
.u-lightbox-alert-content p {
204+
margin: 10px 0 0 0;
205+
}
206+
207+
.u-lightbox-alert-button-container {
208+
margin-top: 20px;
209+
display: flex;
210+
justify-content: flex-end;
211+
flex-wrap: wrap;
212+
margin-bottom: -5px;
213+
}
214+
215+
.u-lightbox-alert-button-container > * {
216+
margin-bottom: 5px;
217+
}
218+
219+
.u-lightbox-alert-button-container > *:not(:last-child) {
220+
margin-right: 5px;
221+
}
222+
223+
.u-lightbox-alert-button {
224+
appearance: none;
225+
border: 0;
226+
background: var(--c-lightbox-primary-surface);
227+
color: var(--c-lightbox-primary-contrast);
228+
padding: 8px 16px;
229+
border-radius: 5px;
230+
font-family: inherit;
231+
font-size: 1em;
232+
font-weight: 600;
233+
text-decoration: none;
234+
transition: filter 0.2s ease;
235+
cursor: pointer;
236+
}
237+
238+
.u-lightbox-alert-button:hover,
239+
.u-lightbox-alert-button:focus {
240+
filter: brightness(1.1);
241+
}
242+
243+
.u-lightbox-alert-button.secondary {
244+
background: var(--c-lightbox-secondary-surface);
245+
color: var(--c-lightbox-secondary-contrast);
246+
}
247+
248+
.u-lightbox-alert-close {
249+
position: absolute;
250+
top: 10px;
251+
right: 10px;
252+
padding: 5px 10px;
253+
font-size: 0.8em;
254+
background: #eaeaea;
255+
color: #676767;
256+
}
257+
258+
@media (max-width: 48em) {
259+
.u-lightbox-alert-message.absolute {
260+
max-width: 100%;
261+
width: 100%;
262+
border-bottom-left-radius: 0;
263+
border-bottom-right-radius: 0;
264+
--sides: 0;
265+
}
266+
.u-lightbox-alert-button:not(.u-lightbox-alert-close) {
267+
width: 100%;
268+
text-align: center;
269+
}
270+
}
271+
272+
@keyframes showAnim {
273+
0% {
274+
opacity: 0;
275+
transform: scale(0.9);
276+
}
277+
100% {
278+
opacity: 1;
279+
transform: scale(1);
280+
}
281+
}
282+
283+
@keyframes fadeAnim {
284+
0% {
285+
opacity: 0;
286+
}
287+
100% {
288+
opacity: 1;
289+
}
290+
}
291+
```
292+
293+
</details>
294+
295+
Feel free to play around with other properties. You can always use the code in this article to reset the styling.

‎13/umbraco-engage/tutorials/marketing-resources/generic-popup-template.md‎

Lines changed: 48 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,18 @@ It is recommended to personalize the popup to make it even more relevant for you
1515
Install [the client-side script](../../../../analytics/clientside-events-and-additional-javascript-files/additional-measurements-with-our-ums-analytics-scripts/) on your website to benefit from the full functionality of the template.
1616
{% endhint %}
1717

18-
## JavaScript
18+
## The Template code
1919

2020
This popup will not affect the styling of your existing page or website. Some JavaScript is needed to insert the popup HTML in your existing content to apply the popup. The code also includes an option for the visitor to close the popup.
2121

2222
Copy and paste the following JavaScript below into Umbraco Engage.
2323

24-
```javascript
25-
var popupTitle = "Popups do convert!"; // The title of your popup.
26-
var popupText = "The average conversion rate of a popup is 3.09%So, if you have 1000 visitors on a daily basis, each month 927 visitors will convert through this popup."; // The text of your popup.
24+
<details>
25+
26+
<summary>JavaScript</summary>
27+
28+
<pre class="language-javascript"><code class="lang-javascript">var popupTitle = "Popups do convert!"; // The title of your popup.
29+
var popupText = "The average conversion; // The text of your popup.
2730
var popupbuttonText = "I want this!"; // The button text.
2831
var popupButtonLink = "https://www.umbraco.com/"; // The button link.
2932
var popupButtonClose = "X"; // The close-button text.
@@ -58,31 +61,52 @@ const CookieService = {
5861
},
5962
};
6063

61-
function checkCookie() {if (useCookie) { CookieService.setCookie(`ums` + popupName + `Shown`,true,cookieExpireDays);
62-
}};
64+
function checkCookie() {
65+
if (useCookie) {
66+
CookieService.setCookie(`ums` + popupName + `Shown`,true,cookieExpireDays);
67+
}
68+
};
6369

64-
function sendEvent(eventvalue) {umEngage("send", "event", "Popup", eventvalue, popupName);
65-
};
70+
function sendEvent(eventvalue) {
71+
umEngage("send", "event", "Popup", eventvalue, popupName);
72+
};
6673

67-
function hideModel() {const message = document.querySelector('.u-alert-message');message.remove();
74+
function hideModel() {
75+
const message = document.querySelector('.u-alert-message');
76+
message.remove();
6877
sendEvent('Closed');checkCookie();
69-
};
78+
};
7079

71-
function registerClick() {sendEvent('Clicked');checkCookie();
72-
};
80+
function registerClick() {
81+
sendEvent('Clicked');
82+
checkCookie();
83+
};
7384

74-
var popupContent = `<div class="u-alert-message absolute"><article class="u-alert-content"><strong>` + popupTitle + `</strong><p>` + popupText + `</p><div class="u-alert-button-container"><a href="` + popupButtonLink + `" class="u-alert-button secondary" onclick="registerClick();">` + popupbuttonText + `</a></div></article><button id="js-close-alert" class="u-alert-close u-alert-button" onclick="hideModel();">` + popupButtonClose + `</button></div>`
85+
var popupContent = `&#x3C;div class="u-alert-message absolute">&#x3C;article class="u-alert-content">&#x3C;strong>`
86+
+ popupTitle
87+
+ `&#x3C;/strong>&#x3C;p>`
88+
+ popupText
89+
+ `&#x3C;/p>&#x3C;div class="u-alert-button-container">&#x3C;a href="`
90+
+ popupButtonLink
91+
+ `" class="u-alert-button secondary" onclick="registerClick();">`
92+
+ popupbuttonText
93+
+ `&#x3C;/a>&#x3C;/div>&#x3C;/article>&#x3C;button id="js-close-alert" class="u-alert-close u-alert-button" onclick="hideModel();">`
94+
+ popupButtonClose + `&#x3C;/button>&#x3C;/div>`;
7595

76-
const hasCookie = CookieService.getCookie(`ums` + popupName + `Shown`);if (!hasCookie) { document.body.insertAdjacentHTML('beforeend', popupContent);};
77-
```
96+
const hasCookie = CookieService.getCookie(`ums` + popupName + `Shown`);
97+
98+
if (!hasCookie) {
99+
document.body.insertAdjacentHTML('beforeend', popupContent);
100+
<strong>};
101+
</strong></code></pre>
78102

79-
## CSS
103+
</details>
80104

81105
Now that you have your popup in place you can update the look. Copy and paste the following CSS into Umbraco Engage and your popup is ready.
82106

83-
You can change the font, colors, and other properties at the top of the CSS code.
107+
<details>
84108

85-
Feel free to play around with other properties. You can always use this code to reset the styling.
109+
<summary>CSS</summary>
86110

87111
```css
88112
:root {
@@ -224,3 +248,9 @@ Click on 'Or Use HTML5' to use the colorpicker (the pipette icon)
224248
}
225249
}
226250
```
251+
252+
</details>
253+
254+
You can change the font, colors, and other properties at the top of the CSS code.
255+
256+
Feel free to play around with other properties. You can always use this code to reset the styling.

0 commit comments

Comments
 (0)