index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test n8n Chat Widget</title>
  </head>

  <body>
    <h1>n8n Chat Widget</h1>
    <!--     <iframe src="iFrame.html" frameborder="1" height="500" width="700"></iframe> -->

    <script type="module">
      import { createChat } from "https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js";
      createChat({
        webhookUrl:
          "https://ria-n8n.app.n8n.cloud/webhook/c65ef693-d02d-4278-85b6-680800a856c9/chat",
        webhookConfig: {
          method: "POST",
          headers: {},
        },
        target: "#n8n-chat",
        mode: "fullscreen",
        chatInputKey: "chatInput",
        chatSessionKey: "sessionId",
        loadPreviousSession: false, // when true will send POST request each time page is loaded
        metadata: {},
        showWelcomeScreen: true,
        defaultLanguage: "en",
        initialMessages: [
          "Hi there! 👋",
          "My name is Ria. How can I assist you today?",
        ],
        i18n: {
          en: {
            title: "Hi there! 👋",
            subtitle: "Start a chat. We're here to help you 24/7.",
            footer: "made with 🩷 by n8n",
            getStarted: "New Conversation",
            inputPlaceholder: "Type your question..",
          },
        },
      });
    </script>
  </body>
</html>