Akron Agent Studio Embed

Javascript library to display Akron Agent Studio chatbot on your website

Features

• 🎨 Akron Brand Theme - Pre-configured with Akron's signature indigo color (#6366f1)
• 🌙 Dark Mode Ready - Optimized for dark backgrounds
• 📱 Responsive Design - Works seamlessly on mobile and desktop
• ⚡ Lightweight - Minimal bundle size for fast loading
• 🔧 Highly Customizable - Full theme customization support

Installation

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

Quick Start

PopUp Chatbot

<script type="module">
  import Chatbot from 'https://cdn.jsdelivr.net/npm/akron-agent-studio-embed/dist/web.js';
  Chatbot.init({
    chatflowid: '<your-chatflow-id>',
    apiHost: 'https://your-akron-instance.com',
    theme: {
      button: {
        backgroundColor: '#6366f1', // Akron brand color
        iconColor: 'white',
        size: 'medium',
      },
      chatWindow: {
        backgroundColor: '#000000', // Dark theme
        titleBackgroundColor: '#0f172a',
        titleTextColor: '#ffffff',
      },
    },
  });
</script>

Full Page Chatbot

<akron-agent-studio-fullchatbot></akron-agent-studio-fullchatbot>
<script type="module">
  import Chatbot from 'https://cdn.jsdelivr.net/npm/akron-agent-studio-embed/dist/web.js';
  Chatbot.initFull({
    chatflowid: '<your-chatflow-id>',
    apiHost: 'https://your-akron-instance.com',
    theme: {
      chatWindow: {
        height: '100%',
        width: '100%',
        backgroundColor: '#000000',
      },
    },
  });
</script>

Development

Install dependencies:

yarn install

Start development server:

yarn dev

A development server will run on http://localhost:5678. Update public/index.html to test:

<script type="module">
  import Chatbot from 'http://localhost:5678/web.js';
  Chatbot.init({
    chatflowid: '<your-chatflow-id>',
    apiHost: 'https://your-akron-instance.com',
  });
</script>

Build for production:

yarn build

Theme Customization

Full theme configuration example:

Chatbot.init({
  chatflowid: '<your-chatflow-id>',
  apiHost: 'https://your-akron-instance.com',
  theme: {
    button: {
      backgroundColor: '#6366f1',
      iconColor: 'white',
      size: 'medium', // 'small' | 'medium' | 'large'
      bottom: 20,
      right: 20,
    },
    chatWindow: {
      backgroundColor: '#000000',
      height: 600,
      width: 400,
      titleBackgroundColor: '#0f172a',
      titleTextColor: '#ffffff',
      title: 'Akron Agent',
      welcomeMessage: 'Hello! How can I help you today?',
    },
    userMessage: {
      backgroundColor: '#6366f1',
      textColor: '#ffffff',
    },
    botMessage: {
      backgroundColor: '#1e293b',
      textColor: '#ffffff',
    },
  },
});

License

MIT

Credits

Built with ❤️ by the Akron team.