// Chat Widget Script (function () { // Create and inject styles const styles = ` .n8n-chat-widget { --chat--color-primary: var(--n8n-chat-primary-color, #854fff); --chat--color-secondary: var(--n8n-chat-secondary-color, #6b3fd4); --chat--color-background: var(--n8n-chat-background-color, #ffffff); --chat--color-font: var(--n8n-chat-font-color, #333333); font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }.n8n-chat-widget .chat-container { position: fixed; bottom: 20px; right: 20px; z-index: 1000; display: none; width: 380px; height: 600px; background: var(--chat--color-background); border-radius: 12px; box-shadow: 0 8px 32px rgba(133, 79, 255, 0.15); border: 1px solid rgba(133, 79, 255, 0.2); overflow: hidden; font-family: inherit; }.n8n-chat-widget .chat-container.position-left { right: auto; left: 20px; }.n8n-chat-widget .chat-container.open { display: flex; flex-direction: column; }.n8n-chat-widget .brand-header { padding: 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(133, 79, 255, 0.1); position: relative; }.n8n-chat-widget .close-button { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--chat--color-font); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; transition: color 0.2s; font-size: 20px; opacity: 0.6; }.n8n-chat-widget .close-button:hover { opacity: 1; }.n8n-chat-widget .brand-header img { width: 32px; height: 32px; }.n8n-chat-widget .brand-header span { font-size: 18px; font-weight: 500; color: var(--chat--color-font); }.n8n-chat-widget .new-conversation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; text-align: center; width: 100%; max-width: 300px; }.n8n-chat-widget .welcome-text { font-size: 24px; font-weight: 600; color: var(--chat--color-font); margin-bottom: 24px; line-height: 1.3; }.n8n-chat-widget .new-chat-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px 24px; background: linear-gradient(135deg, var(--chat--color-primary) 0%, var(--chat--color-secondary) 100%); color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; transition: transform 0.3s; font-weight: 500; font-family: inherit; margin-bottom: 12px; }.n8n-chat-widget .new-chat-btn:hover { transform: scale(1.02); }.n8n-chat-widget .message-icon { width: 20px; height: 20px; }.n8n-chat-widget .response-text { font-size: 14px; color: var(--chat--color-font); opacity: 0.7; margin: 0; }.n8n-chat-widget .chat-interface { display: none; flex-direction: column; height: 100%; }.n8n-chat-widget .chat-interface.active { display: flex; }.n8n-chat-widget .chat-messages { flex: 1; overflow-y: auto; padding: 20px; background: var(--chat--color-background); display: flex; flex-direction: column; }.n8n-chat-widget .chat-message { padding: 12px 16px; margin: 8px 0; border-radius: 12px; max-width: 80%; word-wrap: break-word; font-size: 14px; line-height: 1.5; }.n8n-chat-widget .chat-message.user { background: linear-gradient(135deg, var(--chat--color-primary) 0%, var(--chat--color-secondary) 100%); color: white; align-self: flex-end; box-shadow: 0 4px 12px rgba(133, 79, 255, 0.2); border: none; }.n8n-chat-widget .chat-message.bot { background: var(--chat--color-background); border: 1px solid rgba(133, 79, 255, 0.2); color: var(--chat--color-font); align-self: flex-start; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); }.n8n-chat-widget .chat-input { padding: 16px; background: var(--chat--color-background); border-top: 1px solid rgba(133, 79, 255, 0.1); display: flex; gap: 8px; }.n8n-chat-widget .chat-input textarea { flex: 1; padding: 12px; border: 1px solid rgba(133, 79, 255, 0.2); border-radius: 8px; background: var(--chat--color-background); color: var(--chat--color-font); resize: none; font-family: inherit; font-size: 14px; }.n8n-chat-widget .chat-input textarea::placeholder { color: var(--chat--color-font); opacity: 0.6; }.n8n-chat-widget .chat-input button { background: linear-gradient(135deg, var(--chat--color-primary) 0%, var(--chat--color-secondary) 100%); color: white; border: none; border-radius: 8px; padding: 0 20px; cursor: pointer; transition: transform 0.2s; font-family: inherit; font-weight: 500; }.n8n-chat-widget .chat-input button:hover { transform: scale(1.05); }.n8n-chat-widget .chat-toggle { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; border-radius: 30px; background: linear-gradient(135deg, var(--chat--color-primary) 0%, var(--chat--color-secondary) 100%); color: white; border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(133, 79, 255, 0.3); z-index: 999; transition: transform 0.3s; display: flex; align-items: center; justify-content: center; }.n8n-chat-widget .chat-toggle.position-left { right: auto; left: 20px; }.n8n-chat-widget .chat-toggle:hover { transform: scale(1.05); }.n8n-chat-widget .chat-toggle svg { width: 24px; height: 24px; fill: currentColor; }.n8n-chat-widget .chat-footer { padding: 8px; text-align: center; background: var(--chat--color-background); border-top: 1px solid rgba(133, 79, 255, 0.1); }.n8n-chat-widget .chat-footer a { color: var(--chat--color-primary); text-decoration: none; font-size: 12px; opacity: 0.8; transition: opacity 0.2s; font-family: inherit; }.n8n-chat-widget .chat-footer a:hover { opacity: 1; } `;// Load Geist font const fontLink = document.createElement("link"); fontLink.rel = "stylesheet"; fontLink.href = "https://cdn.jsdelivr.net/npm/geist@1.0.0/dist/fonts/geist-sans/style.css"; document.head.appendChild(fontLink);// Inject styles const styleSheet = document.createElement("style"); styleSheet.textContent = styles; document.head.appendChild(styleSheet);// Default configuration const defaultConfig = { webhook: { url: "", route: "", }, branding: { logo: "", name: "", welcomeText: "", responseTimeText: "", poweredBy: { text: 'Powered by n8n', link: 'https://n8n.partnerlinks.io/m8a94i19zhqq?utm_source=nocodecreative.io' } }, style: { primaryColor: "", secondaryColor: "", position: "right", backgroundColor: "#ffffff", fontColor: "#333333", }, };// Merge user config with defaults const config = window.ChatWidgetConfig ? { webhook: { ...defaultConfig.webhook, ...window.ChatWidgetConfig.webhook, }, branding: { ...defaultConfig.branding, ...window.ChatWidgetConfig.branding, }, style: { ...defaultConfig.style, ...window.ChatWidgetConfig.style }, } : defaultConfig;// Prevent multiple initializations if (window.N8NChatWidgetInitialized) return; window.N8NChatWidgetInitialized = true;let currentSessionId = "";// Create widget container const widgetContainer = document.createElement("div"); widgetContainer.className = "n8n-chat-widget";// Set CSS variables for colors widgetContainer.style.setProperty( "--n8n-chat-primary-color", config.style.primaryColor ); widgetContainer.style.setProperty( "--n8n-chat-secondary-color", config.style.secondaryColor ); widgetContainer.style.setProperty( "--n8n-chat-background-color", config.style.backgroundColor ); widgetContainer.style.setProperty( "--n8n-chat-font-color", config.style.fontColor );const chatContainer = document.createElement("div"); chatContainer.className = `chat-container${ config.style.position === "left" ? " position-left" : "" }`;const newConversationHTML = `
${config.branding.name} ${config.branding.name}

