@atomunico/gabster-react-widget

React component library for embedding Gabster AI chatbot widgets into your web application.

Requirements

| Peer Dependency | Version | |---|---| | react | ^19.0.0 | | react-dom | ^19.0.0 |

Installation

npm install @atomunico/gabster-react-widget

Components

<GabsterWidget />

Renders the Gabster floating chat widget (icon button + chat panel).

import { GabsterWidget } from '@atomunico/gabster-react-widget';

function App() {
  return <GabsterWidget chatbotId="your-chatbot-id" />;
}

<GabsterIframe />

Renders the Gabster chatbot as a full embedded iframe — useful for placing the chat UI directly inside a layout container.

import { GabsterIframe } from '@atomunico/gabster-react-widget';

function App() {
  return (
    <div style={{ height: '500px', width: '400px' }}>
      <GabsterIframe chatbotId="your-chatbot-id" />
    </div>
  );
}

Props

Both GabsterWidget and GabsterIframe accept the same props:

| Prop | Type | Default | Description | |---|---|---|---| | chatbotId | string | required | Your unique Gabster chatbot ID from the dashboard | | env | "prod" \| "dev" | "prod" | Target environment. Use "dev" to point to the staging backend |

chatbotId

Your chatbot ID is found in the Gabster dashboard. Each chatbot has a unique ID.

<GabsterWidget chatbotId="66b233e7b51ba1595a9c55c6" />

env

Use "dev" during development to connect to the staging backend.

// Production (default)
<GabsterWidget chatbotId="your-chatbot-id" env="prod" />

// Staging / development
<GabsterWidget chatbotId="your-chatbot-id" env="dev" />

Default and Named Exports

The package supports both import styles:

// Named imports (recommended)
import { GabsterWidget, GabsterIframe } from '@atomunico/gabster-react-widget';

// Default import (resolves to GabsterWidget)
import GabsterWidget from '@atomunico/gabster-react-widget';

TypeScript

The package ships with full TypeScript types. You can import the props interface directly if needed:

import type { GabsterWidgetProps } from '@atomunico/gabster-react-widget/dist/types/types/gabster.types';

Features

• AI-Driven Chatbots — customize chatbots that align with your brand
• Predictive Responses — AI-powered suggestions for quicker and smarter responses
• Sentiment Analysis — analyze customer emotions in real-time
• Multilingual Support — serve customers in multiple languages
• Analytics & Insights — real-time data tracking for optimizing engagement

Visit gabster.ai for more information.

License

MIT