Akron Agent Studio Embed React

React components for embedding Akron Agent Studio chatbot in your React applications.

Features

• ⚛️ React Components - Native React components with TypeScript support
• 🎨 Akron Brand Theme - Pre-configured with Akron's signature indigo color
• 🌙 Dark Mode Ready - Optimized for dark backgrounds
• 📱 Responsive - Works seamlessly on all devices
• 🔧 Fully Typed - Complete TypeScript definitions

Installation

npm install akron-agent-studio-embed-react akron-agent-studio-embed
# or
yarn add akron-agent-studio-embed-react akron-agent-studio-embed

Usage

Bubble Chat (Popup)

import { BubbleChat } from 'akron-agent-studio-embed-react';

function App() {
  return (
    <BubbleChat
      chatflowid="your-chatflow-id"
      apiHost="https://your-akron-instance.com"
      theme={{
        button: {
          backgroundColor: '#6366f1',
          iconColor: 'white',
          size: 'medium',
        },
        chatWindow: {
          backgroundColor: '#000000',
          titleBackgroundColor: '#0f172a',
          titleTextColor: '#ffffff',
          title: 'Akron Agent',
          welcomeMessage: 'Hello! How can I help you today?',
        },
      }}
    />
  );
}

Full Page Chat

import { FullPageChat } from 'akron-agent-studio-embed-react';

function ChatPage() {
  return (
    <FullPageChat
      chatflowid="your-chatflow-id"
      apiHost="https://your-akron-instance.com"
      style={{ width: '100%', height: '100vh' }}
      theme={{
        chatWindow: {
          backgroundColor: '#000000',
          titleBackgroundColor: '#0f172a',
          titleTextColor: '#ffffff',
        },
      }}
    />
  );
}

Props

Both BubbleChat and FullPageChat accept the following props:

Required Props

• chatflowid (string): Your Akron chatflow ID
• apiHost (string): Your Akron instance URL

Optional Props

• theme (object): Theme customization

  • button: Button styling (BubbleChat only)
    • backgroundColor: Button background color (default: '#6366f1')
    • iconColor: Icon color (default: 'white')
    • size: 'small' | 'medium' | 'large'
    • bottom: Bottom position in pixels
    • right: Right position in pixels
  • chatWindow: Chat window styling
    • backgroundColor: Window background color
    • height: Window height in pixels
    • width: Window width in pixels
    • titleBackgroundColor: Title bar background
    • titleTextColor: Title text color
    • title: Chat window title
    • welcomeMessage: Initial welcome message
  • userMessage: User message bubble styling
    • backgroundColor: User message background
    • textColor: User message text color
  • botMessage: Bot message bubble styling
    • backgroundColor: Bot message background
    • textColor: Bot message text color

• chatflowConfig (object): Additional chatflow configuration

• observersConfig (object): Observer configuration for analytics

Akron Default Theme

The components come pre-configured with Akron's brand colors:

{
  button: {
    backgroundColor: '#6366f1', // Akron indigo
    iconColor: 'white',
  },
  chatWindow: {
    backgroundColor: '#000000', // Dark background
    titleBackgroundColor: '#0f172a', // Slate-900
    titleTextColor: '#ffffff',
  },
}

Development

# Install dependencies
yarn install

# Build
yarn build

# Watch mode
yarn dev

License

MIT

About

Created by the Akron team for seamless agent embedding in React applications.