Update README.md

langflow-ai · Jul 25, 2023 · 0704707 · 0704707
1 parent e94a005
commit 0704707
Showing 1 changed file with 21 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -58,6 +58,7 @@ npm run build
 
 ## Usage
 
+### on simple HTML
 ```html
 <html lang="en">
 <head>
@@ -74,6 +75,26 @@ npm run build
 </html>
 ```
 
+### on React
+ Import the js bundle in the index.html of your react project
+```html
+<script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
+```
+Encapsulate your custom element in a react component
+```html
+export default function ChatWidget() {
+  return (
+    <div>
+<langflow-chat
+    chat_input_field="input"
+    chat_inputs='{"input":""}'
+    host_url="langflow url"
+    flow_id="your_flow_id"></langflow-chat>
+    </div>
+  );
+}
+```
+
 ## Configuration
 
 Use the widget API to customize your widget: