npm package: @gaiahub/gaia-embed-react
Description: React library to display Gaia Apps on your website
Latest version: 1.2.0

<!-- markdownlint-disable MD030 -->

# GaiaHub Embed React

React library to display GaiaHub chatbot on your website

![GaiaHub](https://github.com/gaiahub/gaia-embed/blob/main/images/ChatEmbed.gif?raw=true)

## Install


```bash
npm install @gaiahub/gaia-embed-react
```

or

```bash
yarn add @gaiahub/gaia-embed-react
```

## How to use

### Full Page Chat

```tsx
import { FullPageChat } from "@gaiahub/gaiahub-embed-react";

const App = () => {
  return (
    <FullPageChat
      chatflowid="your-chatflow-id"
      customConfig={{
        ...OPTIONAL_CUSTOM_CONFIG
      }}
    />
  );
};
```

### Popup Chat

```tsx
import { BubbleChat } from "@gaiahub/gaiahub-embed-react";

const App = () => {
  return (
    <BubbleChat 
      chatflowid="your-chatflow-id"
      customConfig={{
        ...OPTIONAL_CUSTOM_CONFIG
      }}
    />
  );
};
```

## Custom Config

| Name                        | Type    | Default Value                              | Allowed Values                                  |
|-----------------------------|---------|---------------------------------------------|--------------------------------------------------|
| `title`                     | string  | `Gaiahub Chatbot`                          | any                                              |
| `titleAvatarSrc`            | string  | empty                                       | any image URL                                    |
| `welcomeMessage`            | string  | `'Hello! How can I help you today?'`         | any                                              |
| `backgroundColor`           | string  | `#ffffff`                                   | any color string                                 |
| `headerBackgroundColor`     | string  | `#2b7a55`                                   | any color string                                 |
| `headerTextColor`           | string  | `#ffffff`                                   | any color string                                 |
| `fontSize`                  | number  | `16`                                         | any number                                       |
| `badgeBackgroundColor`      | string  | `#ffffff`                                   | any color string                                 |
| `poweredByTextColor`        | string  | `#162e23`                                   | any color string                                 |
| `botMessageBackgroundColor` | string  | `#f2f2f2`                                   | any color string                                 |
| `botMessageTextColor`       | string  | `#282828`                                   | any color string                                 |
| `botMessageAvatarSrc`       | string  | `''`                                         | any image URL                                    |
| `botMessageShowAvatar`      | boolean | `true`                                       | `true`, `false`                                  |
| `userMessageBackgroundColor`| string  | `#b8d5c8`                                   | any color string                                 |
| `userMessageTextColor`      | string  | `#282828`                                   | any color string                                 |
| `userMessageAvatarSrc`      | string  | `''`                                         | any image URL                                    |
| `userMessageShowAvatar`     | boolean | `true`                                       | `true`, `false`                                  |
| `textInputBackgroundColor`  | string  | `#ffffff`                                   | any color string                                 |
| `textInputTextColor`        | string  | `#282828`                                   | any color string                                 |
| `textInputPlaceholder`      | string  | `'Type a message...'`                       | any                                              |
| `textInputSendButtonColor`  | string  | `#225e42`                                   | any color string                                 |
| `bubbleButtonSize`          | string  | `medium`                                     | `small`, `medium`, `large`                       |
| `bubbleButtonBackgroundColor`| string | `''`                                         | any color string                                 |
| `bubbleButtonIconColor`     | string  | `''`                                         | any color string                                 |
| `bubbleButtonCustomIconSrc` | string  | `''`                                         | any image URL                                    |
| `bubbleChatwindowHeight`    | string  | `''`                                         | any                                              |
| `bubbleButtonAnchor`        | string  | `bottom-right`                               | `top-left`, `top-right`, `bottom-left`, `bottom-right` |