{title}{description}
)
}
```
## 4. Popup / Slide-in Triggers
```tsx
"use client"
import { useState, useEffect, useCallback } from "react"
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"
import { X } from "lucide-react"
interface PopupTriggerProps {
children: React.ReactNode
trigger: "exit-intent" | "scroll-depth" | "time-delay" | "page-count"
delay?: number // ms for time-delay, % for scroll-depth, count for page-count
cooldownDays?: number
}
export function PopupTrigger({ children, trigger, delay = 5000, cooldownDays = 7 }: PopupTriggerProps) {
const [open, setOpen] = useState(false)
const storageKey = `popup_${trigger}_dismissed`
const shouldShow = useCallback(() => {
const dismissed = localStorage.getItem(storageKey)
if (dismissed) {
const dismissedAt = new Date(dismissed).getTime()
if (Date.now() - dismissedAt < cooldownDays * 86400000) return false
}
return true
}, [storageKey, cooldownDays])
const show = useCallback(() => {
if (shouldShow()) setOpen(true)
}, [shouldShow])
const dismiss = () => {
setOpen(false)
localStorage.setItem(storageKey, new Date().toISOString())
}
useEffect(() => {
if (!shouldShow()) return
if (trigger === "exit-intent") {
const handler = (e: MouseEvent) => { if (e.clientY < 10) show() }
document.addEventListener("mouseleave", handler)
return () => document.removeEventListener("mouseleave", handler)
}
if (trigger === "time-delay") {
const timer = setTimeout(show, delay)
return () => clearTimeout(timer)
}
if (trigger === "scroll-depth") {
const handler = () => {
const scrollPercent = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100
if (scrollPercent >= (delay as number)) show()
}
window.addEventListener("scroll", handler, { passive: true })
return () => window.removeEventListener("scroll", handler)
}
if (trigger === "page-count") {
const count = Number(sessionStorage.getItem("page_views") ?? 0) + 1
sessionStorage.setItem("page_views", String(count))
if (count >= (delay as number)) show()
}
}, [trigger, delay, show, shouldShow])
return (
)
}
// Usage:
//
//
//
```
## 5. Sticky Bottom Bar CTA
```tsx
"use client"
import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { X } from "lucide-react"
import { cn } from "@/lib/utils"
export function StickyBottomCTA({ show = true }: { show?: boolean }) {
const [visible, setVisible] = useState(false)
const [dismissed, setDismissed] = useState(false)
useEffect(() => {
if (dismissed) return
const handler = () => setVisible(window.scrollY > 600)
window.addEventListener("scroll", handler, { passive: true })
return () => window.removeEventListener("scroll", handler)
}, [dismissed])
if (dismissed || !show) return null
return (
Ready to get started? Join 10,000+ users today.
)
}
```
## 6. Double Opt-in Flow
```
1. User submits email → Server creates contact with status "pending"
2. Email service sends confirmation email with unique link
3. User clicks link → status changes to "active"
4. Welcome email sent automatically
// Resend: use Audiences API, contacts are auto-confirmed
// Mailchimp: set status: "pending" (not "subscribed")
// ConvertKit: double opt-in is on by default per form settings
```
## Anti-Spam Rules
1. Always use honeypot field (hidden input that bots fill)
2. Rate limit server actions (1 request per 10 seconds per IP)
3. Validate email format server-side with Zod
4. Never expose API keys client-side
5. Use CAPTCHA only if honeypot insufficient (adds friction)
6. Store consent timestamp for GDPR compliance
**Version:** 1.0.0
**Last Updated:** 2026-03-17