commit initial
This commit is contained in:
195
chatbot.html
Normal file
195
chatbot.html
Normal file
@@ -0,0 +1,195 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>RomFast - Contact</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
background: #444;
|
||||
}
|
||||
.page-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.container {
|
||||
width: 921px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.header {
|
||||
background: #1B5B76;
|
||||
padding: 20px;
|
||||
color: white;
|
||||
}
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.logo img {
|
||||
max-width: 100px;
|
||||
height: auto;
|
||||
}
|
||||
.company-info {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.company-name {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 16px;
|
||||
}
|
||||
.menu {
|
||||
background-color: #f0f0f0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.menu ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.menu ul li a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
}
|
||||
.left-column {
|
||||
flex: 2;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.right-column {
|
||||
flex: 1;
|
||||
border-left: 1px solid #ccc;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.contact-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #dadada;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.footer {
|
||||
background-color: #08819c;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
@media (max-width: 921px) {
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
.content {
|
||||
flex-direction: column;
|
||||
}
|
||||
.right-column {
|
||||
border-left: none;
|
||||
border-top: 1px solid #ccc;
|
||||
padding-top: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.menu-toggle {
|
||||
display: block;
|
||||
margin: 10px;
|
||||
}
|
||||
.menu ul {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
}
|
||||
.menu ul.show {
|
||||
display: flex;
|
||||
}
|
||||
.menu ul li {
|
||||
text-align: center;
|
||||
}
|
||||
.menu ul li a {
|
||||
padding: 15px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<flowise-fullchatbot></flowise-fullchatbot>
|
||||
<script type="module">
|
||||
import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js"
|
||||
Chatbot.initFull({
|
||||
chatflowid: "462dabb9-6995-4f7e-ad8e-30624ae56be5",
|
||||
apiHost: "https://mutual-special-koala.ngrok-free.app",
|
||||
theme: {
|
||||
chatWindow: {
|
||||
showTitle: true,
|
||||
title: 'Cezar ChatBot - Romfast Suport',
|
||||
titleAvatarSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',
|
||||
showAgentMessages: true,
|
||||
welcomeMessage: 'Buna! Cu ce te pot ajuta?',
|
||||
errorMessage: 'Am o eroare! Revino mai tarziu',
|
||||
backgroundColor: "#ffffff",
|
||||
backgroundImage: 'enter image path or link', // If set, this will overlap the background color of the chat window.
|
||||
height: 700,
|
||||
width: 500,
|
||||
fontSize: 16,
|
||||
starterPrompts: ['Cum se actualizeaza tokenul eFactura?', 'Cand se completeaza codul de plata pentru declaratia SAFT?'], // It overrides the starter prompts set by the chat flow passed
|
||||
starterPromptFontSize: 15,
|
||||
clearChatOnReload: true, // If set to true, the chat will be cleared when the page reloads.
|
||||
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: 2000,
|
||||
maxCharsWarningMessage: 'You exceeded the characters limit. Please input less than 2000 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: false,
|
||||
// sendSoundLocation: "send_message.mp3", // If this is not used, the default sound effect will be played if sendSoundMessage is true.
|
||||
receiveMessageSound: false,
|
||||
// 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: 'Romfast',
|
||||
companyLink: 'https://www.romfast.ro',
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user