Onyx Chat Bot Widget

Note: The widget requires a Onyx API key, which is a paid (cloud/enterprise) feature.

This is a code example for how you can use Onyx's APIs to build a chat bot widget for a website! The main code to look at can be found in src/app/widget/Widget.tsx.

Getting Started

To get the widget working on your webpage, follow these steps:

1. Install Dependencies

Ensure you have the necessary dependencies installed. From the examples/widget/README.md file:

npm i

2. Set Environment Variables

Make sure to set the environment variables NEXT_PUBLIC_API_URL and NEXT_PUBLIC_API_KEY in a .env file at the root of your project:

NEXT_PUBLIC_API_URL=
NEXT_PUBLIC_API_KEY=

3. Run the Development Server

Start the development server to see the widget in action.

npm run dev

Open http://localhost:3000 with your browser to see the result.

4. Integrate the Widget

To integrate the widget into your webpage, you can use the ChatWidget component. Here’s an example of how to include it in a page component:

import ChatWidget from "path/to/ChatWidget";
function MyPage() {
  return (
    <div>
      <h1>My Webpage</h1>
      <ChatWidget />
    </div>
  );
}
export default MyPage;

5. Deploy

Once you are satisfied with the widget, you can build and start the application for production:

npm run build
npm run start

Custom Styling and Configuration

If you need to customize the widget, you can modify the ChatWidget component in the examples/widget/src/app/widget/Widget.tsx file.

By following these steps, you should be able to get the chat widget working on your webpage.

If you want to get fancier, then take a peek at the Chat implementation within Onyx itself here.