React ChatButton (Public Mode)

Using React components for floating chat button widget

Installation

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

Basic React Usage

Import and use the ChatButton component in your React app:

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

function App() {
  return (
    <ChatButton
      host="your-api-url.com"
      mode="public"
      apiKey="YOUR_API_KEY_HERE"
      position="bottom-right"
      label="💬"
      chatConfig={{
        title: 'Chat with us',
        subtitle: 'We typically reply in a few minutes'
      }}
    />
  );
}

With TypeScript

import React from 'react';
import { ChatButton, ChatButtonConfig } from '@diegoaltoworks/chatter/client';
import '@diegoaltoworks/chatter/client/style.css';

const config: ChatButtonConfig = {
  host: 'your-api-url.com',
  mode: 'public',
  apiKey: 'YOUR_API_KEY_HERE',
  position: 'bottom-right',
  label: '💬',
  chatConfig: {
    title: 'Chat with us',
    subtitle: 'We typically reply in a few minutes'
  }
};

function App() {
  return <ChatButton {...config} />;
}

How This Demo Works

This page uses React with the ChatButton component:

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

function App() {
  return (
    <ChatButton
      host="your-api-url.com"
      mode="public"
      apiKey="YOUR_API_KEY_HERE"
      position="bottom-right"
      label="💬"
      chatConfig={{
        title: 'Public Chat',
        subtitle: 'We are here to help'
      }}
    />
  );
}

Configuration Options

• host - Your API host (e.g., 'bot.diegoalto.app')
• mode - Set to 'public' for public knowledge base access
• apiKey - Session key or API key
• position - Button position: 'bottom-right', 'bottom-left', 'top-right', or 'top-left'
• label - Button text/emoji (default: '💬')
• chatConfig - Chat window configuration (title, subtitle, placeholder, etc.)