147 lines
5.5 KiB
HTML
147 lines
5.5 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="Lovable Generated Project" />
|
|
<meta name="author" content="Lovable" />
|
|
|
|
<!-- TODO: Update og:title to match your application name -->
|
|
<meta property="og:title" content="Lovable App" />
|
|
<meta property="og:description" content="Lovable Generated Project" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
|
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:site" content="@Lovable" />
|
|
<meta name="twitter: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;
|
|
}
|
|
|
|
/* Override any inline styles */
|
|
div[style*="bottom"] {
|
|
bottom: 24px !important;
|
|
right: 120px !important;
|
|
}
|
|
|
|
/* Reposition existing contact button */
|
|
.fixed.bottom-6.right-6 {
|
|
bottom: 24px !important;
|
|
right: 130px !important;
|
|
z-index: 9998 !important;
|
|
width: 52px !important;
|
|
height: 52px !important;
|
|
border-radius: 0.5rem !important;
|
|
padding: 0 !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !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 chatButtons = document.querySelectorAll('[class*="chat-button"], [class*="chat-launcher"], button[aria-label*="chat"], button[title*="chat"]');
|
|
chatButtons.forEach(button => {
|
|
if (button) {
|
|
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'); // Ensure no transform interferes
|
|
}
|
|
});
|
|
|
|
// Also reposition chat containers
|
|
const chatContainers = document.querySelectorAll('[class*="chat-container"], [class*="chat-popup"], [class*="chat-widget"]');
|
|
chatContainers.forEach(container => {
|
|
if (container) {
|
|
container.style.setProperty('bottom', '24px', 'important');
|
|
container.style.setProperty('right', '120px', 'important');
|
|
container.style.setProperty('position', 'fixed', 'important'); // Ensure position is fixed
|
|
}
|
|
});
|
|
}, 3000); // Increased delay to 3 seconds
|
|
|
|
// Continuous repositioning - run every 500ms
|
|
setInterval(() => {
|
|
const chatButtons = document.querySelectorAll('[class*="chat-button"], [class*="chat-launcher"], button[aria-label*="chat"], button[title*="chat"]');
|
|
chatButtons.forEach(button => {
|
|
if (button) {
|
|
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>
|