React ChatButton (Private Mode)

Using React + Clerk for authenticated floating chat button

Authentication Required

Please sign in to access the private chat widget.

Loading authentication...

Authenticated!

You're now signed in. Look for the chat button in the bottom-right corner.

Installation

npm install react react-dom @clerk/clerk-react @diegoaltoworks/chatter
# or
bun add react react-dom @clerk/clerk-react @diegoaltoworks/chatter

React + Clerk Integration

Wrap your app with ClerkProvider and use the ChatButton component with authentication:

import React from 'react';
import { ClerkProvider, useAuth } from '@clerk/clerk-react';
import { ChatButton } from '@diegoaltoworks/chatter/client';
import '@diegoaltoworks/chatter/client/style.css';

function ChatButtonWithAuth() {
  const { getToken, isSignedIn } = useAuth();

  if (!isSignedIn) return null;

  return (
    <ChatButton
      host="your-api-url.com"
      mode="private"
      apiKey="YOUR_API_KEY_HERE"
      token={async () => await getToken()}
      position="bottom-right"
      label="🔒"
      chatConfig={{
        title: 'Private Chat',
        subtitle: 'Internal support'
      }}
    />
  );
}

function App() {
  return (
    <ClerkProvider publishableKey={process.env.CLERK_PUBLISHABLE_KEY}>
      <ChatButtonWithAuth />
    </ClerkProvider>
  );
}

How This Demo Works

This page uses React with the ChatButton component and Clerk authentication:

import React from 'react';
import { ChatButton } from '@diegoaltoworks/chatter';
import { useAuth } from '@clerk/clerk-react';
import '@diegoaltoworks/chatter/style.css';

function App() {
  const { getToken } = useAuth();

  return (
    <ChatButton
      host="your-api-url.com"
      mode="private"
      apiKey="YOUR_API_KEY_HERE"
      token={async () => await getToken()}
      position="bottom-right"
      label="🔒"
      chatConfig={{
        title: 'Private Chat',
        subtitle: 'Internal support'
      }}
    />
  );
}

Configuration Options

host - Your API host (e.g., 'bot.diegoalto.app')
mode - Set to 'private' for private knowledge base access
apiKey - Session key from your API
token - JWT token from Clerk (function or string)
position - Button position: 'bottom-right', 'bottom-left', etc.
label - Button text/emoji (default: '🔒')
chatConfig - Chat window configuration