{"id":13151,"date":"2024-08-22T06:24:43","date_gmt":"2024-08-22T06:24:43","guid":{"rendered":"https:\/\/www.picreel.com\/blog\/?p=13151"},"modified":"2025-01-28T07:18:36","modified_gmt":"2025-01-28T07:18:36","slug":"contao-popup","status":"publish","type":"post","link":"https:\/\/www.picreel.com\/blog\/contao-popup\/","title":{"rendered":"How to Create &#038; Add a Popup in Contao &#8211; 2 Methods"},"content":{"rendered":"<p>Having worked with Contao for various marketing campaigns, I&#8217;ve found its robust features and seamless integrations incredibly useful.<\/p>\n<p>One strategy I&#8217;ve discovered to enhance digital engagement is the use of Contao popups, which can significantly grow your email list and boost click-through rates (CTRs).<\/p>\n<p>In this post, we&#8217;ll discuss two of the most popular methods for creating effective popups in Contao: the postyou\/contao-easy-popup extension and a specialized popup tool like Picreel.<\/p>\n<p>We&#8217;ll also explore the differences between these two versatile tools.<\/p>\n<p>Here&#8217;s how my Picreel email popup looks in Contao:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13154\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/08\/Competitor_PIC_PCP-email-popup-looks-in-Contao.png\" alt=\"Contao Popup\" width=\"1708\" height=\"869\" \/><\/p>\n<p>Before we dive in, let&#8217;s compare the postyou\/contao-easy-popup extension with Picreel:<\/p>\n<div id=\"tablepress-234-scroll-wrapper\" class=\"tablepress-scroll-wrapper\">\n\n<table id=\"tablepress-234\" class=\"tablepress tablepress-id-234 tablepress-responsive\">\n<thead>\n<tr class=\"row-1 odd\">\n\t<th class=\"column-1\">Criteria<\/th><th class=\"column-2\">postyou\/contao-easy-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 Only works within the Contao ecosystem, ideal for those dedicated to the Contao platform.<\/td><td class=\"column-3\">\u2705 Compatible with multiple website platforms, suitable for users managing various sites or considering platform changes.<\/td>\n<\/tr>\n<tr class=\"row-3 odd\">\n\t<td class=\"column-1\">Feature set<\/td><td class=\"column-2\">\u274c Offers basic functionality for creating and deploying popups.<\/td><td class=\"column-3\">\u2705 Includes advanced features such as A\/B testing, in-depth analytics, and personalization.<\/td>\n<\/tr>\n<tr class=\"row-4 even\">\n\t<td class=\"column-1\">Customization options<\/td><td class=\"column-2\">\u2705 Provides basic customization for design and content.<\/td><td class=\"column-3\">\u2705 Allows for extensive customization to align with branding and specific requirements.<\/td>\n<\/tr>\n<tr class=\"row-5 odd\">\n\t<td class=\"column-1\">Integration capabilities<\/td><td class=\"column-2\">\u274c Primarily integrates within the Contao environment.<\/td><td class=\"column-3\">\u2705 Integrates with a wide array of website platforms and marketing tools, offering flexibility and scalability.<\/td>\n<\/tr>\n<tr class=\"row-6 even\">\n\t<td class=\"column-1\">Targeting capabilities<\/td><td class=\"column-2\">\u274c Limited options, sufficient for fundamental user engagement.<\/td><td class=\"column-3\">\u2705 Advanced targeting and segmentation to accurately reach specific audiences based on behavior and demographics.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n<\/div><!-- #tablepress-234 from cache -->\n<p>Based on my experience, I recommend using Picreel for the following reasons:<\/p>\n<ul>\n<li><strong>Enhanced customization<\/strong>: Picreel provides extensive customization options, enabling the creation of highly engaging and personalized popups.<\/li>\n<li><strong>Advanced targeting<\/strong>: Picreel offers sophisticated <a href=\"https:\/\/www.picreel.com\/features\/popup-targeting\/\">targeting<\/a> and segmentation features, ensuring your popups reach the right audience at the right time.<\/li>\n<li><strong>Multi-platform support<\/strong>: Picreel&#8217;s compatibility with various platforms makes it easy to switch from Contao, if you choose to do so.<\/li>\n<\/ul>\n<p>Nonetheless, this tutorial will guide you through creating a popup using both methods.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Method_1_Using_the_postyoucontao-easy-popup_Extension\"><\/span>Method 1: Using the postyou\/contao-easy-popup Extension<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Here\u2019s how to set up a website or email popup in Contao using the postyou\/contao-easy-popup extension:<\/p>\n<p><strong>1. Install the extension<\/strong><\/p>\n<p>Open Contao Manager: Go to your Contao Manager by typing your website&#8217;s URL followed by \/contao-manager in your browser.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13152\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/08\/Competitor_PIC_PCP-pen-Contao-Manager.png\" alt=\"Open Contao Manager\" width=\"852\" height=\"593\" \/><\/p>\n<p>Find the extension: In the Contao Manager, look for the &#8216;Packages&#8217; section and enter postyou\/contao-easy-popup in the search bar.<\/p>\n<p>Install the extension: Click on the install button next to the extension and follow the instructions to complete the installation.<\/p>\n<p><strong>2. Create content for your popup<\/strong><\/p>\n<p>Access node management: From the backend of your website, navigate to Content &gt; Nodes.<\/p>\n<p>Add a new node: Click \u2018New Node\u2019 and input the content you want your popup to show. This could be text, images, or links.<\/p>\n<p><strong>3. Configure the popup trigger<\/strong><\/p>\n<p>Setup a trigger: Decide where on your website you want the popup to appear. This could be on a specific page or a particular section.<\/p>\n<p>Insert link to node: In the chosen area, add a link that will open the popup. The code for the link will look like this: &lt;a href=&#8221;{{popup_url::NODE_ID}}&#8221;&gt;Open Popup&lt;\/a&gt;, where NODE_ID is replaced with the ID of the node you created.<\/p>\n<p><strong>4. Customize popup settings<\/strong><\/p>\n<p>In the node settings, you can specify how the popup behaves. Options might include setting a delay before the popup appears, how often it can reappear, and whether it should pop up when users are about to leave the page.<\/p>\n<p><strong>5.<\/strong> <strong>Test and launch<\/strong><\/p>\n<p>Preview and test: Before making the popup live, preview it on your website to ensure it appears correctly across different devices and interacts as expected.<\/p>\n<p><strong>Go live<\/strong>: Once everything looks good and works well, make the popup live for your website visitors.<\/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 maker that works across multiple platforms, providing a versatile solution for creating popups. Here&#8217;s how you can create a Contao website popup using Picreel:<\/p>\n<p><strong>1.<\/strong> <a href=\"https:\/\/www.picreel.com\/signup\/\">Sign up for a Picreel account\u00a0<\/a><strong>and log in.<\/strong><\/p>\n<p><strong>2. <\/strong>Go to the \u201cCampaigns\u201d menu and click &#8220;New Campaign&#8221; from the top right<strong>.<\/strong><\/p>\n<p>From there, you can either choose a template from the drop-down menu 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, select the type of popup you want to create<strong>.<\/strong><\/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>After selecting the design, customize it according to your preferences<strong>.<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13157 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/08\/PP_PIC_SCP-design-customize-ize.png\" alt=\"design &amp; customize\" width=\"1313\" height=\"607\" \/><\/p>\n<p><strong>5. <\/strong>Set up your targeting and trigger options to define when and where you want your popup to appear<strong>.<\/strong><\/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;Save&#8221; to activate your popup<strong>.<\/strong><\/p>\n<p><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/J1tBmOnBJEA?si=T9rlj6miqqmOxBqk\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h3>Embedding Picreel HTML Code Inside Contao<\/h3>\n<p>To embed a Picreel popup on your Contao website, follow these steps:<\/p>\n<p><strong>1.<\/strong> Navigate to campaigns and click &#8220;<strong>View Code.<\/strong>&#8221; Click on the code to copy it.<\/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> Log in to your Contao backend and go to &#8220;Layout&#8221; &gt; &#8220;Templates,&#8221; where you can create a new template or edit an existing one.<\/p>\n<p><strong>3.<\/strong> Open the template in the HTML editor and add the Picreel embed code before the closing &lt;\/body&gt; tag.<\/p>\n<p><strong>4.<\/strong> Save your changes and assign the template to a page layout.<\/p>\n<p>That\u2019s it. You have successfully deployed a popup on your Contao website.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Which_Is_Better_Method_1_or_2\"><\/span>Which Is Better: Method 1 or 2?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>For long-term benefits, Picreel is the better choice. It offers advanced popup features and more trigger options. Plus, Picreel ensures your popups work smoothly even if you switch platforms.<\/p>\n<p>Additionally, Picreel provides a forever-free plan tailored for startups and small businesses. This plan allows the creation of unlimited popups with premium features. While the free version is effective, paid plan is available starting at $9.99 monthly.<\/p>\n<p>Alternatively, if you prefer a straightforward solution without additional integrations, a Contao popup extension, such as postyou\/contao-easy-popup, can suffice for your basic needs.<\/p>\n<p>Regardless of the chosen method, the main objective is to design popups that enhance user interaction and increase conversions.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Having worked with Contao for various marketing campaigns, I&#8217;ve found its robust features and seamless integrations incredibly useful. One strategy I&#8217;ve discovered to enhance digital engagement is the use of Contao popups, which can significantly grow your email list and boost click-through rates (CTRs). In this post, we&#8217;ll discuss two of the most popular methods&#8230;<\/p>\n","protected":false},"author":26,"featured_media":13153,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[],"class_list":["post-13151","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\/13151","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=13151"}],"version-history":[{"count":6,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/posts\/13151\/revisions"}],"predecessor-version":[{"id":13950,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/posts\/13151\/revisions\/13950"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/media\/13153"}],"wp:attachment":[{"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/media?parent=13151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/categories?post=13151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/tags?post=13151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}