Botty Widget

Drop the Botty chat bubble into any React app with a single component. The widget fetches your bot's public profile and chats through the hosted Botty API so it behaves exactly as trained in the dashboard.

Installation

npm install botty-widget
# or
yarn add botty-widget
# or
pnpm add botty-widget

Quick start

1. Copy the Bot ID from the Dashboard → Bottys tab.
2. Paste it into the widget component:

import { BottyWidget } from 'botty-widget'

export function SupportBubble() {
  return <BottyWidget botId="YOUR_BOT_ID" />
}

// With custom position
export function SupportBubbleTopLeft() {
  return (
    <BottyWidget 
      botId="YOUR_BOT_ID" 
      position="top-left" 
    />
  )
}

3. Deploy your app. The widget renders a floating FAB that opens the chat panel styled with your bot's theme.

Note: If you've set a widget position in your Botty dashboard settings, that will take precedence over the position prop.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | botId | string | – | Required. Bot ID copied from your Botty dashboard. | | apiUrl | string | https://app.botty.ai/api | Override when self-hosting the Botty API. | | launcherLabel | string | "💬" | Custom text/emoji shown inside the floating button. | | position | 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' | 'bottom-right' | Position of the widget on the screen. Can be overridden by bot's widget position setting. |

How it works

• Fetches /bots/public/:id to hydrate the widget with name, description, colors, and welcome message.
• Posts user questions to /bots/public/:id/chat, which the Botty backend processes using your workspace credits.
• Handles loading/error states and renders a lightweight chat history in memory.

Styling

The component ships with inline styles so you can drop it anywhere without extra CSS. If you need deeper customization, wrap the component in your own container or fork the package.

Requirements

• React 18+ (19 tested)
• Modern browsers (ES2020, fetch, async/await)

Development

pnpm install
pnpm build

The build step outputs ESM, CJS, and TypeScript declarations in dist/ via tsup.

Support

For dashboard or bot configuration issues, head back to the main Botty repo/documentation. For widget-specific bugs, open an issue or PR in this package.