Blog

How to create an Osirus bot on the platform

luisgustavo

<p>Osirus is a powerful bot widget that offers a wide range of configuration options that allow you to customize the bot's behavior, appearance, and functionality, as well as providing quick access to important project information, making it a valuable addition to your website or app. In this blog post, we'll dive into the various Osirus options, giving you insights into how to fine-tune your bot's settings. </p><p>Here's an overview of the key Osirus options you can explore:</p><figure class="table"><table><thead><tr><th>Property</th><th>Type</th><th>Description</th><th>Example</th></tr></thead><tbody><tr><td>name</td><td><code>string</code></td><td>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.</td><td>“OsirusBot”</td></tr><tr><td>companyName</td><td><code>string</code></td><td>Optional. The company name will replace your bot name in the UI.</td><td>“Osirus”</td></tr><tr><td>companyIconUrl</td><td><code>string</code></td><td>Optional. Your company logo will appear in the widget header.</td><td>“https://bot.osirus.ai/images/Osirus-Icon.svg”</td></tr><tr><td>customColor</td><td><code>string</code></td><td>Optional. You can provide a hex color to customize the widget buttons.</td><td><code>"#006FE5"</code></td></tr><tr><td>description</td><td><code>string</code></td><td>Optional. Your company description will appear in the widget header.</td><td>“Osirus AI is an easy-to-use JavaScript plugin for embedding a customizable chatbot on your app or website, powered by AWS.”</td></tr><tr><td>phoneNumber</td><td><code>string</code></td><td>Optional. This will activate the call button.</td><td>“123-456-7890”</td></tr><tr><td>email</td><td><code>string</code></td><td>Optional. This will activate a <code>mailto</code> button that opens the user's default email client.</td><td>“info@osirus.ai”</td></tr><tr><td>docUrl</td><td><code>string</code></td><td>Optional. This value will activate a button and will open a window to view your docs in the same page.</td><td>“https://osirus.ai/docs/api”</td></tr><tr><td>apiDocUrl</td><td><code>string</code></td><td>Optional. This value will activate a button and will open a window to view your API docs in the same page.</td><td>“https://osirus.ai/docs/api”</td></tr><tr><td>support</td><td><code>object</code></td><td>Optional. You can use the format below to include your support button.</td><td><code>{ type: "page", value: "https://osirus.ai/support" }</code></td></tr><tr><td>support.type</td><td><code>'page' | 'email'</code></td><td>When set to <code>page</code>, the button will trigger a redirection when clicked by users, whereas if it's set to <code>email</code>, it will initiate a <code>mailto</code> action.</td><td>“page”</td></tr><tr><td>support.value</td><td><code>string</code></td><td>Depends on your type above, you can provide either an email address or an URL to your support page.</td><td>“info@osirus.ai” or “https://osirus.ai/support”</td></tr><tr><td>schedule</td><td><code>string</code></td><td>Optional. You can provide your operational hours in any format and it will appear in a section in the widget.</td><td>“M - F, 8:30AM - 5:30PM EDT”</td></tr><tr><td>address</td><td><code>object</code></td><td>Optional. You can use the format below to include your address.</td><td><code>{ streetAddress: '123 Orange Ave', city: 'Orlando', state: 'FL', postalCode: '38235', country: 'USA' }</code></td></tr><tr><td>address.streetAddress</td><td><code>string</code></td><td>The street address of your physical location.</td><td>“123 Orange Ave”</td></tr><tr><td>address.city</td><td><code>string</code></td><td>The city where your physical location is situated.</td><td>“Orlando”</td></tr><tr><td>address.state</td><td><code>string</code></td><td>The state or province of your physical location.</td><td>"FL"</td></tr><tr><td>address.postalCode</td><td><code>string</code></td><td>The postal code or ZIP code for your physical location.</td><td>“38235”</td></tr><tr><td>address.country</td><td><code>string</code></td><td>The country where your physical location is located.</td><td>“USA”</td></tr><tr><td>showMap</td><td><code>boolean</code></td><td>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.</td><td><code>false</code></td></tr><tr><td>googleMapApiKey</td><td><code>string</code></td><td>Refer to the Google Maps documentation for further guidance on how to get an API key: <a target="_blank" href="https://developers.google.com/maps/documentation/javascript/get-api-key">Google Maps API Key Documentation</a></td><td>“AIzaS...x2E_k”</td></tr><tr><td>popupMessage</td><td><code>string</code></td><td>Optional. This will activate a popup message that will appear for all visitors to your website.</td><td>“Hi! 👋 I'm Osirus, an AI assistant. \n How can I help you today?”</td></tr><tr><td>customOptions</td><td><code>object[]</code></td><td>Optional. You can create custom buttons in your widget following this format</td><td><code>[{ icon: 'people-group', label: 'Careers', link: 'https://www.solodev.com/careers', openNewTab: true }]</code></td></tr><tr><td>customOptions[index].icon</td><td><code>string</code></td><td>We use Font Awesome version 6 for icons. To find any icon, refer to this link: <a target="_blank" href="https://fontawesome.com/v6/search">Font Awesome Icons</a> and then provide the name.</td><td>“building”</td></tr><tr><td>customOptions[index].label</td><td><code>string</code></td><td>The label for your button</td><td>“About us”</td></tr><tr><td>customOptions[index].link</td><td><code>string</code></td><td>The URL you want the button to link to.</td><td>“https://osirus.ai/about”</td></tr><tr><td>customOptions[index].openNewTab</td><td><code>boolean</code></td><td>If set to <code>true</code>, clicking this button will open a new tab. Default is <code>false</code>.</td><td><code>false</code></td></tr></tbody></table></figure><p><span style="color:rgb(51,51,51)">Below, you will find an example of how to initialize the widget and all the available </span>configuration options<span style="color:rgb(51,51,51)">:</span></p><pre><code class="language-javascript">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,
  	},
  ] 
})</code></pre><p>Each of these options allows you to tailor Osirus AI to your project's specific requirements, making it a valuable asset for engaging your users and providing them with the information they need.</p>

