instaagents-embed
v1.0.0
Published
Javascript library to display InstaAgents chatbot on your website
Downloads
22
Maintainers
abuchanReadme
InstaAgents Embed
Javascript library to display InstaAgents chatbot on your website.
Install
npm install instaagents-embed
# or
yarn add instaagents-embedEmbed in your HTML
PopUp Chat
<script type="module">
import Chatbot from 'https://cdn.jsdelivr.net/npm/instaagents-embed/dist/web.js';
Chatbot.init({
chatflowid: '<chatflowid>',
apiHost: 'https://your-instaagents-instance.com',
});
</script>FullPage Chat
<body style="margin: 0">
<instaagents-fullchatbot></instaagents-fullchatbot>
<script type="module">
import Chatbot from 'https://cdn.jsdelivr.net/npm/instaagents-embed/dist/web.js';
Chatbot.initFull({
chatflowid: '<chatflowid>',
apiHost: 'https://your-instaagents-instance.com',
});
</script>
</body>Configuration
Customize your chatbot with theme options:
<script type="module">
import Chatbot from 'https://cdn.jsdelivr.net/npm/instaagents-embed/dist/web.js';
Chatbot.init({
chatflowid: '<chatflowid>',
apiHost: 'https://your-instaagents-instance.com',
theme: {
button: {
backgroundColor: '#3B81F6',
right: 20,
bottom: 20,
size: 48,
iconColor: 'white',
},
chatWindow: {
showTitle: true,
title: 'My Assistant',
welcomeMessage: 'Hello! How can I help you?',
backgroundColor: '#ffffff',
botMessage: {
backgroundColor: '#f7f8ff',
textColor: '#303235',
},
userMessage: {
backgroundColor: '#3B81F6',
textColor: '#ffffff',
},
textInput: {
placeholder: 'Type your question',
sendButtonColor: '#3B81F6',
},
footer: {
text: 'Powered by',
company: 'InstaAgents',
companyLink: 'https://datainsta.com',
},
},
},
});
</script>Full Configuration Options
{
chatflowid: 'your-chatflow-id',
apiHost: 'https://your-instaagents-instance.com',
chatflowConfig: {
// Optional chatflow configuration
},
observersConfig: {
observeUserInput: (userInput) => console.log({ userInput }),
observeMessages: (messages) => console.log({ messages }),
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://example.com/icon.svg',
autoWindowOpen: {
autoOpen: true,
openDelay: 2,
autoOpenOnMobile: false,
},
},
tooltip: {
showTooltip: true,
tooltipMessage: 'Hi There 👋!',
tooltipBackgroundColor: 'black',
tooltipTextColor: 'white',
tooltipFontSize: 16,
},
disclaimer: {
title: 'Disclaimer',
message: 'By using this chatbot, you agree to the Terms & Conditions',
textColor: 'black',
buttonColor: '#3b82f6',
buttonText: 'Start Chatting',
buttonTextColor: 'white',
blurredBackgroundColor: 'rgba(0, 0, 0, 0.4)',
backgroundColor: 'white',
},
customCSS: ``,
chatWindow: {
showTitle: true,
showAgentMessages: true,
title: 'InstaAgents Bot',
titleAvatarSrc: 'https://example.com/avatar.png',
titleBackgroundColor: '#3B81F6',
titleTextColor: '#ffffff',
welcomeMessage: 'Hello! How can I help you?',
errorMessage: 'Something went wrong. Please try again.',
backgroundColor: '#ffffff',
backgroundImage: 'https://example.com/bg.png',
height: 700,
width: 400,
fontSize: 16,
starterPrompts: ['What can you do?', 'Help me get started'],
starterPromptFontSize: 15,
clearChatOnReload: false,
sourceDocsTitle: 'Sources:',
renderHTML: true,
botMessage: {
backgroundColor: '#f7f8ff',
textColor: '#303235',
showAvatar: true,
avatarSrc: 'https://example.com/bot-avatar.png',
},
userMessage: {
backgroundColor: '#3B81F6',
textColor: '#ffffff',
showAvatar: true,
avatarSrc: 'https://example.com/user-avatar.png',
},
textInput: {
placeholder: 'Type your question',
backgroundColor: '#ffffff',
textColor: '#303235',
sendButtonColor: '#3B81F6',
maxChars: 500,
maxCharsWarningMessage: 'Character limit exceeded',
autoFocus: true,
sendMessageSound: true,
receiveMessageSound: true,
},
feedback: {
color: '#303235',
},
dateTimeToggle: {
date: true,
time: true,
},
footer: {
textColor: '#303235',
text: 'Powered by',
company: 'InstaAgents',
companyLink: 'https://datainsta.com',
},
},
},
}License
MIT License - InstaAgents