{"id":13455,"date":"2024-10-10T06:47:42","date_gmt":"2024-10-10T06:47:42","guid":{"rendered":"https:\/\/www.picreel.com\/blog\/?p=13455"},"modified":"2025-01-28T07:27:37","modified_gmt":"2025-01-28T07:27:37","slug":"hygraph-cms-popup","status":"publish","type":"post","link":"https:\/\/www.picreel.com\/blog\/hygraph-cms-popup\/","title":{"rendered":"How to Create a Popup in Hygraph CMS: A Step-by-Step Guide"},"content":{"rendered":"<p>I\u2019ve been using Hygraph CMS for a while and have built several content-rich websites and apps on it. It\u2019s an API-first headless CMS that allows you to manage content across platforms.<\/p>\n<p>The good thing is that it supports many API integrations, which makes content management seamless. And that also makes embedding popups way easier.<\/p>\n<p>So, you may ask &#8211;\u00a0<strong>\u201cCan I create Hygraph CMS popups?\u201d<\/strong><\/p>\n<p><strong>The answer is yes, but with a small caveat<\/strong>\u2014you\u2019ll need the help of a third-party popup tool. In fact, I was experimenting with one such platform and pretty much liked what I created.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13456\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/10\/PP_PIC_HCPH-Hygraph-CMS-popups-1.png\" alt=\"Hygraph CMS popup\" width=\"1076\" height=\"657\" \/><\/p>\n<p>Looks dope, right? I used\u00a0<a href=\"https:\/\/www.picreel.com\/\">Picreel<\/a>\u00a0to create this. You can use any third-party software to add popups in Hygraph CMS.<\/p>\n<p>Since I use Picreel as my go-to popup builder, I\u2019ll share how you can create your own using it. In the later part of the blog, I\u2019ve shared some reasons why I\u2019d recommend you use Picreel.<\/p>\n<p>Let\u2019s get started.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Create_Popups_in_Hygraph_CMS_Using_Picreel_Popup_Builder\"><\/span>Create Popups in Hygraph CMS Using Picreel Popup Builder<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>I liked Picreel primarily because of its advanced features and cross-platform flexibility. You can create a popup running within minutes without diving too deep into codes. With\u00a0exit-intent technology, <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 different targeting options, it\u2019s a great platform to begin with.<\/p>\n<p>Let\u2019s check the steps now.<\/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 size-full wp-image-13452\" 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<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13459\" src=\"https:\/\/www.picreel.com\/blog\/wp-content\/uploads\/2024\/10\/PP_PIC_HCPH-Customize-Your-Popup-3.png\" alt=\"Customize Your Popup\" width=\"1456\" height=\"612\" \/><\/p>\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 (CTA) button\" 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 your page.<\/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 see what works best for your 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 Hygraph CMS<\/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>.<\/p>\n<p><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. Log in to your Hygraph account<\/strong>\u00a0and navigate to the content model where you want the popup to appear.<\/p>\n<p>Hygraph provides an option to embed external HTML elements within their rich text field, which is perfect for our use case.<\/p>\n<p><strong>4.<\/strong> Once you\u2019re in the rich text editor for your content,\u00a0<strong>switch to the &#8220;HTML&#8221; view<\/strong>\u00a0(this option is in the toolbar) and paste the Picreel embed code. Save the changes.<\/p>\n<p><strong>5.<\/strong> Once the code is embedded, publish the changes in Hygraph. The popup should now appear according to the targeting settings you\u2019ve configured in Picreel.<\/p>\n<p><strong>? Pro Tip:<\/strong>\u00a0Test the popup across different devices to ensure it\u2019s displaying correctly. Popups can sometimes behave differently on mobile than on desktop, so it\u2019s always good to check.<\/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 Hygraph CMS popups using a third-party tool such as Picreel is a smooth process, even if it involves embedding HTML or JavaScript into your content. I find Picreel\u2019s combination of ease of use, customizability, and advanced targeting features a perfect match for Hygraph CMS.<\/p>\n<p>This method has not only helped me grow my email list but also improved the overall interaction rate on my site. And you don\u2019t even need to spend anything. Don\u2019t believe me?<\/p>\n<p>Picreel offers a\u00a0<a href=\"https:\/\/www.picreel.com\/pricing\/\">free plan<\/a>\u00a0that comes with all premium features. Even if you want to scale up in the future, you\u2019ll just need to pay\u00a0$9.99 per month.<\/p>\n<p>So, give it a try. Experiment with different designs and targeting options, and don\u2019t forget to monitor the results.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I\u2019ve been using Hygraph CMS for a while and have built several content-rich websites and apps on it. It\u2019s an API-first headless CMS that allows you to manage content across platforms. The good thing is that it supports many API integrations, which makes content management seamless. And that also makes embedding popups way easier. So,&#8230;<\/p>\n","protected":false},"author":26,"featured_media":13458,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[],"class_list":["post-13455","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\/13455","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=13455"}],"version-history":[{"count":2,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/posts\/13455\/revisions"}],"predecessor-version":[{"id":13964,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/posts\/13455\/revisions\/13964"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/media\/13458"}],"wp:attachment":[{"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/media?parent=13455"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/categories?post=13455"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.picreel.com\/blog\/wp-json\/wp\/v2\/tags?post=13455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}