Professional Popup System

This is a modular, dynamic, and highly customizable popup system for your Astro website. It is designed to be a powerful tool for user engagement, A/B testing, and conversion optimization, following the best practices of professional web development and digital marketing.

1. System Overview

The system is composed of two primary components that work in tandem:

• ProfessionalPopup.astro: This component handles the visual appearance and layout of the popup. It is a “dumb” component that simply renders the content you provide.

• PopupTrigger.astro: This component is the brain of the system. It handles all the complex logic, including when the popup should appear, frequency control, A/B testing, and user behavior tracking.

This separation of concerns allows you to design your popup once and then trigger it in multiple ways across your site without writing any custom JavaScript.

2. Component Reference

ProfessionalPopup.astro

This is the visual component. You will not use this component directly in your pages. Instead, you’ll use the PopupTrigger component, which renders the popup for you.

styles Object Properties

3. Examples of Usage

Example 1: Centered Welcome Popup on a Delay

This popup appears 3 seconds after a user lands on the homepage (/) or the about page (/about). It will only be shown once per day per user.

<PopupTrigger
  id="welcome-offer"
  title="Welcome to Our Site!"
  description="Enjoy a special offer for first-time visitors."
  buttonText="Claim Offer"
  buttonLink="/offer"
  trigger={{
    type: "delay",
    delay: 3000,
    frequency: {
      limit: 1,
      period: "day",
    },
    pagePaths: ["/", "/about"],
  }}
/>

Example 2: Side-by-Side Exit-Intent Popup

This popup targets users who are about to leave the site by moving their mouse off-screen. It uses a different layout to make a stronger visual impression. The popup will also never be shown again if the user clicks the link.

<PopupTrigger
  id="exit-intent-offer"
  title="Wait! Before You Go..."
  description="Don't miss out on your chance to get a 10% discount on your first order."
  buttonText="Grab My Coupon"
  buttonLink="/checkout"
  layout="side-by-side"
  trigger={{
    type: "exitIntent",
    neverShowAgainOnLinkClick: true,
  }}
/>

Example 3: A/B Test for a Product Page

This example shows how to set up an A/B test on a product page. Users will be randomly assigned to see either “Offer A” or “Offer B,” with the assignment stored in a cookie for consistency.

<!-- First Popup: Offer A -->
<PopupTrigger
  id="ab-test-popup-A"
  title="Offer A: A Free Trial!"
  buttonText="Start My Free Trial"
  buttonLink="/trial-signup"
  trigger={{
    type: "abTest",
    abTestId: "product-page-test",
    testGroup: "A",
    testGroups: ["A", "B"],
    delay: 1000,
    pagePaths: ["/products/product-1"],
  }}
/>

<!-- Second Popup: Offer B -->
<PopupTrigger
  id="ab-test-popup-B"
  title="Offer B: 50% Off Your First Purchase!"
  buttonText="Get 50% Off"
  buttonLink="/discount-checkout"
  trigger={{
    type: "abTest",
    abTestId: "product-page-test",
    testGroup: "B",
    delay: 1000,
    pagePaths: ["/products/product-1"],
  }}
/>

Example 4: Popup with Custom Styles and an Image-Top Layout

This popup appears after the user has scrolled halfway down the page and features a customized, branded look.

<PopupTrigger
  id="styled-popup"
  title="Your Daily Inspiration"
  description="We've curated a list of our favorite creative projects just for you."
  image={inspirationImage}
  buttonText="Get Inspired"
  buttonLink="/inspiration"
  layout="image-top"
  trigger={{
    type: "scrollPercentage",
    percentage: 50,
  }}
  styles={{
    backgroundColor: "#2c3e50",
    textColor: "#ecf0f1",
    titleColor: "#f1c40f",
    buttonBackgroundColor: "#f39c12",
    buttonTextColor: "#fff",
    fontFamily: "Arial, sans-serif",
  }}
/>