Form Integration (React/Next)

This guide covers web integration (React / Next.js). For iOS and macOS apps, see Native App Integration.

Embed snippet

Use the Next.js Script component with the canonical SDK URL (with www). Values come from the Form Configurator.

"use client"

import Script from "next/script"

export function CatchUXWidget({ formId, apiKey }: { formId: string; apiKey: string }) {
  const handleLoad = () => {
    if (typeof window === "undefined" || !(window as any).catchux) return
    ;(window as any).catchux.init({ formId, apiKey, debug: false })
  }

  return (
    <Script
      src="https://www.catchux.com/sdk.js"
      strategy="afterInteractive"
      onLoad={handleLoad}
      onError={(e) => console.error("Catch UX SDK failed to load", e)}
    />
  )
}

Key points

• Use https://www.catchux.com/sdk.js (www required).
• formId + apiKey are copied from the Form Configurator; do not hardcode other values.
• Add your domains to the allowlist; the SDK verify call will block unknown domains.
• Optional: run catchux.selfCheck() after init to confirm allowlist status.

Troubleshooting

• SDK not present? Check network for /sdk.js and console for load errors.
• Blocked domain? Update the allowlist in the Form Configurator and retry.
• Regenerated API key? Update the embed snippet with the new key.