@clikvn/chatbot-embedded
v0.0.17-demo-01
Published
Javascript library to display clik chatbot on your website
Downloads
259
Keywords
Readme
Clik Embed
Javascript library to display Clik chatbot on your website
Install:
yarn install
Dev:
yarn dev
A development server will be running on http://localhost:5678 automatically. Update public/index.html
to connect directly to Flowise:
<!-- public/index.html -->
<script type="module">
import Chatbot from 'https://localhost:5678/web.js'; // Change to from './web.js' to 'https://localhost:5678/web.js'
Chatbot.init({
chatflowid: '91e9c803-5169-4db9-8207-3c0915d71c5f', // Add your Flowise chatflowid
apiHost: 'https://your-flowise-instance.com', // Add your Flowise apiHost
});
</script>
Build:
yarn build
Embed in your HTML
PopUp
<script type="module">
import Chatbot from 'https://cdn.jsdelivr.net/npm/@clikvn/chatbot-embedded/dist/web.js';
Chatbot.init({
chatflowid: '<chatflowid>',
apiHost: 'http://localhost:3000',
});
</script>
FullPage
<script type="module">
import Chatbot from 'https://cdn.jsdelivr.net/npm/@clikvn/chatbot-embedded/dist/web.js';
Chatbot.initFull({
chatflowid: '<chatflowid>',
apiHost: 'http://localhost:3000',
});
</script>
<clik-fullchatbot></clik-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 'https://cdn.jsdelivr.net/npm/@clikvn/chatbot-embedded/dist/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/@clikvn/chatbot-embedded/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>',
textColor: 'black',
buttonColor: '#3b82f6',
buttonText: 'Start Chatting',
buttonTextColor: 'white',
blurredBackgroundColor: 'rgba(0, 0, 0, 0.4)', //The color of the blurred background that overlays the chat interface
backgroundColor: 'white',
},
customCSS: ``, // Add custom CSS styles. Use !important to override default styles
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',
},
},
},
});
</script>
License
Source code in this repository is made available under the [MIT License].