From 0530f4283ee5ac646f7601e472e36f71b153d150 Mon Sep 17 00:00:00 2001
From: josvdw <jos@danswer.ai>
Date: Wed, 14 Aug 2024 09:55:59 -0700
Subject: [PATCH] updating readme for widget (#2132)

Co-authored-by: Jos Van der westhuizen <jos@danser.ai>
---
 examples/widget/.env.example |  2 ++
 examples/widget/README.md    | 59 +++++++++++++++++++++++++++++++++---
 2 files changed, 57 insertions(+), 4 deletions(-)
 create mode 100644 examples/widget/.env.example

diff --git a/examples/widget/.env.example b/examples/widget/.env.example
new file mode 100644
index 000000000..b92284bf2
--- /dev/null
+++ b/examples/widget/.env.example
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_API_URL=https://example.danswer.ai
+NEXT_PUBLIC_API_KEY=some_long_api_key_here
\ No newline at end of file
diff --git a/examples/widget/README.md b/examples/widget/README.md
index 53976cd72..cb32ecd07 100644
--- a/examples/widget/README.md
+++ b/examples/widget/README.md
@@ -1,19 +1,70 @@
-This is a code example for how you can use Danswer'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`.
+# Danswer Chat Bot Widget
+Note: The widget requires a Danswer API key, which is a paid (cloud/enterprise) feature.
 
-If you want to get fancier, then take a peek at the Chat implementation within Danswer itself [here](https://github.com/danswer-ai/danswer/blob/main/web/src/app/chat/ChatPage.tsx#L82).
+This is a code example for how you can use Danswer'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
 
-First, install the requirements:
+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:
 ```bash
 npm i
 ```
 
-Then run the development server:
+
+### 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:
+
+```bash
+NEXT_PUBLIC_API_URL=
+NEXT_PUBLIC_API_KEY=
+```
+
+### 3. Run the Development Server
+
+Start the development server to see the widget in action.
 
 ```bash
 npm run dev
 ```
 
 Open [http://localhost:3000](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:
+
+```jsx
+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:
+
+```bash
+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 Danswer itself [here](https://github.com/danswer-ai/danswer/blob/main/web/src/app/chat/ChatPage.tsx#L82).
\ No newline at end of file