Codeclouders-chat-widget NPM

Clouders Embedded Chat , Welcome 👋

Fully Responsive Chat Component To Embedded In Your Website

Example

<clouders-chat
    width="450"
    height="606"
    window_title="Support Chat"
    flow_id="your-flow-id"
    host_url="https://your-host.com"
    position="bottom-right"
    is_chat_arabic="false"
    online_message="Available 24/7"
    company_logo="path/to/logo.png"
    starter_messages='[" Hi! How can I help you today?"]'
    message_suggestions='["How does this work?", "What can you help me with?", "Tell me more about your features"]'
    main_color="#7e3f3f"
></clouders-chat>

Installation

Option 2: Local Build

Clone this repository to your local machine:

git clone https://github.com/

Navigate to the project directory:

cd clouders-embedded-chat

Build the project to generate the bundle:

npm install --legacy-peer-deps
npm audit fix --force
npm run build

# for startting the dev server
npm start

After the build process completes, you'll find the bundle in the dist/build/static/js folder. You can include this JavaScript file in your HTML:

<script src="path/to/your/langflow-widget.js"></script>

Configuration

Use the widget API to customize your widget:

Prop	Type	Required	Default	Description
width	number	No	300	Width of chat window in pixels
height	number	No	650	Height of chat window in pixels
window_title	string	No	"Chat"	Title displayed in the chat window
flow_id	string	Yes	-	Unique identifier for the chat flow
host_url	string	Yes	-	URL of the host server
position	string	No	"bottom-right"	Position of chat window (e.g., "bottom-right", "top-left")
is_chat_arabic	boolean	No	false	Enable RTL layout for Arabic
online_message	string	No	"We'll reply as soon as we can"	Message shown when chat is online
company_logo	string	No	-	URL or base64 of company logo
starter_messages	array	No	[]	Initial messages to show in chat
message_suggestions	array	No	[]	Suggested messages shown as quick replies
main_color	string	No	"#22C55E"	Primary color for chat theme