{"id":96694,"date":"2020-07-14T06:43:30","date_gmt":"2020-07-14T06:43:30","guid":{"rendered":"https:\/\/mailrelay.com\/blog\/2026\/09\/29\/tips-for-creating-the-perfect-html-popup-for-your-website\/"},"modified":"2026-09-29T16:28:16","modified_gmt":"2026-09-29T16:28:16","slug":"tips-for-creating-the-perfect-html-popup-for-your-website","status":"publish","type":"post","link":"https:\/\/mailrelay.com\/en\/blog\/2020\/07\/14\/tips-for-creating-the-perfect-html-popup-for-your-website\/","title":{"rendered":"Tips for creating the perfect HTML popup for your website"},"content":{"rendered":"<p>A common mistake is thinking that simply adding a popup to your site means you&#8217;ve already won, but in reality there are certain ways to squeeze out its full potential, <strong>something few people achieve.<\/strong><\/p>\n\n<h2>The popup dilemma<\/h2>\n<p>\u25cf Some people claim that these plugins do nothing but harm the User Experience, for the simple reason that they are very annoying, appear without warning and only interrupt the visit.<\/p>\n<p>\u25cf On the other hand, some say they are one of the best ways to generate conversions on a website and that, on the contrary, they add value for users.<\/p>\n<p><strong>So who&#8217;s right?<\/strong>\u2014let&#8217;s look at the data.<\/p>\n<h3>1. 98% of visitors leave an average website without taking any valuable action<\/h3>\n<p>Source: <a href=\"https:\/\/www.privy.com\/blog\/marketing-funnel\" target=\"_blank\" rel=\"noopener\">Privy<\/a><\/p>\n<p>It&#8217;s fine to get visitors, but <strong>it&#8217;s not much use if they only come in to look around<\/strong>. Without a tool like a form or a popup, you won&#8217;t be able to convert them the way you expect.<\/p>\n<h3>2. More than 23 million visitors became subscribers in just 2 years, thanks to Sumo&#8217;s popups<\/h3>\n<p>Source: Sumo<\/p>\n<p>That&#8217;s a good sign, considering that the numbers come from just one tool.<\/p>\n<p>This confirms that popups work, so <strong>why doesn&#8217;t Google like finding them when crawling a website?<\/strong> Later I&#8217;ll explain the thin line between a useful popup and a useless one.<\/p>\n<h3>3. The average conversion rate of popups is 3.09%, but it can reach up to 40%<\/h3>\n<p>Source: Sumo<\/p>\n<p>The first number isn&#8217;t that bad, but we&#8217;re not here to be part of the average, <strong>and later on you&#8217;ll learn how to reach that 40%.<\/strong><\/p>\n<p>As Sean Bestor explains, HTML popups work; <strong>the problem\/opportunity is that<\/strong> many people don&#8217;t know how to make them work.<\/p>\n<p><a href=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2016\/10\/plugin-popup.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13405 size-full\" title=\"Tips to improve the conversion of an HTML popup\" src=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2016\/10\/plugin-popup.png\" alt=\"Tips to improve the conversion of an HTML popup\" width=\"630\" height=\"340\" srcset=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2016\/10\/plugin-popup.png 630w, https:\/\/mailrelay.com\/wp-content\/uploads\/2016\/10\/plugin-popup-300x162.png 300w, https:\/\/mailrelay.com\/wp-content\/uploads\/2016\/10\/plugin-popup-110x59.png 110w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><\/a><\/p>\n<h2>Tips to improve the conversion of an HTML popup<\/h2>\n<h3>1. The highest-converting popups don&#8217;t appear immediately<\/h3>\n<p>Imagine you want to walk into a physical store, you can&#8217;t really see what&#8217;s inside yet, you don&#8217;t even know whether you need anything, and as you approach the door one of those pushy salespeople shows up.<\/p>\n<p><em>How do you expect users to convert when they haven&#8217;t even had a good look at what you offer?<\/em><\/p>\n<p>At best, most people will ignore the message and <strong>desperately look for the close button.<\/strong><\/p>\n<p>Sumo&#8217;s research found that among the best-performing popups,<strong> only 8% appeared before the 4-second mark.<\/strong><\/p>\n<p>This also applies to push notifications: most sites offer to send you notifications when you haven&#8217;t even read a little about what the page is about.<\/p>\n<p><em>So when is a good time? The answer we all hate: it depends.<\/em><\/p>\n<p>It has to be long enough<strong> for the user to see that your content is worth it.<\/strong><\/p>\n<p>For example, the following HTML popup appears on a book website 15 seconds after the user arrives:<\/p>\n<p><a href=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/conquer-your-marriage-popup.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-27334\" title=\"popup example\" src=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/conquer-your-marriage-popup.jpg\" alt=\"popup example\" width=\"630\" height=\"339\" srcset=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/conquer-your-marriage-popup.jpg 695w, https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/conquer-your-marriage-popup-300x161.jpg 300w, https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/conquer-your-marriage-popup-110x59.jpg 110w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><\/a><\/p>\n<p>That&#8217;s enough time for the user to look over the information a little, but the key here is that the popup <strong>offers the first chapter of the book the user is interested in<\/strong>, completely free.<\/p>\n<p>In other words, it appears at the best moment, offering something of value to the visitor, and if they&#8217;re interested in the book, they won&#8217;t let the opportunity pass.<\/p>\n<p><strong>This gives that popup a conversion rate of 38.4%.<\/strong><\/p>\n<p>That&#8217;s the magic of context and timing. Keep reading, because I&#8217;ll soon explain what context has to do with it.<\/p>\n<p>Now, you&#8217;ve surely seen popups that appear immediately on big sites like NeilPatel or DolceGabbana. <strong>Do they contradict our data?<\/strong><\/p>\n<p>No. The explanation is simple: these have become high-value brands more than mere sites, so many of the users who visit them already know the person or brand and trust them so much that they have no problem subscribing right from the start.<\/p>\n<h3>2. The best popups contain impactful text<\/h3>\n<p>The internet is so saturated with information and content that it&#8217;s all starting to blur together, which is why <strong>capturing users&#8217; attention is increasingly difficult.<\/strong><\/p>\n<p>But there are ways to grab attention by using certain unexpected words.<\/p>\n<p>To do that, you can&#8217;t make the same old popup as always. It&#8217;s like walking up to a pretty girl: of course you can&#8217;t open with the typical line she has surely heard thousands of times.<\/p>\n<p>Let&#8217;s look at an example:<\/p>\n<p><a href=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/ejemplo-popup-optin-monster.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-27335\" title=\"OptinMonster popup example\" src=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/ejemplo-popup-optin-monster.jpg\" alt=\"OptinMonster popup example\" width=\"630\" height=\"408\" srcset=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/ejemplo-popup-optin-monster.jpg 814w, https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/ejemplo-popup-optin-monster-300x194.jpg 300w, https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/ejemplo-popup-optin-monster-768x497.jpg 768w, https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/ejemplo-popup-optin-monster-110x71.jpg 110w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><\/a><\/p>\n<p>This popup is on the OptinMonster site (another HTML popup creation tool) and appears when you try to leave.<\/p>\n<p>The key to this example is telling the user <strong>what they&#8217;ll have to face if they don&#8217;t stay on the site. Wow, that sounded worse than I thought.<\/strong><\/p>\n<p>But it&#8217;s real: studies show that human beings pay much more attention <a href=\"https:\/\/franciscotorreblanca.es\/la-aversion-a-la-perdida-en-marketing\/\" target=\"_blank\" rel=\"noopener\">when we&#8217;re about to lose something<\/a>. <strong>And this is something big brands use to do marketing, not just with popups.<\/strong><\/p>\n<p>On the other hand. Get to the point: if you have little time to captivate someone in person, online you have even less.<\/p>\n<p><strong>There&#8217;s no time for filler text<\/strong>, like &#8220;Subscribe to our blog and you&#8217;ll receive&#8230;&#8221;.<\/p>\n<p>If you have a discount, say you have a discount, and if, for example, you have a marketing or business book or course, don&#8217;t just say that you have it: <strong>mention what results the visitor can get<\/strong> if they buy or take it.<\/p>\n<p>Users are overwhelmed by so much content; in fact, <a href=\"https:\/\/www.nngroup.com\/articles\/how-little-do-users-read\/\" target=\"_blank\" rel=\"noopener\">according to Nielsen NG<\/a>, the average person reads only 28% of a blog post even if it looks very thorough.<\/p>\n<p>Don&#8217;t clutter the interface with a complex popup; remember that less is more. Of course, as with other types of ads or promotions, message clarity also matters.<\/p>\n<p>In conclusion, show an impactful message <strong>using as few words as possible.<\/strong><\/p>\n<h3>3. Should you use an image and a deadline?<\/h3>\n<p>You may be wondering whether adding an image or a countdown to create a sense of urgency inside a popup really works or not.<\/p>\n<p>We have data that gives us a solid answer.<\/p>\n<p><a href=\"https:\/\/sleeknote.com\/blog\/popup-statistics\" target=\"_blank\" rel=\"noopener\">In a study by Sleeknote<\/a>, it was found that popups with an image <strong>had a higher conversion rate than those without one<\/strong>. Specifically, a rate of 3.8% vs. 2.07%.<\/p>\n<p>The neuroscientific hypothesis behind this is that, as many know, human beings are visual, and of course we&#8217;re going to be more attracted to graphics than to text alone.<\/p>\n<p>Of course, before you rush off to add an image, <strong>it&#8217;s advisable to run an A\/B test<\/strong> to compare the results on your own site, since not every popup needs an image, and not all images have the same impact.<\/p>\n<p>On the other hand, there are countdowns, elements that make it clear to the user that your offer is limited and will soon disappear.<\/p>\n<p>As I mentioned before, it&#8217;s an old technique that sharpens a person&#8217;s attention,<strong> because of the feeling of soon losing something.<\/strong><\/p>\n<p>The same study found that popups with a limited time to act <strong>converted far more than those that didn&#8217;t<\/strong> create a sense of urgency. Specifically, 8.07% vs. 3.79%.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-27337\" title=\"popup with countdown\" src=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/popup-countdown.jpg\" alt=\"popup with countdown\" width=\"630\" height=\"510\" srcset=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/popup-countdown.jpg 780w, https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/popup-countdown-300x243.jpg 300w, https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/popup-countdown-768x621.jpg 768w, https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/popup-countdown-110x89.jpg 110w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><\/p>\n<h3>4. The best popups offer something extremely valuable<\/h3>\n<p>Unless you&#8217;re a big international brand, asking people to subscribe just to receive offers or content won&#8217;t be very appealing to users.<\/p>\n<p>You may get the emails of loyal customers or people who already know you, but nothing with a big impact. And that&#8217;s because <strong>instead of asking, you have to give.<\/strong><\/p>\n<p>Remember the popup that offered the first chapter of the book the user was interested in?<\/p>\n<p>I&#8217;m sure many people think the most logical thing is to offer a free mini trial or a discount, and<strong> they&#8217;re right.<\/strong><\/p>\n<p><a href=\"https:\/\/www.nngroup.com\/articles\/exit-intent-good-ux\/\" target=\"_blank\" rel=\"noopener\">The consultancy Nielsen NG<\/a> says that popups become <a href=\"https:\/\/mailrelay.com\/en\/blog\/2020\/07\/07\/discount-coupon-popup\/\" target=\"_blank\" rel=\"noopener\">conversion machines when they offer a discount<\/a>, especially when the user tries to leave, a tip that the Sumo team also endorses.<\/p>\n<p>But what happens when <strong>you can&#8217;t afford to offer a discount<\/strong> or a free trial?<\/p>\n<p>This is a very competitive game, and of course big companies can afford to give away a bit of money in order to win customers.<\/p>\n<p>And if you want to be competitive, you should try to offer a discount. However, you can use strategies so you don&#8217;t take as big a hit, such as raising the price slightly, offering the discount only from a certain number of orders, or selling the user add-ons to the initial product.<\/p>\n<p>But even so, there are other benefits <strong>that also achieve huge conversion rates.<\/strong><\/p>\n<p>Offering ebooks or research reports is what many bloggers use to get emails, but be careful: for them to really work, <strong>they must be epic content<\/strong>. For example, information about how a company went from 0 to being worth 50 million dollars can grab attention.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-27338\" title=\"Quicksprout popup\" src=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/quicksprout-popup.jpg\" alt=\"Quicksprout popup\" width=\"630\" height=\"461\" srcset=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/quicksprout-popup.jpg 714w, https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/quicksprout-popup-300x219.jpg 300w, https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/quicksprout-popup-110x80.jpg 110w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><\/p>\n<p>For example, here a webinar is offered that explains how to get a large volume of traffic without spending any money on ads. Very good.<\/p>\n<p>Unfortunately, many bloggers offer content that always looks alike, so much so that even if they didn&#8217;t ask for your email, you wouldn&#8217;t download it.<\/p>\n<p>Nobody wants to receive ads in their inbox, <strong>so you should make an offer that&#8217;s practically irresistible.<\/strong><\/p>\n<h3>5. The highest-converting popups are the ones that fit the context<\/h3>\n<p>It&#8217;s no secret that an ad for bed sheets works better in a mattress store than in a grocery store.<\/p>\n<p>That seems very obvious, but the problem with popups that get mediocre results is that <strong>they aren&#8217;t related to the specific page<\/strong> where they&#8217;re shown.<\/p>\n<p>Maybe they&#8217;re related in a general way, i.e., if it&#8217;s a cooking blog, an HTML popup offering a guide with the best cooking tips should work, right?<\/p>\n<p>Yes, but it will still be mediocre. What I&#8217;m talking about is unmatched context.<\/p>\n<p>Let&#8217;s remember that a large part of the user experience success on sites like YouTube, Facebook or Amazon is <strong>how impressive their algorithms are<\/strong> at recommending content or products based on what you&#8217;re viewing or on your interests.<\/p>\n<p>Let&#8217;s go back to the cooking blog case, and imagine that the business behind it is selling appliances, utensils and cooking ingredients from other companies.<\/p>\n<p>And that the content the user is currently viewing is about <em>how to prepare a turkey for Christmas dinner.<\/em><\/p>\n<p>Beyond a popup that just invites the user to subscribe to the blog, <strong>you can offer the following:<\/strong><\/p>\n<p><strong>Other content:<\/strong><\/p>\n<p>&#8211; The most in-demand dishes for Christmas dinner<\/p>\n<p>&#8211; Tips for a memorable Christmas dinner<\/p>\n<p><em>Even if the blog is local:<\/em><\/p>\n<p>&#8211; The best places to buy everything for Christmas dinner in Mexico City<\/p>\n<p>I put this first because not every user is open to subscribing right away, <strong>but they are open to seeing what else you offer<\/strong>, if it complements their need.<\/p>\n<p><a href=\"https:\/\/www.nngroup.com\/articles\/related-content-pageviews\/\" target=\"_blank\" rel=\"noopener\">As Nielsen NG says<\/a>, recommendation systems can work very well, as long as they make use of context.<\/p>\n<p>But<strong> if we wanted to win a subscriber<\/strong>, we could offer a guide in both text and video on how to prepare the perfect Christmas dinner.<\/p>\n<p>This is an offer that fully complements the user&#8217;s current need.<\/p>\n<p>According to Sumo&#8217;s research, maintaining context is what lets a few popups <strong>achieve conversion rates above 40%.<\/strong><\/p>\n<p>Let&#8217;s look at this great example:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-27340\" title=\"Squarespace popup\" src=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/popup-squarespace.jpg\" alt=\"Squarespace popup\" width=\"630\" height=\"343\" srcset=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/popup-squarespace.jpg 711w, https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/popup-squarespace-300x163.jpg 300w, https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/popup-squarespace-110x60.jpg 110w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><\/p>\n<p>It doesn&#8217;t have the best design, but it appears right on a review of the Squarespace software, and the whole popup relates to that tool. Excellent context.<\/p>\n<p>The problem is that too many sites create the typical subscription popup and set it to appear on as many pages of their site as possible. Why do they do it?<\/p>\n<p>By now anyone can see that a Facebook ad can be up to 15 times more efficient than one on national TV, <strong>thanks to segmentation.<\/strong><\/p>\n<p>To improve context even further, nowadays popups can be segmented not only by page, but by factors such as:<\/p>\n<p>&#8211; Which page the visitor comes from<\/p>\n<p>&#8211; Their geographic location<\/p>\n<p>&#8211; The device they use<\/p>\n<p>&#8211; Whether the user is new or returning<\/p>\n<p>And many more<\/p>\n<p>With this you can <strong>create a special popup<\/strong> for a specific audience, which can dramatically increase the conversion rate.<\/p>\n<p>Now, if most sites don&#8217;t do this, it&#8217;s mainly because it takes more time and effort than automating a single general popup for an entire website. It&#8217;s time to take advantage of their negligence.<\/p>\n<h2>Which tool should you use to create HTML popups?<\/h2>\n<p>If you want to take action, this is a good question. Although we&#8217;ve mentioned some throughout this content, there&#8217;s something better.<\/p>\n<p>Here&#8217;s the top list of <strong>the best popup creation tools in the world<\/strong>, based not on one person&#8217;s opinion but on an algorithm that considers a series of factors to rate them as efficiently as possible. <a href=\"https:\/\/www.todopatuweb.net\/news\/crear-popups-html-con-o-sin-plugins\" target=\"_blank\" rel=\"noopener\">Click to go there<\/a>.<\/p>\n<p>You&#8217;ll not only learn the name of each tool, <strong>you&#8217;ll be able to see live examples of popups<\/strong> created with them, learn their pros and cons and their prices, and learn from scratch how to use them.<\/p>\n<p>Finally, to make the most of the list of prospects you generate thanks to your popups, you&#8217;ll need an <a href=\"https:\/\/mailrelay.com\/en\/\" target=\"_blank\" rel=\"noopener\">email marketing tool<\/a>, and this is where Mailrelay comes in: create your free account in a few steps.<\/p>\n<p>Well, I sincerely hope this content has been very useful to you, and I&#8217;d be very happy if you shared it. Remember that you can leave your questions and opinions in the comments. Until next time.<\/p>\n<p>If you&#8217;re looking for less intrusive alternatives, you can also rely on <a href=\"https:\/\/mailrelay.com\/en\/glossary\/push-notifications\/\" target=\"_blank\" rel=\"noopener\">push notifications<\/a>, and in both cases take good care of your <a href=\"https:\/\/mailrelay.com\/en\/glossary\/call-to-action-cta\/\" target=\"_blank\" rel=\"noopener\">call to action (CTA)<\/a>.<\/p>\n<p><a href=\"https:\/\/www.todopatuweb.net\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-27345 size-full\" title=\"Arturo Morlan\" src=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/arturo-morlan.png\" alt=\"Arturo Morlan\" width=\"630\" height=\"250\" srcset=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/arturo-morlan.png 630w, https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/arturo-morlan-300x119.png 300w, https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/arturo-morlan-110x44.png 110w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A common mistake is thinking that simply adding a popup to your site means you&#8217;ve already won, but in reality there are certain ways to squeeze out its full potential, something few people achieve. The popup dilemma \u25cf Some people claim that these plugins do nothing but harm the User Experience, for the simple reason [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":40892,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[581,881],"tags":[],"class_list":["post-96694","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing-2","category-marketing-tools-and-software"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Create Perfect HTML Popups for Your Website [5 Tips] | Mailrelay<\/title>\n<meta name=\"description\" content=\"\u25ba Do you know the tips for creating an HTML popup? \u27a1\ufe0f At Mailrelay we show you how to do this and how to add a form to a web page\u2705\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mailrelay.com\/en\/blog\/2020\/07\/14\/tips-for-creating-the-perfect-html-popup-for-your-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Perfect HTML Popups for Your Website [5 Tips] | Mailrelay\" \/>\n<meta property=\"og:description\" content=\"\u25ba Do you know the tips for creating an HTML popup? \u27a1\ufe0f At Mailrelay we show you how to do this and how to add a form to a web page\u2705\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mailrelay.com\/en\/blog\/2020\/07\/14\/tips-for-creating-the-perfect-html-popup-for-your-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Mailrelay\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Mailrelay\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-14T06:43:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-29T16:28:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/Trucos-para-crear-el-popup-HTML-perfecto-para-tu-web.png\" \/>\n\t<meta property=\"og:image:width\" content=\"630\" \/>\n\t<meta property=\"og:image:height\" content=\"340\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mailrelay\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mailrelay\" \/>\n<meta name=\"twitter:site\" content=\"@mailrelay\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mailrelay\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/blog\\\/2020\\\/07\\\/14\\\/tips-for-creating-the-perfect-html-popup-for-your-website\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/blog\\\/2020\\\/07\\\/14\\\/tips-for-creating-the-perfect-html-popup-for-your-website\\\/\"},\"author\":{\"name\":\"Mailrelay\",\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/#\\\/schema\\\/person\\\/355071c9f6e00fa8c8731ac93e0aa487\"},\"headline\":\"Tips for creating the perfect HTML popup for your website\",\"datePublished\":\"2020-07-14T06:43:30+00:00\",\"dateModified\":\"2026-09-29T16:28:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/blog\\\/2020\\\/07\\\/14\\\/tips-for-creating-the-perfect-html-popup-for-your-website\\\/\"},\"wordCount\":2280,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/blog\\\/2020\\\/07\\\/14\\\/tips-for-creating-the-perfect-html-popup-for-your-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/mailrelay.com\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Trucos-para-crear-el-popup-HTML-perfecto-para-tu-web.png\",\"articleSection\":[\"marketing\",\"Marketing tools and software\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/mailrelay.com\\\/en\\\/blog\\\/2020\\\/07\\\/14\\\/tips-for-creating-the-perfect-html-popup-for-your-website\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/blog\\\/2020\\\/07\\\/14\\\/tips-for-creating-the-perfect-html-popup-for-your-website\\\/\",\"url\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/blog\\\/2020\\\/07\\\/14\\\/tips-for-creating-the-perfect-html-popup-for-your-website\\\/\",\"name\":\"Create Perfect HTML Popups for Your Website [5 Tips] | Mailrelay\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/blog\\\/2020\\\/07\\\/14\\\/tips-for-creating-the-perfect-html-popup-for-your-website\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/blog\\\/2020\\\/07\\\/14\\\/tips-for-creating-the-perfect-html-popup-for-your-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/mailrelay.com\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Trucos-para-crear-el-popup-HTML-perfecto-para-tu-web.png\",\"datePublished\":\"2020-07-14T06:43:30+00:00\",\"dateModified\":\"2026-09-29T16:28:16+00:00\",\"description\":\"\u25ba Do you know the tips for creating an HTML popup? \u27a1\ufe0f At Mailrelay we show you how to do this and how to add a form to a web page\u2705\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/blog\\\/2020\\\/07\\\/14\\\/tips-for-creating-the-perfect-html-popup-for-your-website\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/mailrelay.com\\\/en\\\/blog\\\/2020\\\/07\\\/14\\\/tips-for-creating-the-perfect-html-popup-for-your-website\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/blog\\\/2020\\\/07\\\/14\\\/tips-for-creating-the-perfect-html-popup-for-your-website\\\/#primaryimage\",\"url\":\"https:\\\/\\\/mailrelay.com\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Trucos-para-crear-el-popup-HTML-perfecto-para-tu-web.png\",\"contentUrl\":\"https:\\\/\\\/mailrelay.com\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Trucos-para-crear-el-popup-HTML-perfecto-para-tu-web.png\",\"width\":630,\"height\":340},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/blog\\\/2020\\\/07\\\/14\\\/tips-for-creating-the-perfect-html-popup-for-your-website\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tips for creating the perfect HTML popup for your website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/\",\"name\":\"Mailrelay\",\"description\":\"Mailrelay.com - Email Marketing Software\",\"publisher\":{\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/#organization\",\"name\":\"Mailrelay\",\"url\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/mailrelay.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/mailrelay-logo.jpg\",\"contentUrl\":\"https:\\\/\\\/mailrelay.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/mailrelay-logo.jpg\",\"width\":613,\"height\":291,\"caption\":\"Mailrelay\"},\"image\":{\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Mailrelay\\\/\",\"https:\\\/\\\/x.com\\\/mailrelay\",\"https:\\\/\\\/www.youtube.com\\\/mailrelay-email-marketing\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/#\\\/schema\\\/person\\\/355071c9f6e00fa8c8731ac93e0aa487\",\"name\":\"Mailrelay\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/871548d8ea792b1be4dca815f1997730a5a337670dbe077351e8e02f813d2b58?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/871548d8ea792b1be4dca815f1997730a5a337670dbe077351e8e02f813d2b58?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/871548d8ea792b1be4dca815f1997730a5a337670dbe077351e8e02f813d2b58?s=96&d=mm&r=g\",\"caption\":\"Mailrelay\"},\"url\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/blog\\\/author\\\/mailrelay\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create Perfect HTML Popups for Your Website [5 Tips] | Mailrelay","description":"\u25ba Do you know the tips for creating an HTML popup? \u27a1\ufe0f At Mailrelay we show you how to do this and how to add a form to a web page\u2705","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mailrelay.com\/en\/blog\/2020\/07\/14\/tips-for-creating-the-perfect-html-popup-for-your-website\/","og_locale":"en_US","og_type":"article","og_title":"Create Perfect HTML Popups for Your Website [5 Tips] | Mailrelay","og_description":"\u25ba Do you know the tips for creating an HTML popup? \u27a1\ufe0f At Mailrelay we show you how to do this and how to add a form to a web page\u2705","og_url":"https:\/\/mailrelay.com\/en\/blog\/2020\/07\/14\/tips-for-creating-the-perfect-html-popup-for-your-website\/","og_site_name":"Mailrelay","article_publisher":"https:\/\/www.facebook.com\/Mailrelay\/","article_published_time":"2020-07-14T06:43:30+00:00","article_modified_time":"2026-09-29T16:28:16+00:00","og_image":[{"width":630,"height":340,"url":"https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/Trucos-para-crear-el-popup-HTML-perfecto-para-tu-web.png","type":"image\/png"}],"author":"Mailrelay","twitter_card":"summary_large_image","twitter_creator":"@mailrelay","twitter_site":"@mailrelay","twitter_misc":{"Written by":"Mailrelay","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/mailrelay.com\/en\/blog\/2020\/07\/14\/tips-for-creating-the-perfect-html-popup-for-your-website\/#article","isPartOf":{"@id":"https:\/\/mailrelay.com\/en\/blog\/2020\/07\/14\/tips-for-creating-the-perfect-html-popup-for-your-website\/"},"author":{"name":"Mailrelay","@id":"https:\/\/mailrelay.com\/en\/#\/schema\/person\/355071c9f6e00fa8c8731ac93e0aa487"},"headline":"Tips for creating the perfect HTML popup for your website","datePublished":"2020-07-14T06:43:30+00:00","dateModified":"2026-09-29T16:28:16+00:00","mainEntityOfPage":{"@id":"https:\/\/mailrelay.com\/en\/blog\/2020\/07\/14\/tips-for-creating-the-perfect-html-popup-for-your-website\/"},"wordCount":2280,"commentCount":0,"publisher":{"@id":"https:\/\/mailrelay.com\/en\/#organization"},"image":{"@id":"https:\/\/mailrelay.com\/en\/blog\/2020\/07\/14\/tips-for-creating-the-perfect-html-popup-for-your-website\/#primaryimage"},"thumbnailUrl":"https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/Trucos-para-crear-el-popup-HTML-perfecto-para-tu-web.png","articleSection":["marketing","Marketing tools and software"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/mailrelay.com\/en\/blog\/2020\/07\/14\/tips-for-creating-the-perfect-html-popup-for-your-website\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/mailrelay.com\/en\/blog\/2020\/07\/14\/tips-for-creating-the-perfect-html-popup-for-your-website\/","url":"https:\/\/mailrelay.com\/en\/blog\/2020\/07\/14\/tips-for-creating-the-perfect-html-popup-for-your-website\/","name":"Create Perfect HTML Popups for Your Website [5 Tips] | Mailrelay","isPartOf":{"@id":"https:\/\/mailrelay.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mailrelay.com\/en\/blog\/2020\/07\/14\/tips-for-creating-the-perfect-html-popup-for-your-website\/#primaryimage"},"image":{"@id":"https:\/\/mailrelay.com\/en\/blog\/2020\/07\/14\/tips-for-creating-the-perfect-html-popup-for-your-website\/#primaryimage"},"thumbnailUrl":"https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/Trucos-para-crear-el-popup-HTML-perfecto-para-tu-web.png","datePublished":"2020-07-14T06:43:30+00:00","dateModified":"2026-09-29T16:28:16+00:00","description":"\u25ba Do you know the tips for creating an HTML popup? \u27a1\ufe0f At Mailrelay we show you how to do this and how to add a form to a web page\u2705","breadcrumb":{"@id":"https:\/\/mailrelay.com\/en\/blog\/2020\/07\/14\/tips-for-creating-the-perfect-html-popup-for-your-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mailrelay.com\/en\/blog\/2020\/07\/14\/tips-for-creating-the-perfect-html-popup-for-your-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mailrelay.com\/en\/blog\/2020\/07\/14\/tips-for-creating-the-perfect-html-popup-for-your-website\/#primaryimage","url":"https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/Trucos-para-crear-el-popup-HTML-perfecto-para-tu-web.png","contentUrl":"https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/Trucos-para-crear-el-popup-HTML-perfecto-para-tu-web.png","width":630,"height":340},{"@type":"BreadcrumbList","@id":"https:\/\/mailrelay.com\/en\/blog\/2020\/07\/14\/tips-for-creating-the-perfect-html-popup-for-your-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mailrelay.com\/en\/"},{"@type":"ListItem","position":2,"name":"Tips for creating the perfect HTML popup for your website"}]},{"@type":"WebSite","@id":"https:\/\/mailrelay.com\/en\/#website","url":"https:\/\/mailrelay.com\/en\/","name":"Mailrelay","description":"Mailrelay.com - Email Marketing Software","publisher":{"@id":"https:\/\/mailrelay.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mailrelay.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/mailrelay.com\/en\/#organization","name":"Mailrelay","url":"https:\/\/mailrelay.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mailrelay.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/mailrelay.com\/wp-content\/uploads\/2019\/05\/mailrelay-logo.jpg","contentUrl":"https:\/\/mailrelay.com\/wp-content\/uploads\/2019\/05\/mailrelay-logo.jpg","width":613,"height":291,"caption":"Mailrelay"},"image":{"@id":"https:\/\/mailrelay.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Mailrelay\/","https:\/\/x.com\/mailrelay","https:\/\/www.youtube.com\/mailrelay-email-marketing"]},{"@type":"Person","@id":"https:\/\/mailrelay.com\/en\/#\/schema\/person\/355071c9f6e00fa8c8731ac93e0aa487","name":"Mailrelay","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/871548d8ea792b1be4dca815f1997730a5a337670dbe077351e8e02f813d2b58?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/871548d8ea792b1be4dca815f1997730a5a337670dbe077351e8e02f813d2b58?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/871548d8ea792b1be4dca815f1997730a5a337670dbe077351e8e02f813d2b58?s=96&d=mm&r=g","caption":"Mailrelay"},"url":"https:\/\/mailrelay.com\/en\/blog\/author\/mailrelay\/"}]}},"uagb_featured_image_src":{"full":["https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/Trucos-para-crear-el-popup-HTML-perfecto-para-tu-web.png",630,340,false],"thumbnail":["https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/Trucos-para-crear-el-popup-HTML-perfecto-para-tu-web-150x150.png",150,150,true],"medium":["https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/Trucos-para-crear-el-popup-HTML-perfecto-para-tu-web-300x162.png",300,162,true],"medium_large":["https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/Trucos-para-crear-el-popup-HTML-perfecto-para-tu-web.png",630,340,false],"large":["https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/Trucos-para-crear-el-popup-HTML-perfecto-para-tu-web.png",630,340,false],"1536x1536":["https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/Trucos-para-crear-el-popup-HTML-perfecto-para-tu-web.png",630,340,false],"2048x2048":["https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/Trucos-para-crear-el-popup-HTML-perfecto-para-tu-web.png",630,340,false],"testimonials":["https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/Trucos-para-crear-el-popup-HTML-perfecto-para-tu-web-110x59.png",110,59,true],"author-image":["https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/Trucos-para-crear-el-popup-HTML-perfecto-para-tu-web.png",60,32,false],"yarpp-thumbnail":["https:\/\/mailrelay.com\/wp-content\/uploads\/2020\/07\/Trucos-para-crear-el-popup-HTML-perfecto-para-tu-web.png",120,65,false]},"uagb_author_info":{"display_name":"Mailrelay","author_link":"https:\/\/mailrelay.com\/en\/blog\/author\/mailrelay\/"},"uagb_comment_info":0,"uagb_excerpt":"A common mistake is thinking that simply adding a popup to your site means you&#8217;ve already won, but in reality there are certain ways to squeeze out its full potential, something few people achieve. The popup dilemma \u25cf Some people claim that these plugins do nothing but harm the User Experience, for the simple reason&hellip;","_links":{"self":[{"href":"https:\/\/mailrelay.com\/en\/wp-json\/wp\/v2\/posts\/96694","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mailrelay.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mailrelay.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mailrelay.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mailrelay.com\/en\/wp-json\/wp\/v2\/comments?post=96694"}],"version-history":[{"count":3,"href":"https:\/\/mailrelay.com\/en\/wp-json\/wp\/v2\/posts\/96694\/revisions"}],"predecessor-version":[{"id":96719,"href":"https:\/\/mailrelay.com\/en\/wp-json\/wp\/v2\/posts\/96694\/revisions\/96719"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mailrelay.com\/en\/wp-json\/wp\/v2\/media\/40892"}],"wp:attachment":[{"href":"https:\/\/mailrelay.com\/en\/wp-json\/wp\/v2\/media?parent=96694"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mailrelay.com\/en\/wp-json\/wp\/v2\/categories?post=96694"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mailrelay.com\/en\/wp-json\/wp\/v2\/tags?post=96694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}