Creating Your First Popup

Step 1: Open the Popup Builder App and Navigate to the Popups Tab

Launch the Popup Builder app from the Apps panel. Then, click on the Popups tab located in the top navigation bar. Refer to the screenshot below for visual reference.

Step 2: Add a Popup to Enable the Builder Tab

You'll notice that you cannot access the Builder tab right away. To unlock the Builder page and start building your popup, you first need to create a popup by giving it a name.

Once you've named and added your popup, the Builder tab will become accessible.

You can follow the visual representation below for reference.

Step 3: Choose a Template for Your Popup

After creating your popup, you'll be automatically redirected to the Templates step within the Builder tab.

Here, you need to select your preferred template from the available template collection. This template will serve as the base design for your popup.

You can refer to the visual representation below for guidance.

Step 4: Customize the Popup Style

In the Style step of the Builder tab, you can configure the visual appearance and behavior of your popup.

Here’s what you can do:

• Set the opening animation using the available open effects

• Adjust the overlay opacity to control the background dimming

• Position the popup on the screen (e.g., center, bottom-right, etc.)

Once you're satisfied with the style settings, click Next Step to continue.

Refer to the visual representation below for guidance.

Step 5: Configure Target Settings

In the Settings tab of the Builder, you’ll find the Target section. This is where you define when and where your popup will appear.

1. Device Targeting

Choose which devices you want the popup to be shown on:

• Desktop

• Tablet

• Mobile

You can select one, multiple, or all device types depending on your targeting needs.

2. Page Targeting

There are two options for displaying the popup on specific pages:

• Target All Pages To display the popup on all pages, paste it inside a component or layout that is repeated across all pages (e.g., a global layout or shared header/footer).

• Target Specific Pages If you want the popup to appear only on selected pages, paste the popup component manually into each page where it should appear.

3. Schedule Date & Time

Set a specific date range to control when the popup will be active:

• Choose Start and End Dates Define a time window during which the popup should be visible.

Step 6: Configure Open Behavior Settings

In the Settings tab of the Builder, you’ll find the Open Behavior section, where you can define when the popup should appear to your visitors.

Available Options:

• On Page Scroll This option allows you to control when the popup appears based on user scroll behavior. You can choose between:

  • Percent: Show the popup after a specified percentage of the page has been scrolled.

  • Pixel: Show the popup after a specific number of pixels have been scrolled.

  • None (Default): The popup will display immediately when the page loads.

• After a Delay Set a custom time delay (in seconds) to control how long after page load or scroll the popup should appear.

These options give you flexibility to control the timing of your popup for better user engagement.

Please refer to the visual reference below for more clarity.

Step 7: Configure Close Behavior Settings

In the Settings tab of the Builder, you’ll also find the Close Behavior section, which controls how and when the popup stops being shown to visitors.

Available Options:

• Stop Displaying After User Action This setting determines whether the popup should continue appearing after a visitor interacts with it. You can choose from:

  • Never stop displaying the popup (Default): The popup will appear on every page load, even after the user closes it.

  • Stop showing the popup: Allows you to customize how many times the popup should be shown on page load after the visitor closes it. For example, you can specify to stop showing it after 1, 3, or any number of closures.

After configuring your preferred close behavior, click Next Step to proceed.

Please refer to the visual reference below for better understanding.

Step 8: Integrations

We currently offer three types of integrations:

• Webhook

• Mailchimp

• HubSpot

Connecting an Integration

1. Click the “Add New Integration” button. A popup will appear showing the list of available integrations.

2. Choose the integration you want to connect (e.g., Webhook).

Step 9: Publish Your Popup

In the Publish step, click on Save and Copy Popup. This action will:

• Save your popup configuration

• Copy the template to your clipboard

Next, simply paste the template into the desired section of your Webflow Designer to display the popup on your website.

Refer to the visual representation below for guidance.