Files
romfast-website/chatbot.html
2025-08-13 22:47:45 +03:00

195 lines
6.6 KiB
HTML

<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>