@gaiahub/gaia-embed v1.2.0
Gaiahub Embed
Javascript library to display Gaiahub chatbot on your website
Install:
yarn install
Dev:
yarn dev
Build:
yarn build
Embed in your HTML
PopUp
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 './web.js';
Chatbot.initFull({
chatflowid: '<chatflowid>',
apiHost: 'http://platform.gaiahub.ai/api/v1',
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://icmpfgtzjhdyjfioisip.supabase.co/storage/v1/object/public/cdn-static-library/gaia-embed/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: '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: 'Gaiahub Bot',
titleAvatarSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',
welcomeMessage: 'Hello! This is custom welcome 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>
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago