@tarxemo/customer_support

A professional React component library for AI-powered customer support integration with SiteWise

✨ Features

🚀 Drop-in Integration - Add AI-powered customer support in minutes
🎨 Fully Customizable - Theme colors, positioning, and behavior
📱 Responsive Design - Works seamlessly on mobile and desktop
💬 Real-time Chat - Powered by SiteWise RAG (Retrieval-Augmented Generation)
🔒 Secure - API key authentication with SiteWise backend
📚 Source Attribution - Shows relevant sources for AI responses
♿ Accessible - WCAG compliant with keyboard navigation
🎯 TypeScript - Full type safety and IntelliSense support
🪝 Headless Hooks - Build your own custom UI

📦 Installation

npm install @tarxemo/customer_support

or with yarn:

yarn add @tarxemo/customer_support

🚀 Quick Start

Step 1: Get Your API Key

Before using the library, you need to set up your website in the SiteWise console:

Visit the Console: Go to https://servicesconsole.tarxemo.com
Sign Up: Create a new account and verify your email
Create Organization: You'll be prompted to create an organization (e.g., "My Company")
Add Your Website:
- Navigate to "Websites" in the console
- Click "Add Website"
- Enter your website name and URL (e.g., "https://mycompany.com")
- Submit the form
Crawl Your Website:
- On your website card, click "Start Crawl"
- Wait for the crawl to complete (status: PENDING → CRAWLING → READY)
Generate API Key:
- Go to "API Keys" section
- Click "Create API Key"
- Select your website and set rate limits
- Copy the API key immediately (shown only once!)

Step 2: Install the Library

npm install @tarxemo/customer_support

or with yarn:

yarn add @tarxemo/customer_support

Step 3: Add to Your React App

import { CustomerSupportWidget } from '@tarxemo/customer_support';
import '@tarxemo/customer_support/styles';

function App() {
  return (
    <div>
      <h1>My Website</h1>
      {/* Your existing content */}
      
      <CustomerSupportWidget 
        apiKey="your-sitewise-api-key-here"
        position="bottom-right"
        theme={{
          primaryColor: '#6366f1',
          secondaryColor: '#8b5cf6',
          backgroundColor: '#ffffff',
          textColor: '#1f2937',
          borderRadius: '16px',
        }}
        welcomeMessage="Welcome! How can we help you today?"
        placeholder="Ask us anything about our products or services..."
      />
    </div>
  );
}

That's it! The chat widget will appear in the bottom-right corner of your page, ready to answer questions about your website content.

📖 API Reference

CustomerSupportWidget Props

Prop	Type	Default	Description
`apiKey`	`string`	required	Your SiteWise API key
`theme`	`ThemeConfig`	-	Custom theme configuration
`position`	`Position`	`'bottom-right'`	Widget position
`welcomeMessage`	`string`	`'Hi! How can I help you today?'`	Initial welcome message
`placeholder`	`string`	`'Type your message...'`	Input placeholder text
`className`	`string`	`''`	Additional CSS class
`onError`	`(error: Error) => void`	-	Error callback
`onMessageSent`	`(message: string) => void`	-	Called when user sends message
`onMessageReceived`	`(response: string) => void`	-	Called when AI responds

Theme Configuration

interface ThemeConfig {
  primaryColor?: string;        // Default: #6366f1
  secondaryColor?: string;       // Default: #8b5cf6
  backgroundColor?: string;      // Default: #ffffff
  textColor?: string;           // Default: #1f2937
  fontFamily?: string;          // Default: system fonts
  borderRadius?: string;        // Default: 12px
  buttonColor?: string;         // Default: #6366f1
  userMessageColor?: string;    // Default: #6366f1
  assistantMessageColor?: string; // Default: #f3f4f6
}

Position Options

'bottom-right' (default)
'bottom-left'
'top-right'
'top-left'

🎨 Customization Examples

Custom Theme

<CustomerSupportWidget 
  apiKey="your-api-key"
  theme={{
    primaryColor: '#10b981',
    secondaryColor: '#059669',
    userMessageColor: '#10b981',
    borderRadius: '8px',
  }}
/>

Using Environment Variables for API Key

<CustomerSupportWidget 
  apiKey={import.meta.env.VITE_SITEWISE_API_KEY || 'fallback-key'}
  position="bottom-right"
  theme={{
    primaryColor: '#6366f1',
    secondaryColor: '#8b5cf6',
    backgroundColor: '#ffffff',
    textColor: '#1f2937',
    borderRadius: '16px',
  }}
  welcomeMessage="Welcome to your website! How can we help you today?"
  placeholder="Ask us anything about our products or services..."
/>

Custom Position and Welcome Message

<CustomerSupportWidget 
  apiKey="your-api-key"
  position="bottom-left"
  welcomeMessage="Hello! Ask me anything about our products!"
  placeholder="Ask a question..."
/>

With Event Handlers

<CustomerSupportWidget 
  apiKey="your-api-key"
  onMessageSent={(msg) => console.log('User sent:', msg)}
  onMessageReceived={(response) => console.log('AI replied:', response)}
  onError={(error) => console.error('Error:', error)}
/>

🪝 Headless Hook Usage

For full control over the UI, use the useCustomerSupport hook:

import { useCustomerSupport } from '@tarxemo/customer_support';

function CustomChat() {
  const {
    messages,
    sendMessage,
    isLoading,
    error,
    clearError,
    sessionId,
    loadHistory,
    clearHistory
  } = useCustomerSupport({
    apiKey: 'your-api-key',
    baseUrl: 'https://your-api.com/api'
  });

  return (
    <div>
      {messages.map(msg => (
        <div key={msg.id}>
          <strong>{msg.role}:</strong> {msg.content}
        </div>
      ))}
      <button onClick={() => sendMessage('Hello!')}>
        Send
      </button>
    </div>
  );
}

🔧 Advanced Usage

Custom Components

You can use individual components for more control:

import { ChatWindow, useCustomerSupport } from '@tarxemo/customer_support';

function MyCustomWidget() {
  const [isOpen, setIsOpen] = useState(false);
  const { messages, sendMessage, isLoading, error } = useCustomerSupport({
    apiKey: 'your-api-key'
  });

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Chat</button>
      {isOpen && (
        <ChatWindow
          messages={messages}
          onSendMessage={sendMessage}
          onClose={() => setIsOpen(false)}
          isLoading={isLoading}
          error={error}
        />
      )}
    </div>
  );
}

Using with Next.js

// app/layout.tsx or pages/_app.tsx
'use client'; // For Next.js 13+ App Router

import { CustomerSupportWidget } from '@tarxemo/customer_support';
import '@tarxemo/customer_support/styles';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <CustomerSupportWidget apiKey={process.env.NEXT_PUBLIC_SITEWISE_API_KEY} />
      </body>
    </html>
  );
}

🔐 Getting an API Key

Follow these steps to get your API key from the SiteWise console:

1. Create Your Account

Visit https://servicesconsole.tarxemo.com
Click "Register" and create your account
Verify your email address

2. Set Up Your Organization

After registration, you'll be automatically prompted to create an organization
Enter your organization name (e.g., "My Company")
Click "Create Organization"

3. Register Your Website

Navigate to the "Websites" section in the console
Click "Add Website"
Fill in the details:
- Name: Your website name (e.g., "My Company Website")
- URL: Your website base URL (e.g., "https://mycompany.com")
- Crawl Settings: Keep defaults for now
Click "Submit"

4. Crawl Your Website

On your website card, click "Start Crawl"
Wait for the crawl to complete (status will change from PENDING → CRAWLING → READY)
You'll see statistics like pages crawled and chunks created

5. Generate API Key

Navigate to the "API Keys" section
Click "Create API Key"
Select your website from the dropdown
Set a rate limit (optional, default: 100 requests/minute)
Click "Generate"
⚠️ IMPORTANT: Copy the API key immediately - it's shown only once!

