Skip to content

Update duplicates #6492

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 1, 2024
Merged

Update duplicates #6492

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions 13/umbraco-ums/tutorials/marketing-resources/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
---
description: >-
Add extra uMS functionality to your website using the templates detailed in
this section.
---

# Marketing Resources

As a marketer you want to interact with your website visitor without the help of a developer.
In this section we listed free templates to jump start your onsite visitor interaction.
As a marketer, you want to interact with your website visitors without the help of a developer.\
Find in this section, templates to jump-start your onsite visitor interaction.

With just the help of these generic CSS and JavaScript templates you will be up-and-running within 5 minutes!
With the help of these generic CSS and JavaScript templates, you will be up and running within 5 minutes.
28 changes: 17 additions & 11 deletions 13/umbraco-ums/tutorials/marketing-resources/generic-exit-intent-popup-template.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,25 @@
---
description: >-
To boost the marketing activitites on your website, you can add an exit intent
popup to you website. Find a template for the popup in this article.
---

# Generic Exit Intent Popup Template

Enjoy this easy-to-use exit intent overlay 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 exit intent overlay even more relevant for your audience.
Use this template to start boosting your marketing activities. The template can be set up and used without help from a developer.

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!

*The resources needed for this exit intent overlay are shared below the screenshot. ![uMarketingSuite - Leave intent overlay]()*
It is recommended to personalize the popup to make it even more relevant for your specific audience.

## JavaScript & CSS
{% hint style="info" %}
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.
{% endhint %}

Copy and paste this JavaScript into uMarketingSuite and your overlay 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 ;-)
![uMarketingSuite - Leave intent overlay]()\*

## JavaScript & CSS

[Download CSS & JavaScript.](/media/kxmpljfv/ums-exit-intent-overlay.zip)
Copy and paste this JavaScript into uMS and your overlay is ready.

## Questions or ideas?
Feel free to play around with other properties. You can always use the following code to reset the styling.

Do you have improvements or requests for other templates that you would like to use? Feel free to reach out to [contact@umarketingsuite.com](mailto:contact@umarketingsuite.com?subject=Marketing%20Resources%20suggestion "Reach out to uMarketingSuite with your suggestion"). We would love to hear from you!
[Download CSS & JavaScript.](../../../../../media/kxmpljfv/ums-exit-intent-overlay.zip)
265 changes: 137 additions & 128 deletions 13/umbraco-ums/tutorials/marketing-resources/generic-popup-template.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,105 +1,117 @@
---
description: >-
To boost the marketing activitites on your website, you can add a uMS popup to
you website. Find a template for the popup in this article.
---

# Generic Popup 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](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.
Use the popup template to start boosting your marketing activities. The template can be set up and used without help from a developer.

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!

*The resources needed for this popup are shared below the screenshot. ![uMarketingSuite Popup example]()*
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.

{% hint style="info" %}
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.
{% endhint %}

![uMarketingSuite Popup example]()\*

## 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.

var popupTitle = "Popups do convert!"; // The title of your popup
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
var popupbuttonText = "I want this!"; // The button text
var popupButtonLink = "https://www.umarketingsuite.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) {ums("send", "event", "Popup", eventvalue, popupName);
};

function hideModel() {const message = document.querySelector('.u-alert-message');message.remove();
sendEvent('Closed');checkCookie();
};
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 JavaScript below into uMS.

```javascript
var popupTitle = "Popups do convert!"; // The title of your popup.
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.
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 registerClick() {sendEvent('Clicked');checkCookie();
};
function checkCookie() {if (useCookie) { CookieService.setCookie(`ums` + popupName + `Shown`,true,cookieExpireDays);
}};

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>`
function sendEvent(eventvalue) {ums("send", "event", "Popup", eventvalue, popupName);
};

const hasCookie = CookieService.getCookie(`ums` + popupName + `Shown`);if (!hasCookie) { document.body.insertAdjacentHTML('beforeend', popupContent);};
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);};
```

## 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.
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.

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

Don't be scared to play around with other properties. If things go wrong, this copy is here to reset your styling ;-)
Feel free to play around with other properties. You can always use this code to reset the styling.

: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 */
}
```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)
*/

/* Do no change anything below this line */
.u-alert-message {
--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);
Expand All @@ -114,45 +126,45 @@ Don't be scared to play around with other properties. If things go wrong, this c
transition: all 1s;
font-size: var(--c-size-text);
box-shadow: 2px 2px 30px rgb(0 0 0 / 25%);
}
.u-alert-message.absolute {
}

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

.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 {
}

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

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

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

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

.u-alert-button {
appearance: none;
border: 0;
background: var(--c-primary-surface);
Expand All @@ -165,19 +177,19 @@ Don't be scared to play around with other properties. If things go wrong, this c
text-decoration: none;
transition: filter 0.2s ease;
cursor: pointer;
}
.u-alert-button:hover,
.u-alert-button:focus {
}

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

.u-alert-button.secondary {
background: var(--c-btn-background);
color: var(--c-btn-text);
}
.u-alert-close {
}

.u-alert-close {
position: absolute;
top: 10px;
right: 25px;
Expand All @@ -186,9 +198,9 @@ Don't be scared to play around with other properties. If things go wrong, this c
background: var(--c-close-background);
color: var(--c-close-text);
border-radius: var(--c-close-radius);
}
@media (max-width: 48em) {
}

@media (max-width: 48em) {
.u-alert-message.absolute {
max-width: 100%;
width: 100%;
Expand All @@ -200,9 +212,9 @@ Don't be scared to play around with other properties. If things go wrong, this c
width: 100%;
text-align: center;
}
}
@keyframes showAnim {
}

@keyframes showAnim {
0% {
opacity: 0;
transform: scale(0.5);
Expand All @@ -211,8 +223,5 @@ Don't be scared to play around with other properties. If things go wrong, this c
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](mailto:contact@umarketingsuite.com?subject=Marketing%20Resources%20suggestion "Reach out to uMarketingSuite with your suggestion"). We would love to hear from you!
}
```
Loading