Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/FlowiseAI/FlowiseChatEmbed

Last synced: 14 days ago
JSON representation

Host: GitHub
URL: https://github.com/FlowiseAI/FlowiseChatEmbed
Owner: FlowiseAI
Created: 2023-05-09T13:07:21.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-05-28T16:06:32.000Z (6 months ago)
Last Synced: 2024-05-29T06:36:37.293Z (6 months ago)
Language: TypeScript
Size: 2.84 MB
Stars: 258
Watchers: 6
Forks: 1,085
Open Issues: 29
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

jimsghstars - FlowiseAI/FlowiseChatEmbed - (TypeScript)

README

# Flowise Embed

Javascript library to display flowise chatbot on your website

![Flowise](https://github.com/FlowiseAI/FlowiseChatEmbed/blob/main/images/ChatEmbed.gif?raw=true)

Install:

```bash
yarn install
```

Dev:

```bash
yarn dev
```

Build:

```bash
yarn build
```

## Embed in your HTML

### PopUp

```html

import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';
Chatbot.init({
chatflowid: '<chatflowid>',
apiHost: 'http://localhost:3000',
});

```

### FullPage

```html

import Chatbot from './web.js';
Chatbot.initFull({
chatflowid: '<chatflowid>',
apiHost: 'http://localhost:3000',
});

```

To enable full screen, add `margin: 0` to body style, and confirm you don't set height and width

```html

import Chatbot from './web.js';
Chatbot.initFull({
chatflowid: '<chatflowid>',
apiHost: 'http://localhost:3000',
theme: {
chatWindow: {
// height: 700, don't set height
// width: 400, don't set width
},
},
});

```

## Configuration

You can also customize chatbot with different configuration

```html

import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';
Chatbot.init({
chatflowid: '91e9c803-5169-4db9-8207-3c0915d71c5f',
apiHost: 'http://localhost:3000',
chatflowConfig: {
// topK: 2
},
observersConfig: {
// (optional) Allows you to execute code in parent based upon signal observations within the chatbot.
// The userinput field submitted to bot ("" when reset by bot)
observeUserInput: (userInput) => {
console.log({ userInput });
},
// The bot message stack has changed
observeMessages: (messages) => {
console.log({ messages });
},
// The bot loading signal changed
observeLoading: (loading) => {
console.log({ loading });
},
},
theme: {
button: {
backgroundColor: '#3B81F6',
right: 20,
bottom: 20,
size: 48, // small | medium | large | number
dragAndDrop: true,
iconColor: 'white',
customIconSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',
autoWindowOpen: {
autoOpen: true, //parameter to control automatic window opening
openDelay: 2, // Optional parameter for delay time in seconds
autoOpenOnMobile: false, //parameter to control automatic window opening in mobile
},
},
tooltip: {
showTooltip: true,
tooltipMessage: 'Hi There 👋!',
tooltipBackgroundColor: 'black',
tooltipTextColor: 'white',
tooltipFontSize: 16,
},
disclaimer: {
title: 'Disclaimer',
message: 'By using this chatbot, you agree to the <a target="_blank" href="https://flowiseai.com/terms">Terms & Condition</a>',
},
chatWindow: {
showTitle: true,
showAgentMessages: true,
title: 'Flowise Bot',
titleAvatarSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',
welcomeMessage: 'Hello! This is custom welcome message',
errorMessage: 'This is a custom error message',
backgroundColor: '#ffffff',
backgroundImage: 'enter image path or link', // If set, this will overlap the background color of the chat window.
height: 700,
width: 400,
fontSize: 16,
starterPrompts: ['What is a bot?', 'Who are you?'], // It overrides the starter prompts set by the chat flow passed
starterPromptFontSize: 15,
clearChatOnReload: false, // If set to true, the chat will be cleared when the page reloads
sourceDocsTitle: 'Sources:'
renderHTML: true,
botMessage: {
backgroundColor: '#f7f8ff',
textColor: '#303235',
showAvatar: true,
avatarSrc: 'https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/parroticon.png',
},
userMessage: {
backgroundColor: '#3B81F6',
textColor: '#ffffff',
showAvatar: true,
avatarSrc: 'https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png',
},
textInput: {
placeholder: 'Type your question',
backgroundColor: '#ffffff',
textColor: '#303235',
sendButtonColor: '#3B81F6',
maxChars: 50,
maxCharsWarningMessage: 'You exceeded the characters limit. Please input less than 50 characters.',
autoFocus: true, // If not used, autofocus is disabled on mobile and enabled on desktop. true enables it on both, false disables it on both.
sendMessageSound: true,
// sendSoundLocation: "send_message.mp3", // If this is not used, the default sound effect will be played if sendSoundMessage is true.
receiveMessageSound: true,
// receiveSoundLocation: "receive_message.mp3", // If this is not used, the default sound effect will be played if receiveSoundMessage is true.
},
feedback: {
color: '#303235',
},
dateTimeToggle: {
date: true,
time: true,
},
footer: {
textColor: '#303235',
text: 'Powered by',
company: 'Flowise',
companyLink: 'https://flowiseai.com',
},
},
},
});

```

## License

Source code in this repository is made available under the [MIT License](https://github.com/FlowiseAI/Flowise/blob/master/LICENSE.md).