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.

Available Scripts

In the project directory, you can run:

npm run dev

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm run build

This generates the dist folder and under it you will find the UMD and ESM libraries.

npm run build:web

Creates a static website version of the app where you can test the Widget This process generates a build folder containing the necessary files and can be deployed in services like S3 Bucket.

Creating and Pushing Tags / Versions

The pipelines will be triggered every time you push a new tag. To do that, you can run the following commands (Substitute the x values for numbers):

git tag vx.x.x
git push --tags

This will upload the latest version of your app to the s3://widget.osirus.ai bucket. You can then access the widget file at https://bot.osirus.ai/lib/umd/osirusai.min.js.

Widget set up by CDN

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">
  OsirusaiWidget.init({
    companyName:  '{ company_name }',
    intercomId: '{ intercom_chat_id }',
    phoneNumber: '{ phone_number }',
    info: {
      hours: '{ hours }', // eg: 'M - F, 8:30AM - 5:30PM EDT'
      email: '{ company_email }',
      address: '{ company_address }',
    }
  });
</script>

Widget set up by NPM

Coming soon...

Preview Widget Locally

To preview your changes in an environment resembling the production setup, follow these steps:

1. Start by running npm run build to generate the necessary build files.
2. Once the build process is finished, open test/index.html in your preferred web browser.
3. You should now be able to see the widget displayed within a blank website, allowing you to assess how your changes will appear in a production-like setting.