@techmindsolutions/chatbot-iframe

A React component package for embedding a floating chatbot iframe in your application.

Installation

To install this private package in your projects:

1. Make sure you are logged in to npm with an account that has access(talk to publisher for access):

npm login

2. Install the package:

npm install @techmindsolutions/chatbot-iframe

Usage

import { FloatingChatbot } from '@techmindsolutions/chatbot-iframe';
import '@techmindsolutions/chatbot-iframe/style.css';

function App() {
  const handleFormSubmission = (payload: any) => {
    console.log('Form submission from chatbot:', payload);
  };

  return (
    <FloatingChatbot
      chatbotUrl="http://localhost:3000"
      onFormSubmit={handleFormSubmission}
    />
  );
}

Props

Prop	Type	Required	Description
chatbotUrl	string	Yes	The URL where your chatbot iframe is hosted
buttonStyles	React.CSSProperties	No	Custom styles for the chat toggle button
containerStyles	React.CSSProperties	No	Custom styles for the chatbot container
onFormSubmit	(payload: any) => void	No	Callback function that gets called when the chatbot submits a form

Advanced Usage

You can also access the chatbot store directly for more control:

import { useChatbotStore } from '@formbay/chatbot-iframe';

function App() {
  const { setIsOpen, sendDataToChatbot } = useChatbotStore();

  const sendDataToChatBot = () => {
    sendDataToChatbot({
      someKey: 'Custom data to send to chatbot'
    });
  };

  return (
    // Your component code
  );
}