GaiaHub Embed React

React library to display GaiaHub chatbot on your website

Install

npm install @gaiahub/gaia-embed-react

or

yarn add @gaiahub/gaia-embed-react

How to use

Full Page Chat

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

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

Popup Chat

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 |