From c6e61f106dc958bc7b1d5110937fd75108f61be6 Mon Sep 17 00:00:00 2001 From: sofietoft Date: Tue, 1 Oct 2024 15:31:53 +0200 Subject: [PATCH] Update duplicates --- .../tutorials/marketing-resources/README.md | 12 +- .../generic-exit-intent-popup-template.md | 28 +- .../generic-popup-template.md | 265 +++++++++--------- .../generic-topbar-template.md | 162 +++++++++-- 4 files changed, 301 insertions(+), 166 deletions(-) diff --git a/13/umbraco-ums/tutorials/marketing-resources/README.md b/13/umbraco-ums/tutorials/marketing-resources/README.md index 8af75eb6fb9..83da93c54c0 100644 --- a/13/umbraco-ums/tutorials/marketing-resources/README.md +++ b/13/umbraco-ums/tutorials/marketing-resources/README.md @@ -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! \ No newline at end of file +With the help of these generic CSS and JavaScript templates, you will be up and running within 5 minutes. diff --git a/13/umbraco-ums/tutorials/marketing-resources/generic-exit-intent-popup-template.md b/13/umbraco-ums/tutorials/marketing-resources/generic-exit-intent-popup-template.md index fc7f81094ee..b3739f48eee 100644 --- a/13/umbraco-ums/tutorials/marketing-resources/generic-exit-intent-popup-template.md +++ b/13/umbraco-ums/tutorials/marketing-resources/generic-exit-intent-popup-template.md @@ -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! \ No newline at end of file +[Download CSS & JavaScript.](../../../../../media/kxmpljfv/ums-exit-intent-overlay.zip) diff --git a/13/umbraco-ums/tutorials/marketing-resources/generic-popup-template.md b/13/umbraco-ums/tutorials/marketing-resources/generic-popup-template.md index 920a8344f24..5cf8dab843e 100644 --- a/13/umbraco-ums/tutorials/marketing-resources/generic-popup-template.md +++ b/13/umbraco-ums/tutorials/marketing-resources/generic-popup-template.md @@ -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 = `
` +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 = `
` + +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); @@ -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); @@ -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; @@ -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%; @@ -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); @@ -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! \ No newline at end of file +} +``` diff --git a/13/umbraco-ums/tutorials/marketing-resources/generic-topbar-template.md b/13/umbraco-ums/tutorials/marketing-resources/generic-topbar-template.md index 3974948a2ba..312696e9f4e 100644 --- a/13/umbraco-ums/tutorials/marketing-resources/generic-topbar-template.md +++ b/13/umbraco-ums/tutorials/marketing-resources/generic-topbar-template.md @@ -1,46 +1,160 @@ +--- +description: >- + To boost the marketing activitites on your website, you can add a uMS top bar + to you website. Find a template for the top bar in this article. +--- + # Generic Topbar Template -After the success of the generic popup template, here we have the easy-to-use topbar template. -Again: 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. +Use this template to add a top bar to your website. 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 topbar are shared below the screenshot. ![]()* +It is recommended to personalize the popup to make it even more relevant for your specific audience. -## JavaScript +{% 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 %} -This topbar won't affect the styling of your existing page or website. To be able to apply the topbar we need some JavaScript to insert the topbar HTML in your existing content. In addition, we would like visitors to have the possibility to close the topbar. This coding is also added. +![]()\* -Now simply copy and paste the JavaScript below into uMarketingSuite. +## JavaScript -### **Changing colors / options:** +The top bar 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 top bar. The code also includes an option for visitors to close the top bar. -You can change the colors of the topbar. You can change the **backgroundColor, textColor** and **borderColor.** +Copy and paste the following JavaScript into uMS. -#### **Fixed topbar?** +```javascript +(function () { + // Play with the colors and the contents of the top bar. + const backgroundColor = "#ffba00"; + const textColor = "#333"; + const borderColor = "#ddd"; + const text = 'Get started in 10 minutes'; -By default the topbar is fixed and always visible, also when the user scrolls. That means that it will be an overlay to the page, and potentionally hiding content underneath it. + // This is the text that is displayed in the top bar. + const domElement = document.querySelector("body"); + + // Specify the selector where the top bar is being placed. + const options = { + isFixed: true, // If set to 'true', the bar will have position fixed. + inheritFont: false, // If set to 'true', the bar will have the font-family that is being used on your website. + } + + // This is the function where domElement. + insertAdjacentHTML( + "afterbegin", + `
${text}
`); +}); +``` -If you don't like that, you can set the **isFixed** option to 'false'. It will act like a regular element that doesn't scroll with the user's scroll position but it does not overlap content. You can play with the element where the topbar is being inserted in. You can change that element at **domElement.** +### Changing colors -Keep in mind that every website is unique and build in a slightly different way. We can't guarentee that the topbar will work in all use cases. If it doesn't work in your website feel free to reach out to [contact@umarketingsuite.com](mailto:contact@umarketingsuite.com?subject=Marketing%20Resources%20suggestion "Reach out to uMarketingSuite with your suggestion"). +You can change the following colors on the top bar: -#### **Font family:** +* BackgroundColor +* TextColor +* BorderColor -If you like to use your website's font, you can set the **inheritFont** option to 'true'. +### Fixed topbar - (function () { // Play with the colors and the contents of the topbar.const backgroundColor = "#ffba00";const textColor = "#333";const borderColor = "#ddd";const text = 'Get started in 10 minutes'; // This is the text that is displayed in the topbar.const domElement = document.querySelector("body"); // Specify the selector where the topbar is being placed. const options = {isFixed: true, // If set to 'true', the bar will have position fixed.inheritFont: false, // If set to 'true', the bar will have the font-family that is being used on your website.}// This is the function where domElement.insertAdjacentHTML("afterbegin",`
${text}
`);})(); +By default, the top bar is fixed and always visible when the user scrolls. That means it will be an overlay on the page, and potentially hide content underneath it. -## CSS +If you do not like that, you can set the `isFixed` option to `false`. It will act like a regular element that does not scroll with the user's scroll position but does not overlap with the content. You can play with the top bar element and you can change that element at `domElement`. -Now that we have our topbar in place we would like to make it look a bit fancier. Copy and paste this CSS into uMarketingSuite and your topbar is ready to go. +{% hint style="info" %} +Be mindful that every website is unique and built slightly differently. We cannot guarantee that the top bar will work in all use cases. +{% endhint %} -If you would like to change the colors, you can do that in the JavaScript file. +### Font family + +If you like to use your website's font, you can set the `inheritFont` option to `true`. -Don't be scared to play around with other properties. If things go wrong, this copy is here to reset your styling ;-) +## CSS - .u-topbar__container {--font-size: 14px;--button-size: 40px;--button-icon-size: 16px;--color-background: yellow;--color-text: #000;--color-border: #000;background: var(--color-background);color: var(--color-text);border-bottom: 1px solid var(--color-border);display: flex;align-items: center;justify-content: center;position: relative;padding: 10px;box-sizing: border-box;font-family: system-ui, sans-serif;font-weight: bold;min-height: 40px;z-index: 9999;width: 100%;font-size: var(--font-size);}.u-topbar__container.s-font-inherit {font-family: inherit;}.u-topbar__container.s-fixed {position: fixed;top: 0;left: 0;right: 0;bottom: auto;}.u-topbar__text a {color: inherit !important;}.u-topbar__close-button {appearance: none;border: 0;outline: 0;background: transparent;position: absolute;top: 0;bottom: 0;right: 10px;display: flex;align-items: center;justify-content: center;width: var(--button-size);height: var(--button-size);left: auto;margin: auto;flex: 0 0 auto;}.u-topbar__close-button > svg {width: var(--button-icon-size);height: var(--button-icon-size);flex: 0 0 auto;}@media (max-width: 48em) {.u-topbar__container {--font-size: 12px;--button-size: 30px;--button-icon-size: 12px;padding-left: var(--button-size);padding-right: var(--button-size);min-height: var(--button-size);}.u-topbar__close-button {right: 0;}} +With the top bar set up, you can change the look to fit your website. Copy and paste this CSS into uMS and your top bar is ready. -## Questions or ideas? +If you would like to change the colors, you can do that in the JavaScript file. -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! \ No newline at end of file +Feel free to play around with other properties. You can always use the following code to reset the styling. + +```css +.u-topbar__container { + --font-size: 14px; + --button-size: 40px; + --button-icon-size: 16px; + --color-background: yellow; + --color-text: #000; + --color-border: #000; + background: var(--color-background); + color: var(--color-text); + border-bottom: 1px solid var(--color-border); + display: flex; + align-items: center; + justify-content: center; + position: relative; + padding: 10px; + box-sizing: border-box; + font-family: system-ui, sans-serif; + font-weight: bold; + min-height: 40px; + z-index: 9999; + width: 100%; + font-size: var(--font-size); +} + +.u-topbar__container.s-font-inherit { + font-family: inherit; +} + +.u-topbar__container.s-fixed { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: auto; +} + +.u-topbar__text a { + color: inherit !important; +} + +.u-topbar__close-button { + appearance: none; + border: 0; + outline: 0; + background: transparent; + position: absolute; + top: 0; + bottom: 0; + right: 10px; + display: flex; + align-items: center; + justify-content: center; + width: var(--button-size); + height: var(--button-size); + left: auto; + margin: auto; + flex: 0 0 auto; +} + +.u-topbar__close-button > svg { + width: var(--button-icon-size); + height: var(--button-icon-size); + flex: 0 0 auto; +} + +@media (max-width: 48em) { + + .u-topbar__container { + --font-size: 12px; + --button-size: 30px; + --button-icon-size: 12px; + padding-left: var(--button-size); + padding-right: var(--button-size); + min-height: var(--button-size); + } + + .u-topbar__close-button { + right: 0; + } +} +```