{"id":13446,"date":"2024-10-10T06:00:32","date_gmt":"2024-10-10T06:00:32","guid":{"rendered":"https:\/\/www.picreel.com\/blog\/?p=13446"},"modified":"2025-01-28T07:20:57","modified_gmt":"2025-01-28T07:20:57","slug":"netlify-popup","status":"publish","type":"post","link":"https:\/\/www.picreel.com\/blog\/netlify-popup\/","title":{"rendered":"How to Create a Popup in Netlify: A Guide for Beginners"},"content":{"rendered":"<p>I\u2019ve been working with Netlify for a while, and trust me when I say\u2026 I love how it simplifies website hosting!<\/p>\n<p>It\u2019s packed with features like continuous deployment, serverless functions, and built-in global CDN support. I think it\u2019s an ideal choice for anyone wanting to focus more on building websites than managing the backend.<\/p>\n<p><strong>One question I see a lot, though, is how to add popups in Netlify.<\/strong><\/p>\n<p><strong>Searching \u201cNetlify popup\u201d on Google<\/strong>\u00a0gave me some strange results. It seemed that users had faced some issues using the platform\u2019s \u2018Identity Widget Popup\u2019 on their website.<\/p>\n<p><strong>With some further research, here\u2019s what I found &#8211;<\/strong><\/p>\n<ul>\n<li>Does Netlify support popups? Yes.<\/li>\n<li>Does it have a built-in popup builder? No.<\/li>\n<\/ul>\n<p>I used a third-party popup building software, and the result was pretty decent, in my opinion.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13449 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/10\/PP_PIC_PNGQW-1.png\" alt=\"Netlify Popup\" width=\"1076\" height=\"657\" \/><\/p>\n<p>Looks pretty sleek, right? I used\u00a0<a href=\"https:\/\/www.picreel.com\/\">Picreel<\/a>\u00a0to create this.<\/p>\n<p>You can use it or any other third-party software since creating one using Netlify might not be the easiest option.\u00a0<em>(Don\u2019t worry; these tools usually offer a\u00a0<a href=\"https:\/\/www.picreel.com\/pricing\/\">free plan<\/a>, so you don\u2019t need to pay anything upfront.)<\/em><\/p>\n<p>In this blog, I\u2019ll share how you can add popups in Netlify through simple steps. Let\u2019s get started.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_Create_a_Popup_in_Netlify_Using_Picreel\"><\/span>How to Create a Popup in Netlify Using Picreel<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>So why Picreel?<\/strong><\/p>\n<p>Well, I wanted a tool that was straightforward, didn\u2019t require complex integrations, and gave me a lot of flexibility. Also, with multiple\u00a0<a href=\"https:\/\/www.picreel.com\/features\/popup-targeting\/\">targeting<\/a>\u00a0options, <a href=\"https:\/\/www.picreel.com\/blog\/mobile-popups\/\">mobile popups<\/a>,\u00a0<a href=\"https:\/\/www.picreel.com\/features\/popup-ab-testing\/\">A\/B testing<\/a>, and many other features \u2013 its free plan is an absolute bargain!<\/p>\n<p>Let\u2019s discuss the steps.<\/p>\n<p><strong>Step 1: Sign Up for Picreel<\/strong><\/p>\n<p>First things first, you&#8217;ll need to\u00a0create a Picreel account. Head over to their website and sign up. They offer a\u00a0free trial, so you can test it out before committing.<\/p>\n<p><strong>Step 2: Create a New Popup<\/strong><\/p>\n<p>Once you\u2019re in the Picreel dashboard, the next step is to create your first popup. Here\u2019s how &#8211;<\/p>\n<ul>\n<li>Go to the\u00a0<strong>\u201cCampaigns\u201d<\/strong>\u00a0menu.<\/li>\n<li>Click the\u00a0<strong>&#8220;+ New Campaign&#8221;<\/strong>\u00a0button.<\/li>\n<li>You\u2019ll be asked to\u00a0<a href=\"https:\/\/www.picreel.com\/templates\/\">select a template<\/a>\u00a0for your popup. You can also start from scratch.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13452 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/10\/PP_PIC_SBS-ExpressionEngine-2.png\" alt=\"Create from scratch\" width=\"1592\" height=\"807\" \/><\/p>\n<p>After selecting your template, you\u2019ll be taken to the customization screen, where you can edit the text, colors, images, and the popup&#8217;s overall layout.<\/p>\n<p><strong>Step 3: Customize Your Popup<\/strong><\/p>\n<p>Picreel&#8217;s drag-and-drop editor makes it easy to customize your popup. You can change the colors, fonts, images, etc., to match your brand.<\/p>\n<h3><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13439 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2023\/06\/PP_PIC_EPPE-G-popup-using-elements.png\" alt=\"Customize Your Popup\" width=\"1600\" height=\"724\" \/><\/h3>\n<p>You get plenty of flexibility here, so don&#8217;t worry if you&#8217;re not a designer. Here are some of the changes that you can make to your popups &#8211;<\/p>\n<ul>\n<li><strong>Edit Text:<\/strong>\u00a0Click on the text elements within the popup to change the wording. Keep the message clear and concise.<\/li>\n<li><strong>Add Images:<\/strong>\u00a0You can upload images or choose from a gallery of stock images within Picreel. Make sure whatever you choose aligns with your branding.<\/li>\n<li><strong>Change Colors &amp; Fonts:<\/strong>\u00a0Use your brand colors to keep everything cohesive. You can change the background, text, and button colors to ensure the popup stands out without clashing with your site design.<\/li>\n<li><strong>Button Links:<\/strong>\u00a0Ensure the call-to-action (CTA) button is linked to the correct page\u2014whether that&#8217;s a signup form, a product page, or elsewhere.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13453 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/10\/PP_PIC_HCPC-Good-news-1-1.png\" alt=\"call-to-action\" width=\"1076\" height=\"657\" \/><\/p>\n<p><strong>Step 4: Set Up Targeting Options<\/strong><\/p>\n<p>Using Picreel, you can be very specific about who sees your popup, when do they see it, and how often.<\/p>\n<p>You can choose from a range of targeting options, including &#8211;<\/p>\n<ul>\n<li><strong>Exit Intent:<\/strong>\u00a0Show the popup when a visitor is about to leave your site.<\/li>\n<li><strong>Time on Page:<\/strong>\u00a0Trigger the popup after a visitor has spent a certain amount of time on your page.<\/li>\n<li><strong>Scroll Depth:<\/strong>\u00a0Display the popup when a visitor scrolls down a certain percentage of the website.<\/li>\n<li><strong>Page Targeting:<\/strong>\u00a0Show the popup on specific pages or URLs.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10786\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/01\/PP_PIC_WHEN-OVERLAY-APPEARSs-min-1.jpg\" alt=\"WHEN OVERLAY APPEARS\" width=\"1885\" height=\"2542\" \/><\/p>\n<p>Experiment with different targeting options to check what works best for your target audience. Next, save your customizations.<\/p>\n<p><strong>Looking for a visual way to understand how each step works?<\/strong>\u00a0Check this video &#8211;<\/p>\n<p><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/J1tBmOnBJEA?si=KlPYEycWehuF3K1E\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><strong>Step 5: Embed HTML Code Inside Netlify<\/strong><\/p>\n<p>Once your popup is ready, Picreel will generate an embed code. This will typically include a few steps &#8211;<\/p>\n<p><strong>1.<\/strong> First, you need to navigate to\u00a0<strong>\u201cInstallation\u201d<\/strong>.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13410\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/09\/PP_PIC_5-saving-se-2.png\" alt=\"saving\" width=\"1600\" height=\"804\" \/><\/p>\n<p><strong>2.<\/strong> Next,\u00a0<strong>copy the code<\/strong>\u00a0by clicking on\u00a0<strong>\u201cCopy Code.\u201d<\/strong><\/p>\n<p><strong>3.<\/strong> Go to your\u00a0<strong>Netlify dashboard<\/strong>\u00a0and select the site where you want to add the popup.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13451\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/10\/Competitor_PIC_PNGQW-Netlify-dashboard-1.png\" alt=\"\" width=\"810\" height=\"529\" \/><\/p>\n<p><em>(If you\u2019re unfamiliar with Netlify, the platform uses Git-based workflows, so you\u2019ll need to push the popup code to your project\u2019s Git repository.)<\/em><\/p>\n<p><strong>4.<\/strong> To embed the popup, you\u2019ll need to\u00a0<strong>open your website\u2019s codebase<\/strong>. Here\u2019s where it gets specific, depending on your setup &#8211;<\/p>\n<ul>\n<li><strong>If you\u2019re using a static site generator<\/strong>\u00a0like Hugo or Jekyll, navigate to the relevant file that controls the layout\u00a0<em>(usually an index.html or layout.html file)<\/em>.<\/li>\n<li><strong>If you\u2019re working with a simple HTML site<\/strong>, just open the main HTML file where you want the popup to appear.<\/li>\n<\/ul>\n<p><strong>5.<\/strong> After embedding the code, commit the changes to your Git repository, and Netlify will automatically trigger a new deployment.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13447 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/10\/Competitor_PIC_PNGQWembedding-the-code-2.png\" alt=\"Deploys\" width=\"810\" height=\"529\" \/><\/p>\n<p><strong>6.<\/strong> Once the deployment is completed, the popup will be live on your site.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13450 size-full\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/10\/Competitor_PIC_PNGQ-deploymente-3.png\" alt=\"Popup is live\" width=\"810\" height=\"529\" \/><\/p>\n<p><strong>? Pro Tip:<\/strong>\u00a0After deployment, visit your site and check if the popup works. While desktop popups may look great, they don\u2019t always translate well to mobile. If you\u2019re using Picreel, use the preview mode to check the appearance on mobile devices.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Wrapping_Up\"><\/span>Wrapping Up<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Creating a popup in Netlify using Picreel is an effective way to improve your site\u2019s engagement. With just a few simple steps, you can design, customize, and embed a popup that fits your goals\u2014whether that\u2019s growing your email list, promoting a special offer, or improving user interaction.<\/p>\n<p>Platforms like Picreel ensure popups never interrupt your viewer\u2019s experience. Take the time to customize your Netlify popup with advanced targeting and design capabilities to see improvements in conversions and user engagement.<\/p>\n<p>And you don\u2019t even need to spend anything. Surprised?<\/p>\n<p>Picreel offers a\u00a0<a href=\"https:\/\/www.picreel.com\/pricing\/\">free plan<\/a>\u00a0with all premium features for small businesses. If you want to scale up in the future, you\u2019ll just need to pay\u00a0$9.99 per month.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I\u2019ve been working with Netlify for a while, and trust me when I say\u2026 I love how it simplifies website hosting! It\u2019s packed with features like continuous deployment, serverless functions, and built-in global CDN support. I think it\u2019s an ideal choice for anyone wanting to focus more on building websites than managing the backend. One&#8230;<\/p>\n","protected":false},"author":26,"featured_media":13448,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[],"class_list":["post-13446","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\/13446","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=13446"}],"version-history":[{"count":3,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/posts\/13446\/revisions"}],"predecessor-version":[{"id":13958,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/posts\/13446\/revisions\/13958"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/media\/13448"}],"wp:attachment":[{"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/media?parent=13446"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/categories?post=13446"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/tags?post=13446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}