6. Test Your API Key

curl -X POST https://api.tarxemo.com/api/chat/ \
  -H "X-API-Key: YOUR_API_KEY_HERE" \
  -H "Content-Type: application/json" \
  -d '{"question": "What services do you offer?"}'

Once you have your API key, you can use it in the widget configuration as shown in the Quick Start section.

🌐 Production Deployment

For production deployment, always use environment variables for your API key:

React (Create React App)

// .env file
REACT_APP_SITEWISE_API_KEY=your-production-api-key

// In your component
<CustomerSupportWidget 
  apiKey={process.env.REACT_APP_SITEWISE_API_KEY}
/>

Next.js

// .env.local file
NEXT_PUBLIC_SITEWISE_API_KEY=your-production-api-key

// In your component
<CustomerSupportWidget 
  apiKey={process.env.NEXT_PUBLIC_SITEWISE_API_KEY}
/>

Vite

// .env file
VITE_SITEWISE_API_KEY=your-production-api-key

// In your component
<CustomerSupportWidget 
  apiKey={import.meta.env.VITE_SITEWISE_API_KEY}
/>

Production Checklist

Use environment variables for API keys (never hardcode)
Test with your production API key
Verify your website crawl is completed in the console
Monitor API usage and rate limits
Test on mobile devices
Check console for any errors

📱 Mobile Support

The widget is fully responsive and automatically adjusts to mobile screens:

On mobile: Chat takes up the full screen
On desktop: Chat window appears as a floating widget

♿ Accessibility

Full keyboard navigation support
ARIA labels and roles
Screen reader compatible
Focus management
High contrast support

🧪 TypeScript Support

The library is written in TypeScript and includes full type definitions:

import type { 
  Message, 
  Source, 
  ThemeConfig,
  CustomerSupportConfig 
} from '@tarxemo/customer_support';

🛠️ Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Run tests
npm run test

# Type check
npm run type-check

📄 License

MIT © Tarxemo

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📞 Support

For issues and questions:

GitHub Issues: github.com/tarxemo/customer_support/issues
Documentation: Full Documentation

🔗 Links

NPM Package: https://www.npmjs.com/package/@tarxemo/customer_support
GitHub Repository: https://github.com/tarxemo/customer_support
SiteWise Console: https://servicesconsole.tarxemo.com
API Documentation: Available in the SiteWise console after login
User Guide: Complete step-by-step integration guide
Developer Guide: Advanced API reference and customization

Made with ❤️ by Tarxemo

Name		Name	Last commit message	Last commit date
Latest commit History 21 Commits
.github/workflows		.github/workflows
examples		examples
src		src
.gitignore		.gitignore
.npmignore		.npmignore
.prettierrc		.prettierrc
CDN_USAGE.md		CDN_USAGE.md
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
MEDIUM_ARTICLE.md		MEDIUM_ARTICLE.md
PUBLISHING.md		PUBLISHING.md
README.md		README.md
eslint.config.js		eslint.config.js
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

@tarxemo/customer_support

✨ Features

📦 Installation

🚀 Quick Start

Step 1: Get Your API Key

Step 2: Install the Library

Step 3: Add to Your React App

📖 API Reference

CustomerSupportWidget Props

Theme Configuration

Position Options

🎨 Customization Examples

Custom Theme

Using Environment Variables for API Key

Custom Position and Welcome Message

With Event Handlers

🪝 Headless Hook Usage

🔧 Advanced Usage

Custom Components

Using with Next.js

🔐 Getting an API Key

1. Create Your Account

2. Set Up Your Organization

3. Register Your Website

4. Crawl Your Website

5. Generate API Key

6. Test Your API Key

🌐 Production Deployment

React (Create React App)

Next.js

Vite

Production Checklist

📱 Mobile Support

♿ Accessibility

🧪 TypeScript Support

🛠️ Development

📄 License

🤝 Contributing

📞 Support

🔗 Links

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages