Javascript library to display flowise chatbot on your website
Install:
yarn installDev:
yarn devBuild:
yarn build<scripttype="module">importChatbotfrom'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';Chatbot.init({chatflowid: '<chatflowid>',apiHost: 'http://localhost:3000',});</script><scripttype="module">importChatbotfrom'./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
<bodystyle="margin: 0"><scripttype="module">importChatbotfrom'./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>You can also customize chatbot with different configuration
<scripttype="module">importChatbotfrom'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 changedobserveMessages: (messages)=>{console.log({ messages });},// The bot loading signal changedobserveLoading: (loading)=>{console.log({ loading });},},theme: {button: {backgroundColor: '#3B81F6',right: 20,bottom: 20,size: 48,// small | medium | large | numberdragAndDrop: true,iconColor: 'white',customIconSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',},tooltip: {showTooltip: true,tooltipMessage: 'Hi There 👋!',tooltipBackgroundColor: 'black',tooltipTextColor: 'white',tooltipFontSize: 16,},chatWindow: {showTitle: 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',height: 700,width: 400,fontSize: 16,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.},feedback: {color: '#303235',},footer: {textColor: '#303235',text: 'Powered by',company: 'Flowise',companyLink: 'https://flowiseai.com',},},},});</script>Source code in this repository is made available under the MIT License.