1.2.3 • Published 7 days ago
flowise-embed v1.2.3
Flowise Embed
Javascript library to display flowise chatbot on your website
Install:
yarn install
Dev:
yarn dev
Build:
yarn build
Embed in your HTML
PopUp
<script type="module">
import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';
Chatbot.init({
chatflowid: '<chatflowid>',
apiHost: 'http://localhost:3000',
});
</script>
FullPage
<script type="module">
import Chatbot from './web.js';
Chatbot.initFull({
chatflowid: '<chatflowid>',
apiHost: 'http://localhost:3000',
});
</script>
<flowise-fullchatbot></flowise-fullchatbot>
To enable full screen, add margin: 0
to body style, and confirm you don't set height and width
<body style="margin: 0">
<script type="module">
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
},
},
});
</script>
</body>
Configuration
You can also customize chatbot with different configuration
<script type="module">
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: 'medium',
iconColor: 'white',
customIconSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',
},
chatWindow: {
showTitle: true, // show/hide the title bar
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',
height: 700,
width: 400,
fontSize: 16,
poweredByTextColor: '#303235',
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',
},
feedback: {
color: '#303235',
},
},
},
});
</script>
License
Source code in this repository is made available under the MIT License.
1.2.3
7 days ago
1.2.2
15 days ago
1.2.1
1 month ago
1.2.0
2 months ago
1.1.0
2 months ago
1.0.20
2 months ago
1.0.19
3 months ago
1.0.18
4 months ago
1.0.17
5 months ago
1.0.16
6 months ago
1.0.15
6 months ago
1.0.14
6 months ago
1.0.13
7 months ago
1.0.9
10 months ago
1.0.8
10 months ago
1.0.7
10 months ago
1.0.6
10 months ago
1.0.5
11 months ago
1.0.4
11 months ago
1.0.3
11 months ago
1.0.11
10 months ago
1.0.10
10 months ago
1.0.12
9 months ago
1.0.2
1 year ago
1.0.1
1 year ago
1.0.0
1 year ago