Generic popup overlay template

Enjoy this easy-to-use popup template and start boosting your marketing activities right away!
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 if you want to set up a personalized popup within uMarketingSuite.

Please make sure that you've installed the clientside script of the uMarketingSuite on your website to make sure you can use the full functionality!

The resources needed for this popup are shared below the screenshot. 

JavaScript

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.

Now simply copy and paste the javascript below into uMarketingSuite.

function hideModel() {
const message = document.querySelector('.u-alert-message');
message.remove();
ums("send", "event", "Popup", "Close", "Popup1");
}


document.body.insertAdjacentHTML('beforeend', `<div class="u-alert-message absolute">
<article class="u-alert-content">
<strong>Popups do convert!</strong>
<p>Did you know that the average conversion rate of a popup is 3.09%? So if you have 1000 visitors on a daily basis, each month <b>927 visitors</b> will convert through this popup.</p>
<div class="u-alert-button-container">
<a href="https://www.umarketingsuite.com/" class="u-alert-button secondary">I want this!</a>
</div>
</article>

<button id="js-close-alert" class="u-alert-close u-alert-button" onclick="hideModel()">Close</button>
</div>`);

CSS

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.

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 ;-)

:root {
--c-primary-surface: #3444b2;
--c-primary-contrast: #fff;
--c-secondary-surface: #3444b2;
--c-secondary-contrast: #fff;
}

.u-alert-message {
position: relative;
background: #fff;
border-radius: 20px;
padding: 25px;
max-width: min(100%, 480px);
box-sizing: border-box;
font-family: system-ui, sans-serif;
opacity: 0;
animation: showAnim 0.8s cubic-bezier(0.68, 0.19, 0.14, 1.15) forwards;
transition: all 1s;
font-size: 16px;
box-shadow: 2px 2px 30px rgb(0 0 0 / 20%);
}

.u-alert-message.absolute {
--sides: 40px;
position: fixed;
z-index: 1000;
bottom: var(--sides);
right: var(--sides);
}

.u-alert-content strong {
font-size: 1.2em;
max-width: 90%;
display: inline-block;
}

.u-alert-content p {
margin: 10px 0 0 0;
}

.u-alert-button-container {
margin-top: 20px;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
margin-bottom: -5px;
}

.u-alert-button-container > * {
margin-bottom: 5px;
}

.u-alert-button-container > *:not(:last-child) {
margin-right: 5px;
}

.u-alert-button {
appearance: none;
border: 0;
background: var(--c-primary-surface);
color: var(--c-primary-contrast);
padding: 8px 16px;
border-radius: 5px;
font-family: inherit;
font-size: 1em;
font-weight: 600;
text-decoration: none;
transition: filter 0.2s ease;
cursor: pointer;
}

.u-alert-button:hover,
.u-alert-button:focus {
filter: brightness(1.1);
}

.u-alert-button.secondary {
background: var(--c-secondary-surface);
color: var(--c-secondary-contrast);
}

.u-alert-close {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 10px;
font-size: 0.8em;
background: #eaeaea;
color: #676767;
}

@media (max-width: 48em) {
.u-alert-message.absolute {
max-width: 100%;
width: 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
--sides: 0;
}
.u-alert-button:not(.u-alert-close) {
width: 100%;
text-align: center;
}
}

@keyframes showAnim {
0% {
opacity: 0;
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}

Questions or ideas?

Do you have improvements or requests for other templates that you would like to use? Feel free to reach out to contact@umarketingsuite.com. We would love to hear from you!