shiza-developer-chat-embed
Version:
Javascript library to display SHIZA Developer chatbot on your website
167 lines (158 loc) • 7.08 kB
HTML
<!--
NOTE: This .html file (and public folder) is optional and can be safely deleted.
It serves only as a demo/test page.
The chatbot can be embedded directly on any allowed domain using the embed script that
is generated when starting the server.
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SHIZA Developer Chatbot Widget</title>
</head>
<!-- import Chatbot from 'https://cdn.jsdelivr.net/npm/shiza-developer-chat-embed@latest/dist/web.js'; -->
<body>
<div id="root"></div>
<script type="module">
import Chatbot from './web.js';
// Example initialization:
// If your .env contains:
// agent1=xyz789-uvw456,https://example.com
// support=abc123-def456,https://example.com
// salesbot=ghi123-jkl456,https://example.com
//
// Then use the environment variable name as nexusId:
Chatbot.initFull({
// nexusId: 'cb0e0552-948c-4edd-8918-f4e088387a6b', // or 'support', 'salesbot', etc.
// apiHost: 'https://shiza-developer-dev-643802241995.us-central1.run.app',
nexusId: '7ae44ffe-9de6-483d-9a37-3eae1ebf0b0b', // or 'support', 'salesbot', etc.
apiHost: 'https://shiza-developer-dev-643802241995.us-central1.run.app',
// nexusId: '81f0f1aa-cf98-4a1c-b84f-8932ae25df51', // or 'support', 'salesbot', etc.
// apiHost: 'http://localhost:8080',
theme: {
// button: {
// backgroundColor: '#3B81F6',
// right: 20,
// bottom: 20,
// size: 48,
// dragAndDrop: true,
// iconColor: 'white',
// customIconSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.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 <a target="_blank" href="https://shiza.ai">Terms & Condition</a>',
// 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: 'SHIZA Developer 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',
// // height: '100%',
// width: '100%',
// fontSize: 16,
// starterPrompts: ['What is a bot?', 'Who are you?'],
// starterPromptFontSize: 15,
// clearChatOnReload: false,
// sourceDocsTitle: 'Sources:',
// renderHTML: true,
// // textColor: '#000000',
// botMessage: {
// backgroundColor: '#f7f8ff',
// textColor: 'red',
// 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,
// sendMessageSound: true,
// sendSoundLocation: 'send_message.mp3',
// receiveMessageSound: true,
// receiveSoundLocation: 'receive_message.mp3',
// },
// feedback: {
// color: '#303235',
// },
// dateTimeToggle: {
// date: true,
// time: true,
// },
// footer: {
// textColor: '#303235',
// text: 'Powered by',
// company: 'SHIZA AI',
// companyLink: 'https://shiza.ai',
// },
// },
// chatWindow: {
// botMessage: { showAvatar: false, backgroundColor: 'transparent', textColor: '#ffffff' },
// userMessage: { showAvatar: false, backgroundColor: 'linear-gradient(270deg, #BE4BC472 0%, #787FF972 96.43%)', textColor: '#ffffff' },
// // textInput: { backgroundColor: 'transparent', textColor: '#484848' },
// textInput: { backgroundColor: 'transparent', textColor: '#BE4BC4' },
// titleBackgroundColor: 'linear-gradient(270deg, #BE4BC472 0%, #787FF972 96.43%)',
// titleTextColor: '#ffffff',
// backgroundColor: 'transparent',
// // backgroundImage: 'none',
// fontSize: 16,
// poweredByTextColor: '#9D9D9D',
// renderHTML: false,
// showAgentMessages: true,
// },
chatWindow: {
botMessage: { showAvatar: false, backgroundColor: 'transparent', textColor: '#ffffff' },
userMessage: { showAvatar: false, backgroundColor: 'linear-gradient(270deg, #BE4BC472 0%, #787FF972 96.43%)', textColor: '#ffffff' },
textInput: { backgroundColor: 'transparent', textColor: '#ffffff' },
overrideConfig: {},
titleBackgroundColor: 'linear-gradient(270deg, #BE4BC472 0%, #787FF972 96.43%)',
titleTextColor: '#ffffff',
backgroundColor: 'transparent',
// backgroundImage: 'none',
fontSize: 16,
poweredByTextColor: '#9D9D9D',
renderHTML: false,
showAgentMessages: true,
},
},
// nexusId: 'b3ab998f-4ba9-4f83-b638-8cf9a263ae70', // or 'support', 'salesbot', etc.
// apiHost: 'https://developer.shiza.ai',
});
</script>
<developer-fullchatbot></developer-fullchatbot>
</body>
</html>