You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
To boost the marketing activitites on your website, you can add an exit intent
4
+
popup to you website. Find a template for the popup in this article.
5
+
---
6
+
1
7
# Generic Exit Intent Popup Template
2
8
3
-
Enjoy this easy-to-use exit intent overlay template and start boosting your marketing activities right away!
4
-
No help is needed from a developer, everyone can set this one up. Apply some personalization to make the exit intent overlay even more relevant for your audience.
9
+
Use this template to start boosting your marketing activities. The template can be set up and used without help from a developer.
5
10
6
-
Please make sure that you've installed [the clientside script](/analytics/clientside-events-and-additional-javascript-files/additional-measurements-with-our-ums-analytics-scripts/) of the uMarketingSuite on your website to make sure you can use the full functionality!
7
-
8
-
*The resources needed for this exit intent overlay are shared below the screenshot. ![uMarketingSuite - Leave intent overlay]()*
11
+
It is recommended to personalize the popup to make it even more relevant for your specific audience.
9
12
10
-
## JavaScript & CSS
13
+
{% hint style="info" %}
14
+
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.
15
+
{% endhint %}
11
16
12
-
Copy and paste this JavaScript into uMarketingSuite and your overlay is ready to go.
13
-
Don't be scared to play around with the colors and font properties. If things go wrong, this copy is here to reset your styling ;-)
Copy and paste this JavaScript into uMS and your overlay is ready.
16
22
17
-
## Questions or ideas?
23
+
Feel free to play around with other properties. You can always use the following code to reset the styling.
18
24
19
-
Do you have improvements or requests for other templates that you would like to use? Feel free to reach out to [[email protected]](mailto:[email protected]?subject=Marketing%20Resources%20suggestion"Reach out to uMarketingSuite with your suggestion"). We would love to hear from you!
To boost the marketing activitites on your website, you can add a uMS popup to
4
+
you website. Find a template for the popup in this article.
5
+
---
6
+
1
7
# Generic Popup Template
2
8
3
-
Enjoy this easy-to-use popup template and start boosting your marketing activities right away!
4
-
No help is needed from a developer, everyone can set this one up. Apply some personalization to make the popup even more relevant for your audience. [Read this blog](https://www.umarketingsuite.com/blog/a-personalized-popup-in-5-minutes/"Setting up a personalized popup within 5 minutes with uMarketingSuite") if you want to set up a personalized popup within uMarketingSuite.
9
+
Use the popup template to start boosting your marketing activities. The template can be set up and used without help from a developer.
5
10
6
-
Please make sure that you've installed [the clientside script](/analytics/clientside-events-and-additional-javascript-files/additional-measurements-with-our-ums-analytics-scripts/) of the uMarketingSuite on your website to make sure you can use the full functionality!
7
-
8
-
*The resources needed for this popup are shared below the screenshot. ![uMarketingSuite Popup example]()*
11
+
It is recommended to personalize the popup to make it even more relevant for your specific audience. [Read this blog](https://www.umarketingsuite.com/blog/a-personalized-popup-in-5-minutes/) if you want to set up a personalized popup within uMS.
12
+
13
+
{% hint style="info" %}
14
+
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.
15
+
{% endhint %}
16
+
17
+
![uMarketingSuite Popup example]()\*
9
18
10
19
## JavaScript
11
20
12
-
This popup won't affect the styling of your existing page or website. To be able to apply the popup we need some JavaScript to insert the popup HTML in your existing content. In addition, we would like visitors to have the possibility to close the popup. This coding is also added.
13
-
14
-
Now simply copy and paste the javascript below into uMarketingSuite.
15
-
16
-
var popupTitle = "Popups do convert!"; // The title of your popup
17
-
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
18
-
var popupbuttonText = "I want this!"; // The button text
19
-
var popupButtonLink = "https://www.umarketingsuite.com/"; // The button link
20
-
var popupButtonClose = "X"; // The close button text
21
-
var popupName = "Popup1"; // Must be unique, used as analytics event and cookiename
22
-
const useCookie = true; // Set this to true to use a cookie to hide the popup for visitors that closed the popup or clicked on the button.
23
-
const cookieExpireDays = 30; // After how many days do you want this popup to re appear?
function checkCookie() {if (useCookie) { CookieService.setCookie(`ums` + popupName + `Shown`,true,cookieExpireDays);
53
-
}};
54
-
55
-
function sendEvent(eventvalue) {ums("send", "event", "Popup", eventvalue, popupName);
56
-
};
57
-
58
-
function hideModel() {const message = document.querySelector('.u-alert-message');message.remove();
59
-
sendEvent('Closed');checkCookie();
60
-
};
21
+
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.
22
+
23
+
Copy and paste the following JavaScript below into uMS.
24
+
25
+
```javascript
26
+
var popupTitle ="Popups do convert!"; // The title of your popup.
27
+
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.
28
+
var popupbuttonText ="I want this!"; // The button text.
29
+
var popupButtonLink ="https://www.umbraco.com/"; // The button link.
30
+
var popupButtonClose ="X"; // The close-button text.
31
+
var popupName ="Popup1"; // Must be unique. Used as analytics event and cookiename.
32
+
constuseCookie=true; // Set this to true to use a cookie to hide the popup for visitors that closed the popup or clicked on the button.
33
+
constcookieExpireDays=30; // After how many days do you want this popup to re-appear?
34
+
35
+
// Do no change anything below this line //
36
+
constCookieService= {
37
+
setCookie(name, value, days) {
38
+
let expires ='';
39
+
40
+
if (days) {
41
+
constdate=newDate();
42
+
date.setTime(date.getTime() + days *24*60*60*1000);
43
+
expires ='; expires='+date.toUTCString();
44
+
}
45
+
46
+
document.cookie= name +'='+ (value ||'') + expires +';';
47
+
},
48
+
49
+
getCookie(name) {
50
+
constcookies=document.cookie.split(';');
51
+
52
+
for (constcookieof cookies) {
53
+
if (cookie.indexOf(name +'=') >-1) {
54
+
returncookie.split('=')[1];
55
+
}
56
+
}
57
+
58
+
returnnull;
59
+
},
60
+
};
61
61
62
-
function registerClick() {sendEvent('Clicked');checkCookie();
Now that we have our popup in place we would like to make it look a bit fancier. Copy and paste this CSS into uMarketingSuite and your popup is ready to go.
82
+
Now that you have your popup in place you can update the look. Copy and paste the following CSS into uMS and your popup is ready.
72
83
73
-
You can change the font, colors and other properties at the top of the CSS code.
84
+
You can change the font, colors, and other properties at the top of the CSS code.
74
85
75
-
Don't be scared to play around with other properties. If things go wrong, this copy is here to reset your styling ;-)
86
+
Feel free to play around with other properties. You can always use this code to reset the styling.
76
87
77
-
:root {
78
-
79
-
/*
80
-
Change these values to customize the looks of your popup
81
-
If you need a color picker go to https://www.w3schools.com/colors/colors_picker.asp
82
-
Click on 'Or Use HTML5' to use the colorpicker (the pipette icon)
83
-
*/
84
-
85
-
--c-text: #000000; /* Text color */
86
-
--c-font-text: system-ui, sans-serif; /* Text font */
87
-
--c-size-text: 16px; /* Text size */
88
-
--c-lh-text: 28px; /* Text line spacing */
89
-
--c-title: #3444b2; /* Title color */
90
-
--c-font-title: system-ui, sans-serif; /* Title font */
91
-
--c-background: #ffffff; /* Popup background color */
92
-
--c-radius: 20px; /* Popup border radius */
93
-
--c-btn-text: #ffffff; /* Button text color */
94
-
--c-btn-background: #11bc9b; /* Button background color */
95
-
--c-btn-radius: 5px; /* Button border radius */
96
-
--c-close-text: #cccccc; /* Close button text color */
97
-
--c-close-background: #f2f2f2; /* Close button background color eaeaea*/
98
-
--c-close-radius: 5px; /* Close button border radius */
99
-
}
88
+
```css
89
+
:root {
90
+
91
+
/*
92
+
Change these values to customize the looks of your popup
93
+
If you need a color picker go to https://www.w3schools.com/colors/colors_picker.asp
94
+
Click on 'Or Use HTML5' to use the colorpicker (the pipette icon)
95
+
*/
100
96
101
-
/* Do no change anything below this line */
102
-
.u-alert-message {
97
+
--c-text: #000000; /* Text color */
98
+
--c-font-text: system-ui, sans-serif; /* Text font */
99
+
--c-size-text: 16px; /* Text size */
100
+
--c-lh-text: 28px; /* Text line spacing */
101
+
--c-title: #3444b2; /* Title color */
102
+
--c-font-title: system-ui, sans-serif; /* Title font */
103
+
--c-background: #ffffff; /* Popup background color */
104
+
--c-radius: 20px; /* Popup border radius */
105
+
--c-btn-text: #ffffff; /* Button text color */
106
+
--c-btn-background: #11bc9b; /* Button background color */
107
+
--c-btn-radius: 5px; /* Button border radius */
108
+
--c-close-text: #cccccc; /* Close button text color */
109
+
--c-close-background: #f2f2f2; /* Close button background color eaeaea*/
110
+
--c-close-radius: 5px; /* Close button border radius */
111
+
}
112
+
113
+
/* Do no change anything below this line */
114
+
.u-alert-message {
103
115
position: relative;
104
116
background: var(--c-background);
105
117
border-radius: var(--c-radius);
@@ -114,45 +126,45 @@ Don't be scared to play around with other properties. If things go wrong, this c
114
126
transition: all1s;
115
127
font-size: var(--c-size-text);
116
128
box-shadow: 2px2px30pxrgb(000 / 25%);
117
-
}
118
-
119
-
.u-alert-message.absolute {
129
+
}
130
+
131
+
.u-alert-message.absolute {
120
132
--sides: 60px;
121
133
position: fixed;
122
134
z-index: 1000;
123
135
bottom: var(--sides);
124
136
right: var(--sides);
125
-
}
126
-
127
-
.u-alert-content strong {
137
+
}
138
+
139
+
.u-alert-contentstrong {
128
140
font-size: 1.2em;
129
141
max-width: 90%;
130
142
display: inline-block;
131
143
font-family: var(--c-font-title);
132
144
color: var(--c-title);
133
-
}
134
-
135
-
.u-alert-content p {
145
+
}
146
+
147
+
.u-alert-contentp {
136
148
margin: 10px000;
137
-
}
138
-
139
-
.u-alert-button-container {
149
+
}
150
+
151
+
.u-alert-button-container {
140
152
margin-top: 20px;
141
153
display: flex;
142
154
justify-content: flex-end;
143
155
flex-wrap: wrap;
144
156
margin-bottom: -5px;
145
-
}
146
-
147
-
.u-alert-button-container > * {
157
+
}
158
+
159
+
.u-alert-button-container>* {
148
160
margin-bottom: 5px;
149
-
}
150
-
151
-
.u-alert-button-container > *:not(:last-child) {
161
+
}
162
+
163
+
.u-alert-button-container>*:not(:last-child) {
152
164
margin-right: 5px;
153
-
}
154
-
155
-
.u-alert-button {
165
+
}
166
+
167
+
.u-alert-button {
156
168
appearance: none;
157
169
border: 0;
158
170
background: var(--c-primary-surface);
@@ -165,19 +177,19 @@ Don't be scared to play around with other properties. If things go wrong, this c
165
177
text-decoration: none;
166
178
transition: filter 0.2sease;
167
179
cursor: pointer;
168
-
}
169
-
170
-
.u-alert-button:hover,
171
-
.u-alert-button:focus {
180
+
}
181
+
182
+
.u-alert-button:hover,
183
+
.u-alert-button:focus {
172
184
filter: brightness(1.1);
173
-
}
174
-
175
-
.u-alert-button.secondary {
185
+
}
186
+
187
+
.u-alert-button.secondary {
176
188
background: var(--c-btn-background);
177
189
color: var(--c-btn-text);
178
-
}
179
-
180
-
.u-alert-close {
190
+
}
191
+
192
+
.u-alert-close {
181
193
position: absolute;
182
194
top: 10px;
183
195
right: 25px;
@@ -186,9 +198,9 @@ Don't be scared to play around with other properties. If things go wrong, this c
186
198
background: var(--c-close-background);
187
199
color: var(--c-close-text);
188
200
border-radius: var(--c-close-radius);
189
-
}
190
-
191
-
@media (max-width: 48em) {
201
+
}
202
+
203
+
@media (max-width: 48em) {
192
204
.u-alert-message.absolute {
193
205
max-width: 100%;
194
206
width: 100%;
@@ -200,9 +212,9 @@ Don't be scared to play around with other properties. If things go wrong, this c
200
212
width: 100%;
201
213
text-align: center;
202
214
}
203
-
}
204
-
205
-
@keyframes showAnim {
215
+
}
216
+
217
+
@keyframesshowAnim {
206
218
0% {
207
219
opacity: 0;
208
220
transform: scale(0.5);
@@ -211,8 +223,5 @@ Don't be scared to play around with other properties. If things go wrong, this c
211
223
opacity: 1;
212
224
transform: scale(1);
213
225
}
214
-
}
215
-
216
-
## Questions or ideas?
217
-
218
-
Do you have improvements or requests for other templates that you would like to use? Feel free to reach out to [[email protected]](mailto:[email protected]?subject=Marketing%20Resources%20suggestion"Reach out to uMarketingSuite with your suggestion"). We would love to hear from you!
0 commit comments