Website Popup

The Website Popup is a lightweight, self-embedding floating widget for any website. Add one script and it appears as an overlay, with a launcher in the bottom-right corner (by default). It is built with React and Tailwind; CSS is injected automatically by the bundle.

Features:

• Self-embedding — loads and initializes when the script runs.
• Floating design — corner launcher + modal; not an inline block.
• Customizable — copy and styles via window.popupConfig.
• Companion integration — the same signup flow can also be used as an Embedded Form (iframe only), without the floating button (registration there always uses EmbeddedForm; see that page).

It allows visitors to sign up for a daily email summary of "Coming Soon" listings that your team has access to. Once they are signed up, they will have a call to action to join you as a client.

This feature is available exclusively for premium users and can be fully customized to match your website's design. Anyone who signs up through the pop-up will receive a daily email summary of "Coming Soon" listings that your team has access to.

You can view a working example of the FirstList Website Popup on our example page.

To open a larger version, click here.

Floating widget (script tag)

Include the script in your HTML after window.popupConfig:

<script src="https://cdn.firstlist.co/firstlist-widget.iife.js"></script>

Demo / staging build:

<script src="https://cdn.firstlist.co/firstlist-widget-demo.iife.js"></script>

Configure with window.popupConfig before the script. You must set signupType to WidgetComingSoon or WidgetAssignment for the floating widget. That is separate from the iframe embed, which always sends EmbeddedForm to the registration API regardless of URL or popupConfig.

The widget initializes automatically when the script loads.

Default copy

When titleText and buttonText are omitted or set to "":

• Modal headline: Get listings 72 hours before they go public
• Submit button: Subscribe Now
• Floating launcher uses initialCTAText, or Get Early Access when that is unset or empty.

Add the Popup to Your Website

1. Login to your FirstList account.
2. Navigate to the Settings page.
3. Ensure you are subscribed to the Premium plan.
4. Find the Website Popup tab.
5. Copy the embed code.
6. Paste the embed code into the HTML of your website.
7. Configure the popup using the Basic Configuration section below (include signupType).

How It Works

1. Visitors sign up by providing their name and email.
2. They receive an email to verify their email address.
3. After verification, they receive a confirmation email with details about their subscription to your team's daily "Coming Soon" email, along with an option to complete their signup and create a property search.
4. They begin receiving daily listing summaries, featuring "Coming Soon" properties your team has access to. Each email includes a call to action to reach out to you or adjust their search criteria.
5. All new signups are automatically added as contacts in your FirstList account.

Basic Configuration

window.popupConfig = {
  apiKey: "28de96c0-c6bc-42ff-8a97-4c880933337c",  // Required – your public API key
  signupType: "WidgetComingSoon",                 // Required – "WidgetComingSoon" or "WidgetAssignment" (not used for iframe Embedded Form)
  position: "right",                               // Optional – "left" or "right"
  timeDelay: 2,                                    // Optional – delay (seconds) before the widget appears
  titleText: '',                                   // Optional – modal title (see defaults above if empty)
  footerText: '',                                  // Optional – footer note
  initialCTAText: 'Get Early Access',              // Optional – floating launcher CTA
  buttonText: '',                                  // Optional – submit button (see defaults above if empty)
  googleFont: "Helvetica Neue",                    // Optional – Google Font or system font

  styles: {                                        // Optional – visual customization
    roundedSize: 15,
    backgroundColor: "#ffffff",
    fontColor: "#000000",
    footerColor: "#808080",
    buttonBackgroundColor: "#000000",
    initialBackgroundColor: "#ffffff",
    errorColor: "#df0000",
    buttonHoverColor: "#1b1b1b",
    buttonTextColor: "#ffffff",
    borderColor: "#D1D5DB",
    paddingSides: "10px",
    paddingBottom: "24px",
  }
};

Core Options

Style Options

Implementation Example

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <script>
      window.popupConfig = {
        apiKey: "your-api-key-here",
        signupType: "WidgetComingSoon",
        position: "right",
        timeDelay: 2,
        titleText: "Access listings 72 hours before they go public",
        initialCTAText: "Get Early Access",
        buttonText: "Sign Up",
        footerText: "I agree to be contacted by <team name> via email.",
        googleFont: "Poppins",
        styles: {
          roundedSize: 5,
          backgroundColor: "#ffffff",
          initialBackgroundColor: "#ffffff",
          fontColor: "#1d1d1d",
          footerColor: "#808080",
          buttonBackgroundColor: "#1d1d1d",
          buttonHoverColor: "#000000",
          buttonTextColor: "#ffffff",
          errorColor: "#df0000",
          borderColor: "#E4E4E4",
          paddingSides: "10px",
          paddingBottom: "24px",
        }
      };
    </script>
    <script src="https://cdn.firstlist.co/firstlist-widget.iife.js"></script>
</body>
</html>

Notes

• All style colors should be provided in hexadecimal format.
• apiKey and signupType (WidgetComingSoon or WidgetAssignment) are required for the floating widget.
• Place the widget script after window.popupConfig.
• The Google Font specified must be available in the Google Fonts library.
• Replace <team name> in the footerText with your actual team name.
• For iframe-only embedding (no floating UI), use the Embedded Form page—signupType in the URL there does not control registration; the API always receives EmbeddedForm.