@procoders/omnimind-react

Omnimind-React

Easily integrate Omnimind widgets into your React app with the omnimind-react package.

Installation

You can install the omnimind-react package using npm:

npm install omnimind-react

Usage

1. First, make sure you have an account with Omnimind and have obtained the necessary credentials.

2. Import the necessary components from the omnimind-react package into your React application:

import { OmnimindWidget } from 'omnimind-react';

3. Use the OmnimindWidget component in your JSX to display the desired Omnimind widget. Pass the required props, such as widgetId and projectId

import { OmnindWidget } from "omnimind-react";

function App() {
  return (
    <div style={{height: "100%", backgroundColor: "#060818;"}}>
        <OmnimindWidget
            widgetType="chat"
            widgetId="your-widget-id" 
            projectId="your-project-id"
        />
    </div>
  );
}

export default App;

Props

Prop	Type	Description
widgetType	WidgetTypes	The type of the Omnimind widget.
widgetId	string	The ID of the Omnimind widget to display.
projectId	string	The ID of the Omnimind project associated.

Widget types

The widgetType prop accepts the following values:

• 'chat': Display a chat widget.
• 'search': Display a search widget.
• 'popup-chat': Display a popup chat widget.
• 'doc-search': Display a document search widget.
• 'explain': Display an explanation widget.

Customize

Additionally, you can customize widgets using CSS variables.

Examples of CSS variables:

• --omni-offset-bottom
• --omni-button-size
• --omni-popup-color
• and others

Troubleshooting

• Some widgets such as ChatWidget should not have parent elements with vh values to avoid scroll-related issues on mobiles.