interface-chatbot

interface-chatbot is a React component designed for easy integration of a chatbot interface into your projects. This package provides a customizable chatbot UI that can connect to various backend services through dynamic parameters.

Installation

To install the package, use the following npm command:

npm i interface-chatbot

Usage

To use the Chatbot component in your project, follow these steps:

1. Import the Component

   Import Chatbot into your React component file:

   import Chatbot from 'interface-chatbot';
   

2. Integrate the Chatbot Component

   Add the Chatbot component to your component's render method. Configure it using the available props as needed:

    {}}
       onClose={() => {}}
       threadId={""}
       bridgeName={""}
       variables={}
   />
   

3. Configure the chatbot to get the embedToken and set the chatbot configuration

   • Go to this website: ai-middleware.com

   • Log in or create an account if you haven't already.

   • Follow these steps to get your embedToken:

     1. Navigate to the Org or Bridges section.
     2. Give your prompt and chatbot specification.
     3. Look for the Chatbot option.
     4. Generate your chatbot embedToken with the help of given org_id, chatbot_id, user_id and sign the token with access_key

   • Once you have the embedToken:

     1. Add it to your configuration script as follows:
     2. Your embedding is ready, Now you can enjoy AI experience with Chatbot.

Props

Available Methods

1. Open chatbot explicitly

window.openChatbot()

2. Close chatbot explicitly

window.closeChatbot()

3. Refresh Chats

window.reloadChats()

Examples

Here's a simple example of how to integrate the Chatbot component into your React application:

import React from 'react';
import Chatbot from 'interface-chatbot';

function App() {
    const chatbotEmbedToken = 'your_embed_token_here';
    
    return (
        <div>
             console.log("Chatbot opened")}
                onClose={() =&gt; console.log("Chatbot closed")}
                threadId="your_thread_id"
                bridgeName="optional_bridge_name"
                variables={your_variables}
            /&gt;
        </div>
    );
}

export default App;

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue for any bugs or feature requests.

License

MIT.

Make sure to replace placeholders such as your_embed_token_here, your_thread_id, and your_variables with actual values or examples relevant to your implementation. This README aims to provide clear instructions on how to integrate and customize the chatbot, improving user experience and adoption.