Embed
Learn how to embed our in-house chat widget
You can embed the chat widget on your website. Simply copy the provided code and paste it anywhere within the tag of your HTML file.
Chatflow Config
<script type="module">
import Chatbot from 'https://cdn.jsdelivr.net/npm/tailwinds-embed/dist/web.js';
Chatbot.init({
chatflowid: 'abc',
apiHost: 'http://localhost:3000',
chatflowConfig: {
"sessionId": "123",
"returnSourceDocuments": true
}
})
</script>Observer Config
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/tailwinds-embed/dist/web.js';
Chatbot.init({
chatflowid: 'abc',
apiHost: '<yourTailwindsURL>',
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>Theme
You can change the pop up button properties, as well as the chat window:
<script type="module">
import Chatbot from 'https://cdn.jsdelivr.net/npm/tailwinds-embed/dist/web.js';
Chatbot.init({
chatflowid: 'abc',
apiHost: '<yourTailwindsURL>',
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: 'Tailwinds 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: 'Acme',
companyLink: 'https://AcmeCorp.com',
},
},
},
});
</script>Last updated
