How to Create Custom Pop-Ups with Banners and Discounts on Your Rental Website

Learn how to build, customize, and trigger engaging pop-ups and notification banners on your website. Includes instructions for generating HTML banners using AI.

April 23, 2026 By Reservety

Pop-ups and notification banners are excellent tools for promoting special offers, capturing leads, or sharing important announcements. In this guide, you will learn how to create a custom notification box, enhance it with visual effects, generate an HTML coupon banner using AI, and set up display triggers.

Let's get started.

Step #1: From your dashboard, click View Admin — From your dashboard, click **View Admin**

Step #2: Navigate to Store Designer, then click Pages — Navigate to **Store Designer**, then click **Pages**

Step #3: Select the page where you want the pop-up to appear (e.g., Home) — **Select** the page where you want the pop-up to appear (e.g., **Home**)

Step #4: Click Visual Editor to launch the site builder — Click **Visual Editor** to launch the site builder

Add and Style a Basic Notification Box

You can create pop-ups either as standalone windows or styled notification boxes. Here, we'll start with the notification box.

In the sidebar, type your message in the text editor (e.g., "We will be closed Monday for scheduled maintenance.")

Step #7: Highlight your text and use the toolbar to adjust formatting or text color — Highlight your text and use the toolbar to adjust formatting or text color

Step #8: Click on the Advanced tab in the sidebar to add a special effect to the pop-up. — Click on the **Advanced** tab in the sidebar to add a special effect to the pop-up.

Step #9: Toggle the Confetti Effects to activate background animations — Toggle the **Confetti Effects** to activate background animations

Step #10: Choose a style like Fireworks or Snow from the dropdown menu — Choose a style like **Fireworks** or **Snow** from the dropdown menu

Step #11: Enable Reveal Effects to control how the box animates into view (e.g., sliding from right to left or bottom to top) — Enable **Reveal Effects** to control how the box animates into view (e.g., sliding from right to left or bottom to top)

Step #12: Under Sound Effects, choose whether the sound triggers on Hover or Click — Under Sound Effects, choose whether the sound triggers on **Hover** or **Click**

Step #13: Select a sound type (like a button click or bell ring) from the dropdown list — Select a sound type (like a button click or bell ring) from the dropdown list

Create an HTML Banner with AI

Instead of a plain text box, you can use AI to instantly design a fully styled HTML promotional banner.

You can use ChatGPT or a similar AI tool for this step. Be sure to provide clear instructions on colors, messaging, and deadlines.

Step #14: In ChatGPT, enter a prompt describing your ideal banner and submit it (e.g., "Create a pop-up for my ski rental business to reveal a 10% off coupon. Make it catchy, use vibrant colors with a blue background, and include the code APRIL 10 expiring May 1st.") — In ChatGPT, enter a prompt describing your ideal banner and submit it (e.g., *"Create a pop-up for my ski rental business to reveal a 10% off coupon. Make it catchy, use vibrant colors with a blue background, and include the code APRIL 10 expiring May 1st."*)

Step #15: Once it provides the text version, type Turn it into HTML and press Enter. Click Copy code on the generated snippet — Once it provides the text version, type `Turn it into HTML` and press Enter. Click **Copy code** on the generated snippet

Step #16: Back in the Visual Editor, select your notification box again to open the sidebar settings. Click the Text tab in the message editor to view the source code mode. — Back in the **Visual Editor**, select your notification box again to open the sidebar settings. Click the **Text** tab in the message editor to view the source code mode.

Step #17: Clear out the old text and paste your copied HTML code. Your custom AI banner will immediately render in the preview. — **Clear out** the old text and **paste your copied HTML code**. Your custom AI banner will immediately render in the preview.

Configure Pop-up Triggers & Publish

Finally, control precisely when and how often visitors see your banner.

Step #19: Click the Event dropdown to determine when the pop-up triggers — Click the **Event** dropdown to determine when the pop-up triggers

Step #20: Select an event behavior, like in-time delay (shows after a set period) or Page Unload (exit intent) — Select an event behavior, like **in-time delay** (shows after a set period) or **Page Unload** (exit intent)

If using a delay, enter the delay value (e.g., 4000 milliseconds)

Enter the display time value to control how long the pop-up stays on the screen

Step #23: Expand the Additional settings — Expand the **Additional** settings

Set a display limit to avoid annoying visitors by entering a maximum number of views (e.g., 4)

Step #25: When you're happy with your new pop-up, click Publish — When you're happy with your new pop-up, click **Publish**

Step #26: Click View page to test the banner live on your website — Click **View page** to test the banner live on your website