N8n chat in shopify

Questions
,
1

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

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

2

ok found the solution -

claude.ai uggested: https://wucash.app.n8n.cloud/webhook/e104e40e-6134-4825-a6f0-8a646d882662 (without chat)

in fact it has to be with chat at the end