The Langflow Chat Widget is a powerful web component that enables communication with a Langflow project. This widget allows for a chat interface embedding, allowing the integration of Langflow into web applications effortlessly.
🚀 Interactive Chat Interface: Engage your users with a user-friendly conversation, powered by Langflow's advanced language understanding capabilities.
🎛️ Customizable Styling: Customize the appearance of the chat widget to match your application's design and branding.
🌐 Multilingual Support: Communicate with users in multiple languages, opening up your application to a global audience.
You can get the HTML code embedded with the chat by clicking the Code button at the Sidebar after building a flow.
Clicking the Chat Widget HTML tab, you'll get the code to be inserted. Read below to learn how to use it with HTML, React and Angular.
The Chat Widget can be embedded into any HTML page, inside a
<body> tag, as demonstrated in the video below.
To embed the Chat Widget using React, you'll need to insert this
<script> tag into the React index.html file, inside the
Then, declare your Web Component and encapsulate it in a React component.
Finally, you can place the component anywhere in your code to display the Chat Widget.
To use it in Angular, first add this
<script> tag into the Angular index.html file, inside the
When you use a custom web component in an Angular template, the Angular compiler might show a warning when it doesn't recognize the custom elements by default. To suppress this warning, add
CUSTOM_ELEMENTS_SCHEMA to the module's
Open the module file (it typically ends with .module.ts) where you'd add the
CUSTOM_ELEMENTS_SCHEMAat the top of the file:
CUSTOM_ELEMENTS_SCHEMAto the 'schemas' array inside the '@NgModule' decorator:
Use the widget API to customize your Chat Widget: