For Developers

Integrate Rexponse's support widget into your application in minutes.

Installation

Install the Rexponse widget package from npm:

npm install @rexponse/widget

Basic Usage

Using the Rexponse widget is simple. Add it to your application with just a few lines:

import { Widget } from "@rexponse/widget";

export default function App() {
  return (
    <Widget
      workspaceId="your-workspace-id"
      apiUrl="https://api.rexponse.io"
      apiKey="your-api-key"
      primaryColor="#4084b5"
      title="Support"
      customer={{
        externalId: "user-123",
        email: "user@example.com",
        name: "John Doe",
        businessName: "Acme Corp",
      }}
    />
  );
}

Configuration

workspaceId *

Your unique Rexponse workspace identifier. Found in your dashboard settings.

apiUrl *

The API endpoint for your Rexponse instance. Default: https://api.rexponse.io

apiKey *

Your API key for authentication. Keep this secure and never expose it in client code.

primaryColor

Customize the widget's primary color (hex format). Default: #4084b5

title

The title displayed at the top of the widget. Default: "Support"

customer

Customer context information. All fields are optional:

  • externalId — Your internal user ID
  • email — Customer email address
  • name — Customer full name
  • businessName — Company or business name

Complete Example

import { Widget } from "@rexponse/widget";
import { useAuth } from "@/hooks/useAuth";

export default function SupportPage() {
  const { user, account } = useAuth();

  return (
    <Widget
      workspaceId="ws_abc123"
      apiUrl="https://api.rexponse.io"
      apiKey={process.env.REACT_APP_REXPONSE_KEY}
      primaryColor="#4084b5"
      title="Support"
      customer={{
        externalId: account?.id,
        email: user?.email,
        name: `${user?.firstName} ${user?.lastName}`.trim(),
        businessName: account?.businessName,
      }}
    />
  );
}

Best Practices

  • ✓Store apiKey and workspaceId in environment variables
  • ✓Always provide customer context when available for better support experiences
  • ✓Use consistent color schemes that match your application's design
  • ✓Test the widget in different browsers and devices before deploying

Need Help?

Reach out to our support team.

Contact Support