Free Popup Widget Generator: Add Popup to Your Website

Use the widget builder below to create your Popup widget for free. Select a template and click “Continue with this template” button to get started.

How to use the Popup Widget Generator

Popup widget
  1. Choose a template: With over 20 responsive templates at your disposal, creating a popup is a breeze. Whether it’s a New Collection (Coupon popup), Announcement, Exit Intent, Special for You, 3-day only, Newsletter Subscribe, recent sales, or Floating Popup, you can select a template that suits your needs and customize it later. Choose your preferred template and click the “Continue with this template” button to get started.
  2. Create your popup: You have two options: use the AI Popup Generator to create popup content by simply describing it to the AI in plain language. This is a quicker way to make a popup without having to think twice about which elements to add. Another option is to add elements and design your popup widget manually. You can use 14 elements (Heading, Text, Form, Coupon, Timer, Video, Image, Button, HTML embed, etc) to craft a popup for your website.
  3. Layout settings: Once you’ve added your content, it’s time to focus on the layout of your popup. This step is crucial as it determines the visual impact of your popup. You have several options to choose from, including Modal, Left and Right Pane, Left and Right Slide-in, and Top and Bottom Bar. You can customize each template and its maximum width under this section, ensuring your popup looks exactly as you envision.
  4. Popup options: You can enable the Reopen Button (to allow users to reopen the popup if desired), Backdrop (to hide website content), and Close button.
  5. Display settings: You have almost completed creating your popup. The next step is to set up when and which pages the popup will show up. Configure the popup display based on the pages of your website and the user’s device. You can also set a display schedule. And determine how often the popup will be shown to each specific user. For example, you can hide popups on mobile devices and display them only on particular pages.
  6. Triggers: How and when the popup should appear is also essential. Set the type of visitor behavior that will open the popup based on On Page Load, Time on Page, On Click, On Scroll, and Exit Intent. You can enable multiple options and display popups in various ways.
  7. Popup Link: If you are using popups to promote a specific offer or want to direct users to a URL, you can add the link for redirection by clicking on the popup.
  8. Custom CSS and JavaScript: If you want further to customize the look and feel of your popup or add custom tracking scripts, you can utilize the custom CSS and JavaScript fields. This enables you to create a unique and personalized user experience while also tracking user interactions to gain better marketing insights.
  9. Once you’ve customized the widget, click the “Add to website for free” button. This will allow you to add popup widgets to your website at no cost. You will also need to register to save your changes. Copy the embed code for the free popup widget and paste it into your website’s HTML editor where you want to showcase it.

The Popup widget’s HTML embed code

Insert the embed code into your website’s template, theme, or HTML source code editor where you want the popup widget to appear, preferably just before the closing body (</body>)tag.

WhatsApp Chat HTML Code Embed Website Source Code
Embed website popup’s HTML code before closing body tag.

How to manage your popup widgets

Once you have created your popup for website, you can easily manage it on your account. In your dashboard, search for the “Popup” app under the list of apps. As you can see from the following screenshot, you can create more Popup widgets, edit existing ones, and get HTML embed code.

Manage Popups

Related Tutorials