N8n chat in shopify

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

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

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.