@osirus/bot

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.	"[e-mail]"
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.	"[e-mail]" 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