This project is like a handy widget you can plug into other websites. It's built with React and gives users quick access to important project stuff like documentation, APIs, contact info, and more.

Installation

You can install Osirus AI to your website or app via CDN or npm package manager

NPM Installation

To easily install Osirus AI using NPM, follow these steps:

1. Open your terminal.
2. Navigate to your project's root folder.
3. Execute the following command:

npm i @osirus/bot

Once you've successfully installed the package, you can initialize your bot by adding the following code to your JavaScript file:

import OsirusBot from '@osirus/bot';

OsirusBot.init(options)

CDN Installation

You can easily set up the widget by adding the following script just before the closing </body> tag in your HTML:

<script src="https://bot.osirus.ai/lib/umd/osirusai.min.js" type="text/javascript"></script>
<script type="text/javascript">
  OsirusBot.init(options);
</script>

Configure your widget

You have two options for initializing the widget. You can either configure it by providing all the necessary settings as a JavaScript object, or you can simply sign up at https://osirus.ai and create a bot on the platform. Then, specify the botId in your configuration.

The latter method is highly recommended because it allows you to make real-time updates to your widget without requiring any changes to your code.

App set up

If you choose to create your bot on https://osirus.ai, you can initialize the bot using the following method:

OsirusBot.init({
  // ideally, you can store your ID in an environment file for easy access, like: `process.env.OSIRUS_BOT_ID`
  botId: string, 
})

Local Configuration

Below, you will find an example of how to initialize the widget and all the available configuration options:

OsirusBot.init({
  name: string,
  companyName: string,
  companyIconUrl: string,
  customColor: string,
  description: string,
  phoneNumber: string,
  email: string,
  docUrl: string,
  apiDocUrl: string,
  support: {
  	type: 'page' | 'email',
  	value: string,
  },
  schedule: string,
  address: {
  	streetAddress: string,
  	city: string,
  	state: string,
  	postalCode: string,
  	country: string,
  },
  showMap: boolean,
  googleMapApiKey: string,
  popupMessage: string,
  customOptions: [
  	{
  		icon: string,
  		label: string,
  		link: string,
  		openNewTab: boolean,
  	},
  ] 
})

Osirus Options

| Property | Type | Description | Example | |-------------------|----------------------------------|-------------------------------------------------------------------------|--------------------------------| | name | string | Required. A bot name will appear at the top of the widget and will be a unique identifier if it is registered on the platform in the future. | "OsirusBot" | | companyName | string | Optional. The company name will replace your bot name in the UI. | "Osirus" | | companyIconUrl | string | Optional. Your company logo will appear in the widget header. | "https://bot.osirus.ai/images/Osirus-Icon.svg" | | customColor | string | Optional. You can provide a hex color to customize the widget buttons. | "#006FE5" | | description | string | Optional. Your company description will appear in the widget header. | "Osirus AI is an easy-to-use JavaScript plugin for embedding a customizable chatbot on your app or website, powered by AWS." | | phoneNumber | string | Optional. This will activate the call button. | "123-456-7890" | | email | string | Optional. This will activate a mailto button that opens the user's default email client. | "[email protected]" | | docUrl | string | Optional. This value will activate a button and will open a window to view your docs in the same page. | "https://osirus.ai/docs" | | apiDocUrl | string | Optional. This value will activate a button and will open a window to view your API docs in the same page. | "https://osirus.ai/docs/api" | | support | object | Optional. You can use the format below to include your support button. | { type: "page", value: "https://osirus.ai/support" } | | support.type | 'page' | 'email' | When set to page, the button will trigger a redirection when clicked by users, whereas if it's set to email, it will initiate a 'mailto' action. | "page" | | support.value | string | Depends on your type above, you can provide either an email address or an URL to your support page. | "[email protected]" or "https://osirus.ai/support" | | schedule | string | Optional. You can provide your operational hours in any format and it will appear in a section in the widget. | "M - F, 8:30AM - 5:30PM EDT" | | address | object | Optional. You can use the format below to include your address. | { streetAddress: '123 Orange Ave', city: 'Orlando', state: 'FL', postalCode: '38235', country: 'USA' } | | address.streetAddress | string | The street address of your physical location. | "123 Orange Ave" | | address.city | string | The city where your physical location is situated. | "Orlando" | | address.state | string | The state or province of your physical location. | "FL" | | address.postalCode | string | The postal code or ZIP code for your physical location. | "38235" | | address.country | string | The country where your physical location is located. | "USA" | | showMap | boolean | Optional. This will activate a map preview feature that will display your address in your widget but be aware that you need to provide your Google Map API Key. | true | | googleMapApiKey | string | Refer to the Google Maps documentation for further guidance on how to get an API key: Google Maps API Key Documentation | "AIzaS...x2E_k" | | popupMessage | string | Optional. This will activate a popup message that will appear for all visitors to your website. | "Hi! 👋 I'm Osirus, an AI assistant. \n How can I help you today?" | | customOptions | object[] | Optional. You can create custom buttons in your widget following this format | [ { icon: 'people-group', label: 'Careers', link: 'https://www.solodev.com/careers', openNewTab: true } ] | | customOptions[index].icon | string | We use Font Awesome version 6 for icons. To find any icon, refer to this link: Font Awesome Icons and then provide the name. | "building" | | customOptions[index].label | string | The label for your button | "About Us" | | customOptions[index].link | string | The URL you want the button to link to. | "https://osirus.ai/about" | | customOptions[index].openNewTab | boolean | If set to true, clicking this button will open a new tab. Default is false. | false |