This allows you to execute code in parent based upon signal observations within the chatbot.
<scripttype="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 changedobserveUserInput: (userInput) => {console.log({ userInput }); },// The bot message stack has changedobserveMessages: (messages) => {console.log({ messages }); },// The bot loading signal changedobserveLoading: (loading) => {console.log({ loading }); }, }, })</script>
Theme
You can change the pop up button properties, as well as the chat window:
<scripttype="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:48,// small | medium | large | number dragAndDrop: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,// show/hide the title bar title:'Flowise Bot', titleAvatarSrc:'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg', showAgentMessages:true, 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.
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', }, footer: { textColor:'#303235', text:'Powered by', company:'Flowise', companyLink:'https://flowiseai.com', }, }, }, });</script>
An alternative to jsdelivr is unpkg. Here is an example:
https://unpkg.com/flowise-embed/dist/web.js
CORS
When using embedded chat widget, there's chance that you might face CORS issue like:
Access to fetch at 'https://<your-flowise.com>/api/v1/prediction/' from origin 'https://<your-flowise.com>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
To fix it, specify the following environment variables: