{"id":13048,"date":"2024-08-02T04:48:03","date_gmt":"2024-08-02T04:48:03","guid":{"rendered":"https:\/\/www.picreel.com\/blog\/?p=13048"},"modified":"2025-02-13T06:40:31","modified_gmt":"2025-02-13T06:40:31","slug":"umbraco-popup","status":"publish","type":"post","link":"https:\/\/www.picreel.com\/blog\/umbraco-popup\/","title":{"rendered":"How to Create a Popup in Umbraco?"},"content":{"rendered":"<p>I\u2019ve been using Umbraco for a while now and have built my entire business on top of it. Its flexibility and ease of use have made it an indispensable tool in my web development toolkit.<\/p>\n<p>Recently, I discovered that popups can significantly enhance user engagement, grow your email list, and improve click-through rates (CTRs). So, does Umbraco offer popups?<\/p>\n<p>Yes, it does. In fact, there are two ways to create a popup in Umbraco: using the built-in maker or a third-party popup tool like Picreel. Intrigued, I explored how Umbraco handles popups and compared it with a standardized popup tool like\u00a0<a href=\"https:\/\/www.picreel.com\/\">Picreel<\/a>.<\/p>\n<p>Here\u2019s how my Picreel popup looks within Umbraco:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12110 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/04\/PP_PIC_6-popups-haves.png\" alt=\"Umbraco popup\" width=\"1076\" height=\"659\" \/><\/p>\n<p>Before we dive into the how-tos, let\u2019s compare these two methods.<\/p>\n<div id=\"tablepress-230-scroll-wrapper\" class=\"tablepress-scroll-wrapper\">\n\n<table id=\"tablepress-230\" class=\"tablepress tablepress-id-230 tablepress-responsive\">\n<thead>\n<tr class=\"row-1 odd\">\n\t<th class=\"column-1\">Criteria<\/th><th class=\"column-2\">Umbraco Popup<\/th><th class=\"column-3\">Picreel Popup<\/th>\n<\/tr>\n<\/thead>\n<tbody class=\"row-hover\">\n<tr class=\"row-2 even\">\n\t<td class=\"column-1\">Multi-platform support<\/td><td class=\"column-2\">\u274c Designed specifically for Umbraco.<\/td><td class=\"column-3\">\u2705 Works across multiple platforms, making it versatile and adaptable.<\/td>\n<\/tr>\n<tr class=\"row-3 odd\">\n\t<td class=\"column-1\">More features<\/td><td class=\"column-2\">\u274c Basic features for creating simple popups.<\/td><td class=\"column-3\">\u2705 Advanced features, including A\/B testing, analytics, and various popup types.<\/td>\n<\/tr>\n<tr class=\"row-4 even\">\n\t<td class=\"column-1\">Better customization options<\/td><td class=\"column-2\">\u2705 Limited customization options with basic design elements.<\/td><td class=\"column-3\">\u2705 Extensive customization options allowing for detailed design and behavior customization.<\/td>\n<\/tr>\n<tr class=\"row-5 odd\">\n\t<td class=\"column-1\">Integrates with various platforms<\/td><td class=\"column-2\">\u274c Only integrates within Umbraco\u2019s ecosystem integration.<\/td><td class=\"column-3\">\u2705 Integrates with various website platforms, including WordPress, Shopify, and more.<\/td>\n<\/tr>\n<tr class=\"row-6 even\">\n\t<td class=\"column-1\">Advanced targeting options<\/td><td class=\"column-2\">\u274c Basic targeting options based on page and user activity.<\/td><td class=\"column-3\">\u2705 Advanced targeting options, including geo-targeting, device targeting, and behavioral targeting.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n<\/div><!-- #tablepress-230 from cache -->\n<p>From my experience, here are the top three reasons I recommend using Picreel:<\/p>\n<ul>\n<li><strong>Multi-platform Support:<\/strong>\u00a0Picreel works across multiple platforms, making it adaptable if you ever switch from Umbraco to another CMS.<\/li>\n<li><strong>Advanced Features:<\/strong>\u00a0Picreel offers sophisticated features such as\u00a0<a href=\"https:\/\/www.picreel.com\/features\/popup-ab-testing\/\">A\/B testing<\/a>\u00a0and <a href=\"https:\/\/www.picreel.com\/features\/popup-reports-and-analytics\/\">detailed analytics<\/a>, which can significantly improve your marketing strategies.<\/li>\n<li><strong>Better Customization Options:<\/strong>\u00a0With Picreel, you have extensive customization options, allowing you to create popups that perfectly match your website&#8217;s design and user experience goals.<\/li>\n<\/ul>\n<p>Nevertheless, in this tutorial, I will explain step-by-step how to create a popup using both methods.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Method_1_Using_Umbraco%E2%80%99s_Built-in_Popup\"><\/span>Method 1: Using Umbraco\u2019s Built-in Popup<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Umbraco offers a built-in popup maker. Here\u2019s how to create it:<\/p>\n<p><strong>1.<\/strong> Log in to your Umbraco back office with your credentials. Then, navigate to the &#8220;<strong>Settings<\/strong>&#8221; section and create a new document type for your popup.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13052\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/08\/Competitor_PIC_UCP-Settingsin.png\" alt=\"UCP Settings\" width=\"1911\" height=\"800\" \/><\/p>\n<p><strong>2.<\/strong> In the &#8220;<strong>Settings<\/strong>&#8221; section, create a new template for your popup. In the template editor, add the HTML structure and CSS for your popup.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13049 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/08\/Competitor_PIC_UCP-HTML-structure-and-CSS.png\" alt=\"HTML structure and CSS for your popup\" width=\"1449\" height=\"500\" \/><\/p>\n<p><strong>3.<\/strong> Go to the &#8220;Content&#8221; section and create a new content node using the document type you created.<\/p>\n<p><strong>4.<\/strong> Include JavaScript in your template to handle the display logic for the popup.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13050\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/08\/Competitor_PIC_UCP-JavaScript.png\" alt=\"JavaScript\" width=\"1058\" height=\"535\" \/><\/p>\n<p><strong>5.<\/strong> Ensure the popup template is included in your site\u2019s master template or the specific page where you want the popup to appear.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13054 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/08\/Competitor_PIC_UCP-your-site\u2019.png\" alt=\"UCB master template\" width=\"1058\" height=\"161\" \/><\/p>\n<p><strong>6.<\/strong> If needed, create a controller to manage the popup logic.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13056\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/08\/Competitor_PIC_UCP-controllser-1.png\" alt=\"controller\" width=\"1815\" height=\"388\" \/><\/p>\n<p><strong>7.<\/strong> Navigate to your site and test the popup to ensure it displays correctly and functions as expected.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Method_2_Using_Picreel_Popup_Builder\"><\/span>Method 2: Using Picreel Popup Builder<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Picreel is a popup builder that works across multiple platforms, providing you with a versatile solution for creating popups. Here&#8217;s how you can create a popup using Picreel:<\/p>\n<p><strong>1.<\/strong> Sign up for a Picreel account and log in.<\/p>\n<p><strong>2.<\/strong> Go to the \u201c<strong>Campaigns<\/strong>\u201d menu and click &#8220;<strong>New Campaign<\/strong>&#8221; from the top right. You can select the templates option from the drop-down or start from scratch.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12107\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/04\/PP_PIC_2Campaigns.png\" alt=\"New campaign\" width=\"1313\" height=\"561\" \/><\/p>\n<p><strong>3.<\/strong> From the templates menu, choose the type of popup you want to create.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12897\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/07\/PP_PIC_CM-templates-menu-1.png\" alt=\"templates menu\" width=\"1873\" height=\"441\" \/><\/p>\n<p><strong>4.<\/strong> Once you select the design, customize it according to your preferences.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12105\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/04\/PP_PIC_2-according-to-your-preferences..png\" alt=\"according to your preferences.\" width=\"1313\" height=\"607\" \/><\/p>\n<p><strong>5.<\/strong> Configure your targeting and trigger options to specify when and where you want your popup to appear.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12106\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/04\/PP_PIC_2-personalize-targeting.png\" alt=\"configure\" width=\"1308\" height=\"581\" \/><\/p>\n<p><strong>6.<\/strong> Click &#8220;<strong>Save<\/strong>&#8221; to activate your popup.<\/p>\n<p><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/J1tBmOnBJEA?si=sHmcUHK0KblJptZO\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h3>Embedding Picreel HTML Code Inside Umbraco<\/h3>\n<p>To embed a Picreel popup on your Umbraco website, follow these steps:<\/p>\n<p><strong>1.<\/strong> Navigate to campaigns and click &#8220;<strong>View Code.<\/strong>&#8221;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12109\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/04\/PP_PIC_5-saving-se.png\" alt=\"save code\" width=\"1629\" height=\"806\" \/><\/p>\n<p><strong>2.<\/strong> Click on the code to copy it.<\/p>\n<p><strong>3.<\/strong> Use your credentials to log in to the Umbraco backoffice.<\/p>\n<p><strong>4.<\/strong> Go to the &#8220;<strong>Settings<\/strong>&#8221; section. To edit an existing template, select the template from the list.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13051 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/08\/Competitor_PIC_UCP-Settings-dsection.png\" alt=\"edit an existing template\" width=\"1363\" height=\"808\" \/><\/p>\n<p><strong>5.<\/strong> Open the template in which you want to embed the custom HTML.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13058 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/08\/Competitor_PIC_UCP-custom-HTMLn.png\" alt=\"embed the custom HTML\" width=\"1920\" height=\"969\" \/><\/p>\n<p><strong>6.<\/strong> Add your custom HTML code in the desired location within the template.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13057 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/08\/Competitor_PIC_UCP-custHTML-code.png\" alt=\"custom HTML code\" width=\"1029\" height=\"240\" \/><\/p>\n<p><strong>7.<\/strong> Click on the &#8220;<strong>Save<\/strong>&#8221; button to save your changes.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Which_Is_a_Better_Method_Method_1_or_2\"><\/span>Which Is a Better Method: Method 1 or 2?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In the long term, Picreel is a much better option because your popup tool with all your past campaigns and data remains intact despite changing platforms.<\/p>\n<p>You get more sophisticated popup options and triggers. Picreel comes with a forever-free plan for startups and small businesses, allowing you to create unlimited popups with all premium features. The free version does the job well, but paid options start as low as\u00a0<strong>$9.99\/month<\/strong>\u00a0if you need more advanced features.<\/p>\n<p>On the other hand, if you prefer to use the limited options available with Umbraco\u2019s built-in popup without incurring additional integrations, it can still serve your needs just fine.<\/p>\n<p>Remember, the goal is to create compelling popups that drive user engagement and conversions, regardless of your chosen method. Ultimately, the choice is yours.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I\u2019ve been using Umbraco for a while now and have built my entire business on top of it. Its flexibility and ease of use have made it an indispensable tool in my web development toolkit. Recently, I discovered that popups can significantly enhance user engagement, grow your email list, and improve click-through rates (CTRs). So,&#8230;<\/p>\n","protected":false},"author":26,"featured_media":13053,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[],"class_list":["post-13048","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-popup"],"_links":{"self":[{"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/posts\/13048","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/comments?post=13048"}],"version-history":[{"count":4,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/posts\/13048\/revisions"}],"predecessor-version":[{"id":14076,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/posts\/13048\/revisions\/14076"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/media\/13053"}],"wp:attachment":[{"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/media?parent=13048"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/categories?post=13048"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/tags?post=13048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}