Merge pull request arc53#1093 from shelar1423/main

Widget Documentation update
mir-one · Aug 25, 2024 · 213b1d1 · 213b1d1
2 parents 535d174 + feab64b
commit 213b1d1
Showing 1 changed file with 38 additions and 22 deletions.
diff --git a/docs/pages/Extensions/react-widget.md b/docs/pages/Extensions/react-widget.md
@@ -17,25 +17,31 @@ Now, you can use the widget in your component like this :
 ```jsx
 <DocsGPTWidget
   apiHost="https://your-docsgpt-api.com"
-  selectDocs="local/docs.zip"
   apiKey=""
   avatar = "https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png",
   title = "Get AI assistance",
   description = "DocsGPT's AI Chatbot is here to help",
   heroTitle = "Welcome to DocsGPT !",
   heroDescription="This chatbot is built with DocsGPT and utilises GenAI, 
   please review important information using sources."
+  theme = "dark"
+  buttonIcon = "https://your-icon"
+  buttonBg = "#222327"
 />
 ```
 DocsGPTWidget takes 8 **props** with default fallback values:
 1. `apiHost` — The URL of your DocsGPT API.
-2. `selectDocs` — The documentation source that you want to use for your widget (e.g. `default` or `local/docs1.zip`).
+2. `theme` — Allows to select your specific theme (dark or light).
 3. `apiKey` — Usually, it's empty.
 4. `avatar`: Specifies the URL of the avatar or image representing the chatbot.
 5. `title`: Sets the title text displayed in the chatbot interface.
 6. `description`: Provides a brief description of the chatbot's purpose or functionality.
 7. `heroTitle`: Displays a welcome title when users interact with the chatbot.
 8. `heroDescription`: Provide additional introductory text or information about the chatbot's capabilities.
+9. `buttonIcon`: Specifies the url of the icon image for the widget.
+10. `buttonBg`: Allows to specify the Background color of the widget.
+11. `size`: Sets the size of the widget ( small, medium).
+
 
 ### How to use DocsGPTWidget with [Nextra](https://nextra.site/) (Next.js + MDX)
 Install your widget as described above and then go to your `pages/` folder and create a new file `_app.js` with the following content:
@@ -55,22 +61,30 @@ export default function MyApp({ Component, pageProps }) {
 ```html
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>DocsGPT Widget</title>
-</head>
-<body>
-  <div id="app"></div>
-  <!-- Include the widget script from dist/modern or dist/legacy -->
-  <script src="https://unpkg.com/docsgpt/dist/modern/main.js" type="module"></script>
-  <script type="module">
-    window.onload = function() {
-      renderDocsGPTWidget('app');
-    }
-  </script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>HTML + CSS</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>This is a simple HTML + CSS template!</h1>
+    <div id="app"></div>
+    <!-- Include the widget script from dist/modern or dist/legacy -->
+    <script
+      src="https://unpkg.com/docsgpt/dist/modern/main.js"
+      type="module"
+    ></script>
+    <script type="module">
+      window.onload = function () {
+        renderDocsGPTWidget("app", {
+          apiKey: "",
+          size: "medium",
+        });
+      };
+    </script>
+  </body>
 </html>
 ```
 To link the widget to your api and your documents you can pass parameters to the renderDocsGPTWidget('div id', { parameters }).
@@ -82,22 +96,24 @@ To link the widget to your api and your documents you can pass parameters to the
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>DocsGPT Widget</title>
+  <script src="https://unpkg.com/docsgpt/dist/modern/main.js" type="module"></script>  
 </head>
 <body>
   <div id="app"></div>
   <!-- Include the widget script from dist/modern or dist/legacy -->
-  <script src="https://unpkg.com/docsgpt/dist/modern/main.js" type="module"></script>
   <script type="module">
     window.onload = function() {
       renderDocsGPTWidget('app', {
         apiHost: 'http://localhost:7001',
-        selectDocs: 'default',
-        apiKey: '',
+        apiKey:"",
         avatar: 'https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png',
         title: 'Get AI assistance',
         description: "DocsGPT's AI Chatbot is here to help",
         heroTitle: 'Welcome to DocsGPT!',
-        heroDescription: 'This chatbot is built with DocsGPT and utilises GenAI, please review important information using sources.'
+        heroDescription: 'This chatbot is built with DocsGPT and utilises GenAI, please review important information using sources.',
+        theme:"dark"
+        buttonIcon:"https://your-icon",
+        buttonBg:"#222327"
       });
     }
   </script>