Add extra functionality to your website using the templates detailed in this section.
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 the help of these generic CSS and JavaScript templates, you will be up and running within 5 minutes.
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.
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 Create a Personalized Popup in 5 minutes tutorial to set up a personalized popup within Umbraco Engage.
Install the client-side script on your website to benefit from the full functionality of the template.
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 Umbraco Engage.
Now that you have your popup in place you can update the look. Copy and paste the following CSS into Umbraco Engage and your popup is ready.
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.
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.
Use this template to add a top bar to your website. 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.
Install the client-side script on your website to benefit from the full functionality of the template.
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.
Copy and paste the following JavaScript into Umbraco Engage.
You can change the following colors on the top bar:
BackgroundColor
TextColor
BorderColor
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.
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
.
Be mindful that every website is unique and built slightly differently. We cannot guarantee that the top bar will work in all use cases.
If you like to use your website's font, you can set the inheritFont
option to true
.
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.
If you want to change the colors, you can do that in the JavaScript file.
Feel free to play around with other properties. You can always use the code from this article to reset the styling.
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.
Use this 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.
Install the client-side script on your website to benefit from the full functionality of the template.
Copy and paste the JavaScript and CSS into Umbraco Engage and your overlay is ready.
Feel free to play around with other properties. You can always use the code in this article to reset the styling.