# 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.

<figure><img src="/files/U83l0X6Uj8a9t9hWHAI8" alt=""><figcaption></figcaption></figure>

#### 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.

<figure><img src="/files/seUbgKjBPFWQjMAvzAwC" alt=""><figcaption></figcaption></figure>

#### 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.

<figure><img src="/files/eznoF7iRtovKi22HWMXM" alt=""><figcaption></figcaption></figure>

#### 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.

<figure><img src="/files/cKrvc5c0xAzgcuLsuDUq" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="/files/7l2LqObj4OJHsdJyXbPK" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="/files/DfOcKfxGcfjoKz0vHoHz" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="/files/v2tkVuLSJQL2ywKsIcVL" alt=""><figcaption></figcaption></figure>

### 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).

***

<figure><img src="/files/S7RT5LW9M5fU1GtU7h6M" alt=""><figcaption></figcaption></figure>

### **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.

<figure><img src="/files/KmPSQJ8Xx4SuMwWlVli2" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.flowappz.com/home/webflow-popup-builder/getting-started/creating-your-first-popup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.