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.