You can embed a chat widget to your website. Simply copy paste the embedded code provided to anywhere in the <body>
tag of your html file.
<script type="module">
import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';
Chatbot.init({
chatflowid: 'abc',
apiHost: 'http://localhost:3000',
chatflowConfig: {
"sessionId": "123",
"returnSourceDocuments": true
}
})
</script>
This allows you to execute code in parent based upon signal observations within the chatbot.
<script type="module">
import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';
Chatbot.init({
chatflowid: 'abc',
apiHost: 'http://localhost:3000',
observersConfig: {
// User input has changed
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 });
},
},
})
</script>
<script type="module">
import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';
Chatbot.init({
chatflowid: 'abc',
apiHost: 'http://localhost:3000',
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 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',
},
},
},
})
</script>
<script type="module">
import Chatbot from "https://cdn.jsdelivr.net/gh/username/forked-repo/dist/web.js"
Chatbot.init({
chatflowid: "chatflow-id",
apiHost: "http://localhost:3000",
})
</script>
<script type="module">
import Chatbot from "https://cdn.jsdelivr.net/gh/HenryHengZJ/FlowiseChatEmbed-Test/dist/web.js"
Chatbot.init({
chatflowid: "chatflow-id",
apiHost: "http://localhost:3000",
})
</script>