i created a RAG-Customer-Chatbot. Trigger is of course a message. The workflow itself is not that issue but now i want to integrate the chat on my shopify-page - this is my issue
What is the error message (if any)?
The error is, that if i use this code - the chatbox is at the bottom left coner - no one will ever find it:
<div id="n8n-chat-container"></div>
<script type="module">
import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/chat.bundle.es.js';
createChat({
webhookUrl: 'https://wucash.app.n8n.cloud/webhook/e104e40e-6134-4825-a6f0-8a646d882662/chat'
});
</script>
If i use this code here, the input filed for the chat is lost:
<!-- N8N Chat Integration - Vor </body> in theme.liquid einfügen -->
<!-- Stil für den Chat-Container und das Chat-Fenster -->
<style>
/* Der Container für den gesamten Chat */
#n8n-chat-container {
position: fixed;
bottom: 0;
right: 0;
z-index: 9999;
}
/* Style für das Chat-Fenster */
.n8n-chat-window {
position: fixed !important;
bottom: 80px !important; /* Abstand vom unteren Rand */
right: 20px !important; /* Abstand vom rechten Rand */
width: 350px !important; /* Breite des Chat-Fensters */
height: 500px !important; /* Höhe des Chat-Fensters */
max-width: 90% !important; /* Responsive Breite */
border-radius: 10px !important; /* Abgerundete Ecken */
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2) !important; /* Schönerer Schatten */
}
/* Style für den Chat-Button */
.n8n-chat-button {
position: fixed !important;
bottom: 20px !important;
right: 20px !important;
width: 60px !important;
height: 60px !important;
border-radius: 50% !important;
background-color: #007aff !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}
</style>
<!-- Chat-Container -->
<div id="n8n-chat-container"></div>
<!-- Link zur n8n-Chat-Stylesheet -->
<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/style.css" rel="stylesheet" />
<script type="module">
import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/chat.bundle.es.js';
// Chat mit korrekter Webhook-URL initialisieren
// Beachte: Die URL sollte OHNE "/chat" am Ende sein
createChat({
webhookUrl: 'https://wucash.app.n8n.cloud/webhook/e104e40e-6134-4825-a6f0-8a646d882662',
containerSelector: '#n8n-chat-container',
defaultOpen: false
});
</script>
Since this is my second workflow ever, maybe it’s due to lack of experience, so I hope the answer is obvious