Umbraco Engage
CMSCloudHeartcoreDXP
13.latest (LTS)
13.latest (LTS)
  • Umbraco Engage Documentation
  • Release Notes
  • Support
  • Installation
    • System Requirements
    • Installation
    • Licensing
    • Verify your Engage installation
  • Upgrading
    • Upgrade Umbraco Engage
    • Version specific Upgrade Notes
    • Migrate from uMarketingSuite
  • Getting Started
    • Getting Started
    • For Marketers and Editors
      • Cockpit
      • Marketing Resources
    • For Developers
      • Infrastructure sizing
      • Load Balancing and CM/CD Environments
      • Content Delivery Network recommendations
      • Cockpit
      • Content Security Policy nonce configuration
      • Troubleshooting installations
  • Marketers and Editors
    • Introduction
      • The Umbraco Engage Section
      • Content Apps
      • The Umbraco Engage Cookie
    • Analytics
      • What is measured by default
      • Client-side Events
      • Types Of Clients
      • Campaigns
      • Device Type
      • Location
      • Referral Traffic
      • Forms
      • Videos
      • Scroll Heatmap
      • Google Analytics vs Umbraco Engage
      • Search Terms
    • A/B Testing
      • What is A/B testing
      • Types of A/B Tests
        • Single-page A/B Test
        • Multiple Pages Test
        • Document Type Test
        • Split URL Test
      • Setting up the A/B Test
      • Previewing an A/B Test
      • Monitor the A/B Test
      • A/B Test Distribution Algorithm
      • Front end Rendering
      • Finish an A/B Test
    • Personalization
      • Creating a Segment
      • Setting up Personalization
      • Cockpit Insights
      • Implicit and Explicit Personalization
        • Setting up the customer journey
        • Personas
        • Implicit Personalization scoring explained
        • Content Scoring
        • Campaign Scoring
        • Referral Scoring
    • Profiling
      • Profile detail
      • External profile data
    • Reporting
    • Settings
      • Goals
      • IP Filtering
      • Configuration
      • Permissions
  • Developers
    • Introduction
      • Dataflow Pipeline
        • Data Collection
        • Data Storage
        • Data Parsing
        • Reporting
      • The Umbraco Engage Cookie
        • Module Permissions
      • Performance
    • Analytics
      • Request tracking
      • Bot detection
      • Capture location data
      • Extending forms
      • Video tracking
      • Scroll Heatmap
      • Client-side events
        • Additional measurements with analytics scripts
        • Bridging Library for Google Analytics
        • Bridging Library for Google Tag Manager
        • Google Analytics Blocker Detection
        • Create your own events
      • Extending Analytics
        • Getting the Correct IP Address
        • Sending data to the GTM Datalayer
    • A/B testing
      • Retrieving A/B test variants in C#
    • Personalization
      • Implement your own segment parameters
      • Retrieve segment information from code
      • Add custom scoring
    • Profiling
      • External Profile Data
    • Reporting
    • Settings
      • Custom goals scoring
      • Configuration
    • Headless
      • Using the Engage API
      • Headless Example
  • Security and Privacy
    • Security and privacy
    • Retention periods of data
    • Anonymization
    • GDPR & EU regulation
      • How to become GDPR compliant using cookiebot
    • How it works
  • Tutorials
    • Overview
    • How to Get Started with Personalization
    • How to Create a Persona
    • Create a Personalized Popup in 5 minutes
    • How to set up an A/B Test
    • Marketing Resources
      • Generic Topbar Template
      • Generic Popup Template
      • Generic Exit Intent Popup Template
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
Export as PDF
  1. Tutorials
  2. Marketing Resources

Generic Popup Template

To boost the marketing activitites on your website, you can add a Umbraco Engage popup to you website. Find a template for the popup in this article.

PreviousGeneric Topbar TemplateNextGeneric Exit Intent Popup Template

Last updated 1 month ago

Was this helpful?

Use the popup template to start boosting your marketing activities. The template can be set up and used without help from a developer.

It is recommended to personalize the popup to make it even more relevant for your specific audience. Follow the to set up a personalized popup within Umbraco Engage.

Install the on your website to benefit from the full functionality of the template.

The Template code

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.

Copy and paste the following CSS into Umbraco Engage and your popup is ready. You can add the CSS to your existing stylesheet or create a new one.