Osirus Options

<p>Osirus is a versatile bot that can be seamlessly integrated into your web projects. Whether you're building a website or app, you can enhance the user experience with this bot. In this blog post, we'll walk you through the steps to set up the Osirus bot via NPM, allowing you to manage your bot directly within your project.</p><h4>Installation</h4><p>To easily install Osirus using NPM, follow these steps:</p><ol><li>Open your terminal.</li><li>Navigate to your project's root folder.</li><li>Execute the following command:</li></ol><pre><code class="language-plaintext">npm i @osirus/bot</code></pre><p>After successfully installing the package, you can initialize your Osirus bot by adding the following code to your JavaScript file:</p><pre><code class="language-javascript">import OsirusBot from '@osirus/bot';

OsirusBot.init(options)</code></pre><h4> </h4><h4>Configure your widget</h4><p>Before finalizing the installation, make sure to configure your bot according to your specific needs. You can define various options, such as the bot's name, company name, logo, colors, description, and more. This customization allows you to tailor the bot to match your branding and user experience requirements.</p><p>You have two options for initializing the bot:</p><ol><li><a href="/how-to-create-an-osirus-bot-on-the-platform"><strong>Create a bot on the platform</strong></a><strong>:</strong> This method is highly recommended because it allows you to make real-time updates to your widget without requiring any changes to your code.</li><li><a href="/osirus-options"><strong>Configure your bot with a JavaScript object</strong></a><strong>: </strong>You can provide all the necessary settings directly from your code.</li></ol>

How to set up the Osirus Bot through NPM

<p>Osirus AI is a handy widget built with React that offers quick access to documentation, APIs, contact information, and more. In this blog post, we'll guide you through the process of setting up the Osirus bot via CDN, making it a breeze to integrate into your web project.</p><p>If you have a web app with multiple pages where each one triggers a new page refresh then you can simply copy and paste the snippet below before the <code>&lt;/body&gt;</code> tag on every page or in your app HTML base template.</p><pre><code class="language-html">&lt;script src="https://bot.osirus.ai/lib/umd/osirusai.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
  OsirusBot.init(options);
&lt;/script&gt;</code></pre><h4> </h4><h4>Configure your widget</h4><p>Before finalizing the installation, make sure to configure your bot according to your specific needs. You can define various options, such as the bot's name, company name, logo, colors, description, and more. This customization allows you to tailor the bot to match your branding and user experience requirements.</p><p>You have two options for initializing the bot:</p><ol><li><a href="/how-to-create-an-osirus-bot-on-the-platform"><strong>Create a bot on the platform</strong></a><strong>:</strong> This method is highly recommended because it allows you to make real-time updates to your widget without requiring any changes to your code.</li><li><a href="/osirus-options"><strong>Configure your bot with a JavaScript object</strong></a><strong>: </strong>You can provide all the necessary settings directly from your code.</li></ol>

How to set up Osirus Bot via CDN

Explore a wide range of informative articles, insights, and industry updates. Stay informed and ahead of the curve with our diverse collection of news and posts covering the latest trends and developments in the industry. 

News

How to create an Osirus bot on the platform

Osirus Options

How to set up the Osirus Bot through NPM

How to set up Osirus Bot via CDN