164 lines
6.0 KiB
HTML
164 lines
6.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<!-- TODO: Set the document title to the name of your application -->
|
|
<title>Lovable App</title>
|
|
<meta name="description" content="Financen Mizera" />
|
|
<meta name="author" content="Marian Mizera" />
|
|
|
|
<!-- TODO: Update og:title to match your application name -->
|
|
<meta property="og:title" content="Financen Mizera" />
|
|
<meta property="og:description" content="Financen Mizera Finanzen und Versicherungs Beratung" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
|
|
|
|
|
|
|
<!-- Facebook SDK -->
|
|
<div id="fb-root"></div>
|
|
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v18.0"></script>
|
|
|
|
<!-- n8n Chatbot -->
|
|
<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
|
|
|
|
<!-- Custom Chat Styles - loaded after n8n CSS -->
|
|
<style>
|
|
/* Most specific rule possible */
|
|
html body div[class*="chat-button"],
|
|
html body div[class*="chat-launcher"],
|
|
html body button[aria-label*="chat"],
|
|
html body button[title*="chat"] {
|
|
background: hsl(215, 70%, 35%) !important;
|
|
border-radius: 0.5rem !important;
|
|
width: 52px !important;
|
|
height: 52px !important;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
|
|
bottom: 24px !important;
|
|
right: 120px !important;
|
|
font-size: 22px !important;
|
|
position: fixed !important;
|
|
z-index: 9999 !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
/* Mobile responsive positioning */
|
|
@media (max-width: 768px) {
|
|
html body div[class*="chat-button"],
|
|
html body div[class*="chat-launcher"],
|
|
html body button[aria-label*="chat"],
|
|
html body button[title*="chat"] {
|
|
right: 80px !important;
|
|
bottom: 24px !important;
|
|
width: 48px !important;
|
|
height: 48px !important;
|
|
font-size: 20px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
html body div[class*="chat-button"],
|
|
html body div[class*="chat-launcher"],
|
|
html body button[aria-label*="chat"],
|
|
html body button[title*="chat"] {
|
|
right: 70px !important;
|
|
bottom: 24px !important;
|
|
width: 44px !important;
|
|
height: 44px !important;
|
|
font-size: 18px !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
|
|
<!-- n8n Chatbot -->
|
|
<script type="module">
|
|
import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';
|
|
|
|
createChat({
|
|
webhookUrl: 'https://marian.kimaschine.de/webhook/e4158952-3c43-4d7b-9db0-7bb7aac6b1ba/chat',
|
|
|
|
// Initiale Nachrichten - die richtigen Begrüßungstexte
|
|
initialMessages: [
|
|
'Ich bin Ihr persönlicher Versicherungs-Assistent.'
|
|
],
|
|
|
|
// Internationalisierung - deutsche Texte
|
|
i18n: {
|
|
en: {
|
|
title: 'Willkommen bei Agentur Mizera & Partner! 👋',
|
|
subtitle: '',
|
|
footer: '',
|
|
getStarted: 'Neues Gespräch',
|
|
inputPlaceholder: 'Wie kann ich Ihnen helfen?'
|
|
}
|
|
},
|
|
|
|
// Standard-Sprache
|
|
defaultLanguage: 'en',
|
|
|
|
// Webhook-Konfiguration
|
|
webhookConfig: {
|
|
method: 'POST',
|
|
headers: {}
|
|
}
|
|
});
|
|
|
|
// Force reposition after chat loads
|
|
setTimeout(() => {
|
|
const isMobile = window.innerWidth <= 768;
|
|
const isSmallMobile = window.innerWidth <= 640;
|
|
|
|
const chatButtons = document.querySelectorAll('[class*="chat-button"], [class*="chat-launcher"], button[aria-label*="chat"], button[title*="chat"]');
|
|
chatButtons.forEach(button => {
|
|
if (button) {
|
|
if (isSmallMobile) {
|
|
button.style.setProperty('bottom', '24px', 'important');
|
|
button.style.setProperty('right', '70px', 'important');
|
|
} else if (isMobile) {
|
|
button.style.setProperty('bottom', '24px', 'important');
|
|
button.style.setProperty('right', '80px', 'important');
|
|
} else {
|
|
button.style.setProperty('bottom', '24px', 'important');
|
|
button.style.setProperty('right', '120px', 'important');
|
|
}
|
|
button.style.setProperty('position', 'fixed', 'important');
|
|
button.style.setProperty('z-index', '9999', 'important');
|
|
button.style.setProperty('transform', 'none', 'important');
|
|
}
|
|
});
|
|
}, 3000);
|
|
|
|
// Continuous repositioning - run every 500ms
|
|
setInterval(() => {
|
|
const isMobile = window.innerWidth <= 768;
|
|
const isSmallMobile = window.innerWidth <= 640;
|
|
|
|
const chatButtons = document.querySelectorAll('[class*="chat-button"], [class*="chat-launcher"], button[aria-label*="chat"], button[title*="chat"]');
|
|
chatButtons.forEach(button => {
|
|
if (button) {
|
|
if (isSmallMobile) {
|
|
button.style.setProperty('bottom', '24px', 'important');
|
|
button.style.setProperty('right', '70px', 'important');
|
|
} else if (isMobile) {
|
|
button.style.setProperty('bottom', '24px', 'important');
|
|
button.style.setProperty('right', '80px', 'important');
|
|
} else {
|
|
button.style.setProperty('bottom', '24px', 'important');
|
|
button.style.setProperty('right', '120px', 'important');
|
|
}
|
|
button.style.setProperty('position', 'fixed', 'important');
|
|
button.style.setProperty('z-index', '9999', 'important');
|
|
button.style.setProperty('transform', 'none', 'important');
|
|
}
|
|
});
|
|
}, 500);
|
|
</script>
|
|
</body>
|
|
</html>
|