CSS
:root {

/* 
Change these values to customize the looks of your popup
If you need a color picker go to https://www.w3schools.com/colors/colors_picker.asp
Click on 'Or Use HTML5' to use the colorpicker (the pipette icon)
*/

--c-text: #000000; /* Text color */
--c-font-text: system-ui, sans-serif;	/* Text font */
--c-size-text: 16px; /* Text size */
--c-lh-text: 28px; /* Text line spacing */
--c-title: #3444b2; /* Title color */
--c-font-title: system-ui, sans-serif; /* Title font */
--c-background: #ffffff; /* Popup background color */
--c-radius: 20px; /* Popup border radius */
--c-btn-text: #ffffff; /* Button text color */
--c-btn-background: #11bc9b; /* Button background color */
--c-btn-radius: 5px; /* Button border radius */
--c-close-text: #cccccc; /* Close button text color */
--c-close-background: #f2f2f2; /* Close button background color eaeaea*/
--c-close-radius: 5px; /* Close button border radius */
}

/* Do no change anything below this line */
.u-alert-message {
    position: relative;
    background: var(--c-background);
    border-radius: var(--c-radius);
    padding: 50px 50px 35px;
    max-width: min(100%, 520px);
    box-sizing: border-box;
    font-family: var(--c-font-text);
    color: var(--c-text);
    line-height: var(--c-lh-text);
    opacity: 0;
    animation: showAnim 1s cubic-bezier(0.4, 0.2, 0.2, 1) forwards;
    transition: all 1s;
    font-size: var(--c-size-text);
    box-shadow: 2px 2px 30px rgb(0 0 0 / 25%);
}

.u-alert-message.absolute {
    --sides: 60px;
    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;
    font-family: var(--c-font-title);
    color: var(--c-title);
}

.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 20px;
    border-radius: var(--c-btn-radius);
    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-btn-background);
    color: var(--c-btn-text);
}

.u-alert-close {
    position: absolute;
    top: 10px;
    right: 25px;
    padding: 5px 10px;
    font-size: 0.8em;
    background: var(--c-close-background);
    color: var(--c-close-text);
    border-radius: var(--c-close-radius);
}

@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.5);
    }
    100% {
    opacity: 1;
    transform: scale(1);
    }
}

You can change the font, colors, and other properties at the top of the CSS code.

Feel free to play around with other properties. You can always use this code to reset the styling.

Copy and paste the following JavaScript into Umbraco Engage. You can create a new JavaScript file containing the code or add it to your template's script tag.

JavaScript
var popupTitle = "Popups do convert!"; // The title of your popup.
var popupText = "The average conversion"; // The text of your popup.
var popupbuttonText = "I want this!"; // The button text.
var popupButtonLink = "https://www.umbraco.com/"; // The button link.
var popupButtonClose = "X"; // The close-button text.
var popupName = "Popup1"; // Must be unique. Used as analytics event and cookiename.
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.
const cookieExpireDays = 30; // After how many days do you want this popup to re-appear?

// Do no change anything below this line //
const CookieService = {
      setCookie(name, value, days) {
        let expires = '';
  
        if (days) {
          const date = new Date();
          date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
          expires = '; expires=' + date.toUTCString();
        }
  
        document.cookie = name + '=' + (value || '') + expires + ';';
      },
  
      getCookie(name) {
        const cookies = document.cookie.split(';');
  
        for (const cookie of cookies) {
          if (cookie.indexOf(name + '=') > -1) {
            return cookie.split('=')[1];
          }
        }
  
        return null;
      },
    };
    
function checkCookie() {
    if (useCookie) {
        CookieService.setCookie(`ums` + popupName + `Shown`,true,cookieExpireDays);
    }
};
    
function sendEvent(eventvalue) {
    umbEngage("send", "event", "Popup", eventvalue, popupName);
};
    
function hideModel() {
    const message = document.querySelector('.u-alert-message');
    message.remove();
    sendEvent('Closed');checkCookie();
};

function registerClick() {
    sendEvent('Clicked');
    checkCookie();
};

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

const hasCookie = CookieService.getCookie(`ums` + popupName + `Shown`);

if (!hasCookie) {
    document.body.insertAdjacentHTML('beforeend', popupContent);
};
Create a Personalized Popup in 5 minutes tutorial
client-side script
A preview of the Generic Popup Template.