${config.branding.welcomeText}

${config.branding.responseTimeText}

`;const chatInterfaceHTML = `
${config.branding.name} ${config.branding.name}
${config.branding.poweredBy.text}
`;chatContainer.innerHTML = newConversationHTML + chatInterfaceHTML;const toggleButton = document.createElement("button"); toggleButton.className = `chat-toggle${ config.style.position === "left" ? " position-left" : "" }`; toggleButton.innerHTML = ` `;widgetContainer.appendChild(chatContainer); widgetContainer.appendChild(toggleButton); document.body.appendChild(widgetContainer);const newChatBtn = chatContainer.querySelector(".new-chat-btn"); const chatInterface = chatContainer.querySelector(".chat-interface"); const messagesContainer = chatContainer.querySelector(".chat-messages"); const textarea = chatContainer.querySelector("textarea"); const sendButton = chatContainer.querySelector('button[type="submit"]');function generateUUID() { return crypto.randomUUID(); }function getUTMParams() { const params = new URLSearchParams(window.location.search); return { utm_source: params.get("utm_source") || "", utm_medium: params.get("utm_medium") || "", utm_campaign: params.get("utm_campaign") || "", utm_term: params.get("utm_term") || "", utm_content: params.get("utm_content") || "", }; }async function startNewConversation() { currentSessionId = generateUUID(); const data = [ { action: "loadPreviousSession", sessionId: currentSessionId, route: config.webhook.route, metadata: { userId: "", ...getUTMParams(), referrer: document.referrer, currentUrl: window.location.href, }, }, ];try { const response = await fetch(config.webhook.url, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(data), });const responseData = await response.json(); chatContainer.querySelector(".brand-header").style.display = "none"; chatContainer.querySelector(".new-conversation").style.display = "none"; chatInterface.classList.add("active");const botMessageDiv = document.createElement("div"); botMessageDiv.className = "chat-message bot"; botMessageDiv.textContent = Array.isArray(responseData) ? responseData[0].output : responseData.output; messagesContainer.appendChild(botMessageDiv); messagesContainer.scrollTop = messagesContainer.scrollHeight; } catch (error) { console.error("Error:", error); } }async function sendMessage(message) { const messageData = { action: "sendMessage", sessionId: currentSessionId, route: config.webhook.route, chatInput: message, metadata: { userId: "", ...getUTMParams(), referrer: document.referrer, currentUrl: window.location.href, }, };const userMessageDiv = document.createElement("div"); userMessageDiv.className = "chat-message user"; userMessageDiv.textContent = message; messagesContainer.appendChild(userMessageDiv); messagesContainer.scrollTop = messagesContainer.scrollHeight;try { const response = await fetch(config.webhook.url, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(messageData), });const data = await response.json();const botMessageDiv = document.createElement("div"); botMessageDiv.className = "chat-message bot"; botMessageDiv.textContent = Array.isArray(data) ? data[0].output : data.output; messagesContainer.appendChild(botMessageDiv); messagesContainer.scrollTop = messagesContainer.scrollHeight; } catch (error) { console.error("Error:", error); } }newChatBtn.addEventListener("click", startNewConversation);sendButton.addEventListener("click", () => { const message = textarea.value.trim(); if (message) { sendMessage(message); textarea.value = ""; } });textarea.addEventListener("keypress", (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); const message = textarea.value.trim(); if (message) { sendMessage(message); textarea.value = ""; } } });toggleButton.addEventListener("click", () => { chatContainer.classList.toggle("open"); });// Add close button handlers const closeButtons = chatContainer.querySelectorAll(".close-button"); closeButtons.forEach((button) => { button.addEventListener("click", () => { chatContainer.classList.remove("open"); }); }); })();
Best solutions

Logsign

Empower your team with Atlassian’s innovative tools for seamless collaboration, productivity, and project success.

Contact us now
Logsign

Advanced Cybersecurity

Logsign is a unified cybersecurity platform engineered to enhance and streamline an organization's security operations. By integrating multiple advanced tools, Logsign offers a holistic solution for threat detection, investigation, and response, ensuring robust protection against evolving cyber threats.

Key Features

Advanced Capabilities to Fortify Your Security Infrastructure

 

Logsign's next-generation SIEM solution empowers organizations to collect, store, and analyze vast amounts of security data efficiently. It provides real-time monitoring and visualization, enabling swift detection of potential threats and facilitating proactive security measures.

Incorporating over 45 global threat intelligence feeds, Logsign enriches security data to deliver actionable insights for detecting and mitigating threats. The platform processes customer data in real-time without extracting it from on-premises servers, ensuring stringent data security and compliance.

 

Logsign analyzes user and entity behaviors to identify anomalies that may signify security risks, such as insider threats or compromised accounts. This proactive approach helps in early detection and prevention of potential security breaches.

 

Leveraging automation and orchestration, Logsign streamlines the entire threat management lifecycle. From detection to response, the platform reduces the time and effort required to address security incidents, enhancing the efficiency and effectiveness of security operations.

 

Why Choose Logsign for Your Security Operations

Benefits

Unified Platform

By consolidating various security tools into a single platform, Logsign simplifies security management, reducing the complexity and costs associated with maintaining multiple solutions. This unified approach ensures seamless integration and coherent security strategies.

Ease of Use

Logsign features a user-friendly interface equipped with predefined visualization tools, customizable reports, and drag-and-drop functionality. These features enable security teams to operate efficiently, allowing them to focus on critical tasks without being bogged down by complex configurations.

Scalability

Built on a scalable architecture, Logsign can effortlessly handle increasing data volumes and adapt to evolving security needs. This makes it an ideal choice for organizations of various sizes, from small businesses to large enterprises, ensuring long-term viability and growth support.

 

Extensive Integrations

With over 400 built-in data collection integrations and more than 100 predefined automated response integrations, Logsign ensures seamless deployment and operation within diverse IT environments. This extensive integration capability facilitates smooth interoperability with existing systems and tools.

Empower Your Security Operations

Discover Logsign Solutions

Unleash Logsign's potential to connect, monitor, and secure your organization's infrastructure. Explore tools designed to keep you protected, efficient, and resilient, no matter where you operate.