Inline Chatbot Widget

A reusable chatbot component for React/Next.js applications.

Installation

Install the package using npm or yarn:

npm install inline-chatbot-widget
# or
yarn add inline-chatbot-widget

Usage

Import and use the ChatbotWidget component in your application:

import React from "react";
import { ChatbotWidget } from "inline-chatbot-widget";

const MyApp = () => {
  return (
    <div>
      <h1>My Application</h1>
      <div style={{ height: "75vh" }}>
        <ChatbotWidget botId="12345" />
      </div>
    </div>
  );
};

export default MyApp;

Props

The ChatbotWidget component accepts the following props:

• botId (string): The ID of the bot to be used.

Example

Here’s an example of how you can use the ChatbotWidget component in a Next.js page:

// app/index.js or app/index.tsx
import React from "react";
import { ChatbotWidget } from "inline-chatbot-widget";

const HomePage = () => {
  return (
    <div>
      <h1>Welcome to My Next.js App</h1>
      <div style={{ height: "75vh" }}>
        <ChatbotWidget botId="12345" />
      </div>
    </div>
  );
};

export default HomePage;

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Step-by-Step Guide for Users

1. Install the Package:

   npm install inline-chatbot-widget
   # or
   yarn add inline-chatbot-widget

2. Import and Use the ChatbotWidget Component:

   Import and place the ChatbotWidget component within your react application as follows:

   import React from "react";
   import { ChatbotWidget } from "inline-chatbot-widget";
   
   const MyApp = () => {
     return (
       <div>
         <h1>My Application</h1>
         <div style={{ height: "75vh" }}>
           <ChatbotWidget botId="12345" />
         </div>
       </div>
     );
   };
   
   export default MyApp;

3. Next.js Page Example:

   The ChatbotWidget component is compatible with Next.JS 13+ in both server and client components.

   // app/index.js or app/index.tsx
   import React from "react";
   import { ChatbotWidget } from "inline-chatbot-widget";
   
   const HomePage = () => {
     return (
       <div>
         <h1>Welcome to My Next.js App</h1>
         <div style={{ height: "75vh" }}>
           <ChatbotWidget botId="12345" />
         </div>
       </div>
     );
   };
   
   export default HomePage;