--- title: How to: Create Popups slug: how-to-create-popups docTags: createdAt: 2025-12-10T19:34:22.527Z --- ## Overview Popups and alerts are powerful, high-visibility tools in the Storagely WebBuilder that allow you to announce important updates, promote sales or special offers, collect leads and emails, provide location-specific information, and display time-sensitive alerts. With Storagely, popups are **fully customizable**, can be displayed **only on specific pages**, and can be triggered by various **user behaviors**—including timing delays, scroll depth, exit intent, or interaction. ## Navigate to the Editor - Open your Storagely Dashboard. - Navigate to the **Storage Website** tab and select "**My Websites**" ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/a8Ivt5LzFfEKduO7zwW8X_my-websites.png" size="26" width="388" height="559" position="flex-start" darkWidth="388" darkHeight="559" showCaption="false"} - Select the website you want to edit from the list ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/UZmYLkF3lgF9_8a3B1bB7_choose-website.png" size="72" width="1856" height="806" position="flex-start" darkWidth="1856" darkHeight="806" showCaption="false"} ## Create or Edit a Popup ### Access Your Popups - From the **Storagely Website Editor**, select the website you want to manage. ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/PHMohnROgpKtIdRCJACtz_choose-website.png" size="78" width="1856" height="806" position="flex-start" darkWidth="1856" darkHeight="806" showCaption="false"} - In the top-left corner, click the **CMS icon**. ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/wQE60jszgQviXy2FSuYdc_.blob" size="10" width="51" height="63" position="flex-start" darkWidth="51" darkHeight="63" showCaption="false"} - Select **Popups & Alerts**. ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/WNak_cyJNcpYofUfffI-U_screenshot-2025-12-09-at-120906apm.png" size="72" width="986" height="899" position="flex-start" darkWidth="986" darkHeight="899" showCaption="false"} You will see: - All **existing** popups - Options to **edit**, **delete**, **clone**, or **create** new popups ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/TqHC919_8tbT8jFnCakfl_screenshot-2025-12-09-at-120932apm.png" size="74" width="1575" height="898" position="flex-start" darkWidth="1575" darkHeight="898" showCaption="false"} ### Creating a Popup - Click **"Add New Popup"** at the bottom of the page to create a new pop-up. ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/Y-GS3cL7iQzip-eN-N4Fz_screenshot-2025-12-11-at-100225aam.png" size="78" width="980" height="329" position="flex-start" darkWidth="980" darkHeight="329" showCaption="false"} - Enter a name for your popup — choose something descriptive so you can easily find it later (e.g., “Location Opening Sale”, “Holiday Hours Alert”). - At this stage, your popup will be saved as a Draft, which is perfectly fine while building. - Click Save Changes ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/ZxCl7nEmDKNNThiNO1Vwr_screenshot-2025-12-10-at-121447apm.png" size="80" width="1190" height="927" position="flex-start" darkWidth="1190" darkHeight="927" showCaption="false"} ### Designing Your Popup - Once saved, click **Edit** at the bottom of the popup card. ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/mWBJqCRqMoINRY3Qaq400_screenshot-2025-12-10-at-121847apm.png" size="84" width="1067" height="867" position="flex-start" darkWidth="1067" darkHeight="867" showCaption="false"} - Click **+** to begin building your popup. ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/zdCKEVCm_QfZXE0fwzL9M_screenshot-2025-12-09-at-100046aam.png" size="64" width="601" height="413" position="flex-start" darkWidth="601" darkHeight="413" showCaption="false"} - Choose one of the following: - Start from a **template** (recommended for speed and consistency) - Build a **custom** popup using your own style elements such as text, images, icons, buttons, forms, spacing, and backgrounds ![](https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/Zb_o9W7uvTTTzTpmvQcIy_screenshot-2025-12-09-at-100452aam.png) :::hint{type="warning"} **✔️ Important: Popups MUST Be Published** **A popup will not show on your website until it is published.** ::: Before you set triggers or display conditions, Publish the popup: - Locate the popup’s **Status** in the bottom right corner. - Change **Save** **Draft → Published Page**. ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/T8cKBo-4Ihj9aXVFM3utq_screenshot-2025-12-10-at-11749apm.png" size="72" width="906" height="449" position="flex-start" darkWidth="906" darkHeight="449" showCaption="false"} :::Paragraph{indent="4"} **If you skip this step, your popup will never display, even if all conditions are set correctly.** ::: ## Setting Popup Triggers (When the Popup Appears) Triggers define **how** and **when** the popup will appear to a visitor. ## How to Access Trigger Settings - Open your popup. - Click **Settings** in the top right corner ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/Dpyv1PA4FyTIgveoF6PRV_screenshot-2025-12-10-at-12314apm.png" size="32" width="118" height="87" position="flex-start" darkWidth="118" darkHeight="87" showCaption="false"} - Select **Display Conditions** in the top right. ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/mlXvrwLSqHHqlKpkAOOa-_screenshot-2025-12-09-at-103247aam.png" size="64" width="1177" height="497" position="flex-start" darkWidth="1177" darkHeight="497" showCaption="false"} - Select the **Triggers** tab. ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/N4Pz7uc_5YzKH0zOyKzmT_.blob" size="76" width="551" height="239" position="flex-start" darkWidth="551" darkHeight="239" showCaption="false"} ## Available Popup Triggers **Storagely supports a wide variety of popup triggers:** :::Heading{depth="3" indent="3"} **Time-Based Triggers** ::: :::Paragraph{listStyleType="disc" indent="4"} **On Page Load (After X seconds) - **Show popup after 1 second when someone loads the page. ::: :::Paragraph{listStyleType="disc" listStart="2" indent="4"} **After Inactivity - **Show when the visitor has been idle for a set amount of time. ::: :::Heading{depth="3" indent="3"} **Behavior-Based Triggers** ::: :::Paragraph{listStyleType="disc" indent="4"} **On Click - **Popup appears after a user clicks a linked element. ::: :::Paragraph{listStyleType="disc" listStart="2" indent="4"} **After Scroll - **Show after scrolling 30% down the page. ::: :::Paragraph{listStyleType="disc" listStart="3" indent="4"} **Exit Intent (Desktop Only) - **Triggered when the visitor moves the mouse toward closing the page. ::: :::Heading{depth="3" indent="3"} **Conditional Triggers** ::: :::Paragraph{listStyleType="disc" indent="4"} If No Other Popup Has Shown ::: :::Paragraph{listStyleType="disc" listStart="2" indent="4"} Device-Specific (Desktop or Mobile) ::: :::Paragraph{listStyleType="disc" listStart="3" indent="4"} Arriving on Specific URLs ::: :::Heading{depth="3" indent="3"} **Frequency Control** ::: :::Paragraph{indent="3"} **You can also **select **“Show Once Per Session” - **this prevents the popup from repeatedly appearing every time the visitor reloads the page. ::: ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/PWfwN5WhEIeP7EmiFMptB_screenshot-2025-12-09-at-114708aam.png" size="64" width="716" height="435" position="flex-start" darkWidth="716" darkHeight="435" showCaption="false"} ## Setting Display Conditions (Where the Popup Appears) Display Conditions determine **which pages or areas** of the website show the popup. ## How to Access Display Conditions - Open the popup. - Click **Settings** in the top right corner ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/Dpyv1PA4FyTIgveoF6PRV_screenshot-2025-12-10-at-12314apm.png" size="32" width="118" height="87" position="flex-start" darkWidth="118" darkHeight="87" showCaption="false"} - Select **Display Conditions** in the top right. ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/mlXvrwLSqHHqlKpkAOOa-_screenshot-2025-12-09-at-103247aam.png" size="64" width="1177" height="497" position="flex-start" darkWidth="1177" darkHeight="497" showCaption="false"} - Select the **Conditions** tab ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/E2xs9xfV0p21VXHpwdO42_.blob" size="78" width="606" height="184" position="flex-start" darkWidth="606" darkHeight="184" showCaption="false"} ## Where Can You Include or Exclude Popups - Sitewide (all pages) - Specific Internal pages (e.g., “Business Storage Page”) - Blogs - Popups & Alerts only (used for chaining or advanced setups) ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/chrpaLOkhk4qhmOngfgr5_.blob" size="70" width="566" height="369" position="flex-start" darkWidth="566" darkHeight="369" showCaption="false"} **This gives you full control over placement—for example:** - Show a “Grand Opening Discount” only on the new location page - Show a “Holiday Hours Alert” sitewide - Show a “10% Off Storage” popup only on Pricing pages # How to Test Your Popup After setting up both triggers and conditions: - Navigate to the page where the popup should appear. - Refresh the page. - If your trigger is set to **On Page Load → After 1 second**, wait one second. - Confirm that the popup appears exactly where and when expected. If using “Show Once Per Session,” test in: - Incognito mode - After clearing browser cache - Or using a different browser ## Troubleshooting Tips **If your popup does NOT appear:** - Check if it is **Published**, not Draft - Make sure you have a trigger set - Confirm at least one display condition is active - Clear browser cache - Disable “Show only once” (for testing) ## Best Practices - Use popups **sparingly and strategically**. Too many popups reduce engagement. - Keep popup content short, clear, and action-oriented. - Always include a strong CTA (e.g., “Reserve Now,” “Get the Discount”). - Avoid clutter—use clean design and simple messaging. - Test every popup on **mobile and desktop**, as layout should adapt. :::Iframe{iframeHeight="0" code=""} ::: *As always, if you have any questions during this process, our Customer Success Team is here to help. The best way to reach us is by submitting a support ticket.* **[Submit a Ticket](https://d1s7s.share.hsforms.com/297GkKIsiTSmDgSKUYT9s2g)**