Overview

Language note: the entire Catch UX app and all documentation are in English. Keep all UI labels and copy in English.

Catch UX is designed to easily collect feedback from your users. Follow these steps to integrate Catch UX into your web application:

1. Create an Account

Start by creating an account on Catch UX. After registration, you'll get access to your personal dashboard where you can manage your apps.

2. Register Your App

Go to your dashboard and click “New App”. Give your app a name and description. You'll receive a unique App ID that you'll need for integration.

3. Integrate the SDK (React/Next)

Add the Catch UX SDK to your React/Next app using the Next.js Script component. We load the canonical SDK URL (with www), guard for window availability, and bail out cleanly on load errors.

"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)}
    />
  )
}

Config source: formId and apiKey come from the Form Configurator in the dashboard. Developers only need to paste this snippet with those values.

Safety & troubleshooting

• Always use https://www.catchux.com/sdk.js (with www).
• Ensure your domain is in the allowed domains list; this protects the client-side apiKey.
• Optional check: call catchux.selfCheck() after init for domain verification feedback.

Features

Screenshot Capture

Catch UX automatically takes a screenshot of the page when a user submits feedback. This gives you valuable context about where and when the feedback was given.

Offline Support

Feedback is stored locally when there is no internet connection and automatically synchronized once the connection is restored.

Dashboard

In the dashboard, you can view all feedback, filter, and update the status. You can also invite team members to work on feedback together.