A4A Chatflow Automatisointi – Demo<\/title>\n <style>\n \/* Alkuper\u00e4inen sivun tyyli *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n min-height: 100vh;\n padding: 40px 20px;\n }\n\n .container {\n max-width: 1200px;\n margin: 0 auto;\n background: white;\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n overflow: hidden;\n }\n\n .header {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 60px 40px;\n text-align: center;\n }\n\n .header h1 {\n font-size: 48px;\n margin-bottom: 16px;\n font-weight: 700;\n }\n\n .header p {\n font-size: 20px;\n opacity: 0.95;\n }\n\n .content {\n padding: 60px 40px;\n }\n\n .section {\n margin-bottom: 60px;\n }\n\n .section h2 {\n font-size: 32px;\n margin-bottom: 24px;\n color: #2d3748;\n }\n\n .section p {\n font-size: 18px;\n line-height: 1.8;\n color: #4a5568;\n margin-bottom: 16px;\n }\n\n .feature-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 24px;\n margin-top: 32px;\n }\n\n .feature-card {\n background: #f7f9fc;\n padding: 32px;\n border-radius: 12px;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n }\n\n .feature-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n }\n\n .feature-card h3 {\n font-size: 20px;\n margin-bottom: 12px;\n color: #2d3748;\n }\n\n .feature-card p {\n font-size: 16px;\n color: #718096;\n margin-bottom: 0;\n }\n\n .icon {\n font-size: 48px;\n margin-bottom: 16px;\n }\n\n .code-block {\n background: #2d3748;\n color: #e2e8f0;\n padding: 24px;\n border-radius: 8px;\n overflow-x: auto;\n margin-top: 16px;\n }\n\n .code-block code {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 14px;\n line-height: 1.6;\n }\n\n .button-group {\n display: flex;\n gap: 16px;\n margin-top: 24px;\n flex-wrap: wrap;\n }\n\n .button {\n padding: 14px 32px;\n border-radius: 8px;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n border: none;\n text-decoration: none;\n display: inline-block;\n }\n\n .button-primary {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n }\n\n .button-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);\n }\n\n .button-secondary {\n background: white;\n color: #667eea;\n border: 2px solid #667eea;\n }\n\n .button-secondary:hover {\n background: #f7f9fc;\n }\n\n .workflow-example {\n background: #f7f9fc;\n padding: 24px;\n border-radius: 8px;\n margin-top: 16px;\n border-left: 4px solid #667eea;\n }\n\n .workflow-example h4 {\n margin-bottom: 12px;\n color: #2d3748;\n }\n\n .workflow-example ul {\n margin-left: 24px;\n color: #4a5568;\n }\n\n .workflow-example li {\n margin-bottom: 8px;\n }\n\n @media (max-width: 768px) {\n .header { padding: 40px 24px; }\n .header h1 { font-size: 36px; }\n .header p { font-size: 18px; }\n .content { padding: 40px 24px; }\n .section h2 { font-size: 28px; }\n }\n\n \/* === A4A CHATFLOW CSS (upotettu) === *\/\n .a4a-chatflow {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n position: fixed;\n z-index: 9999;\n }\n .a4a-chatflow-bottom-right { bottom: 20px; right: 20px; }\n .a4a-chatflow-bottom-left { bottom: 20px; left: 20px; }\n .a4a-chatflow-top-right { top: 20px; right: 20px; }\n .a4a-chatflow-top-left { top: 20px; left: 20px; }\n\n .a4a-chatflow-toggle {\n width: 60px; height: 60px; border-radius: 50%;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n display: flex; align-items: center; justify-content: center;\n cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n transition: all 0.3s ease;\n }\n .a4a-chatflow-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }\n .a4a-chatflow-toggle-icon { font-size: 28px; line-height: 1; }\n\n .a4a-chatflow-window {\n position: absolute; bottom: 80px; right: 0;\n width: 380px; height: 600px;\n background: white; border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0,0,0,0.12);\n display: none; flex-direction: column;\n overflow: hidden; transition: all 0.3s ease;\n }\n .a4a-chatflow-open .a4a-chatflow-window { display: flex; }\n .a4a-chatflow-open .a4a-chatflow-toggle { opacity: 0; pointer-events: none; }\n\n .a4a-chatflow-header {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white; padding: 16px 20px;\n display: flex; justify-content: space-between; align-items: center;\n }\n .a4a-chatflow-header-info { display: flex; align-items: center; gap: 12px; }\n .a4a-chatflow-bot-avatar { font-size: 24px; line-height: 1; }\n .a4a-chatflow-bot-name { font-size: 16px; font-weight: 600; }\n .a4a-chatflow-close {\n background: transparent; border: none; color: white;\n font-size: 24px; cursor: pointer; padding: 0;\n width: 32px; height: 32px; display: flex;\n align-items: center; justify-content: center;\n border-radius: 4px; transition: background 0.2s;\n }\n .a4a-chatflow-close:hover { background: rgba(255,255,255,0.2); }\n\n .a4a-chatflow-messages {\n flex: 1; overflow-y: auto; padding: 20px; background: #f7f9fc;\n }\n .a4a-chatflow-messages::-webkit-scrollbar { width: 6px; }\n .a4a-chatflow-messages::-webkit-scrollbar-track { background: transparent; }\n .a4a-chatflow-messages::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 3px; }\n\n .a4a-chatflow-message {\n display: flex; gap: 12px; margin-bottom: 16px;\n animation: messageSlideIn 0.3s ease;\n }\n @keyframes messageSlideIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .a4a-chatflow-message-avatar {\n font-size: 20px; width: 32px; height: 32px;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n }\n .a4a-chatflow-message-content { flex: 1; display: flex; flex-direction: column; gap: 4px; }\n .a4a-chatflow-message-text {\n background: white; padding: 12px 16px; border-radius: 12px;\n box-shadow: 0 1px 2px rgba(0,0,0,0.05); word-wrap: break-word; line-height: 1.5;\n }\n .a4a-chatflow-message-user { flex-direction: row-reverse; }\n .a4a-chatflow-message-user .a4a-chatflow-message-content { align-items: flex-end; }\n .a4a-chatflow-message-user .a4a-chatflow-message-text {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;\n }\n .a4a-chatflow-timestamp { font-size: 11px; color: #718096; padding: 0 4px; }\n\n .a4a-chatflow-typing {\n display: flex; gap: 12px; padding: 0 20px 16px 20px;\n align-items: center; background: #f7f9fc;\n }\n .a4a-chatflow-typing::before { content: '\ud83d\udcac'; font-size: 20px; }\n .a4a-chatflow-typing-dot {\n width: 8px; height: 8px; background: #cbd5e0;\n border-radius: 50%; animation: typingDot 1.4s infinite;\n }\n .a4a-chatflow-typing-dot:nth-child(2) { animation-delay: 0.2s; }\n .a4a-chatflow-typing-dot:nth-child(3) { animation-delay: 0.4s; }\n @keyframes typingDot {\n 0%, 60%, 100% { transform: translateY(0); opacity: 0.7; }\n 30% { transform: translateY(-10px); opacity: 1; }\n }\n\n .a4a-chatflow-input-area {\n display: flex; gap: 8px; padding: 16px 20px;\n background: white; border-top: 1px solid #e2e8f0;\n }\n .a4a-chatflow-input {\n flex: 1; border: 2px solid #e2e8f0; border-radius: 24px;\n padding: 12px 20px; font-size: 14px; outline: none;\n transition: border-color 0.2s;\n }\n .a4a-chatflow-input:focus { border-color: #667eea; }\n\n .a4a-chatflow-send {\n width: 44px; height: 44px; border-radius: 50%;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white; border: none; cursor: pointer;\n font-size: 18px; display: flex; align-items: center;\n justify-content: center; transition: all 0.2s; flex-shrink: 0;\n }\n .a4a-chatflow-send:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(102,126,234,0.4); }\n .a4a-chatflow-send:active { transform: scale(0.95); }\n\n \/* Tumma teema *\/\n .a4a-chatflow-dark .a4a-chatflow-window { background: #1a202c; }\n .a4a-chatflow-dark .a4a-chatflow-messages { background: #2d3748; }\n .a4a-chatflow-dark .a4a-chatflow-message-text { background: #4a5568; color: #e2e8f0; }\n .a4a-chatflow-dark .a4a-chatflow-message-user .a4a-chatflow-message-text {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;\n }\n .a4a-chatflow-dark .a4a-chatflow-input-area { background: #1a202c; border-top-color: #4a5568; }\n .a4a-chatflow-dark .a4a-chatflow-input { background: #2d3748; border-color: #4a5568; color: #e2e8f0; }\n .a4a-chatflow-dark .a4a-chatflow-typing { background: #2d3748; }\n\n \/* Mobiili *\/\n @media (max-width: 480px) {\n .a4a-chatflow-window { width: calc(100vw - 40px); height: calc(100vh - 140px); max-width: 380px; }\n }\n @media (max-width: 380px) {\n .a4a-chatflow-window {\n width: 100vw; height: 100vh; bottom: 0; right: 0;\n border-radius: 0; max-width: none;\n }\n .a4a-chatflow { bottom: 0 !important; right: 0 !important; left: 0 !important; top: 0 !important; }\n .a4a-chatflow-toggle { position: fixed; bottom: 20px; right: 20px; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>\ud83e\udd16 A4A Chatflow Automatisointi<\/h1>\n <p>Aloittelijayst\u00e4v\u00e4llinen ty\u00f6nkulun automatisointi upotettuna verkkosivustoosi<\/p>\n <\/div>\n\n <div class=\"content\">\n <div class=\"section\">\n <h2>Tervetuloa A4A Chatflow\u2019hin<\/h2>\n <p>\n A4A Chatflow on kevyt ja helppo integroida chatbot-kirjasto, joka tuo ty\u00f6nkulun automatisoinnin \n mihin tahansa HTML5-verkkosivustoon. T\u00e4ydellinen aloittelijoille, jotka haluavat lis\u00e4t\u00e4 interaktiivisia \n chat-kokemuksia ilman monimutkaisia taustaj\u00e4rjestelmi\u00e4.\n <\/p>\n <p>\n Katso sivun oikeasta alakulmasta \u2013 chat-widget on jo aktiivinen! Klikkaa sit\u00e4 aloittaaksesi \n keskustelun ja n\u00e4hd\u00e4ksesi ty\u00f6nkulun automatisoinnin toiminnassa.\n <\/p>\n <\/div>\n\n <div class=\"section\">\n <h2>\u2728 T\u00e4rkeimm\u00e4t ominaisuudet<\/h2>\n <div class=\"feature-grid\">\n <div class=\"feature-card\">\n <div class=\"icon\">\ud83d\ude80<\/div>\n <h3>Helppo integrointi<\/h3>\n <p>Lis\u00e4\u00e4 t\u00e4ysin toimiva chatbot verkkosivustoosi vain 3 rivill\u00e4 koodia.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"icon\">\ud83c\udfa8<\/div>\n <h3>Muokattava ulkoasu<\/h3>\n <p>Valitse teemat, sijainnit, v\u00e4rit ja avatarit br\u00e4ndiisi sopiviksi.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"icon\">\u26a1<\/div>\n <h3>Ty\u00f6nkulun automatisointi<\/h3>\n <p>Luo monivaiheisia keskusteluja, jotka opastavat k\u00e4ytt\u00e4ji\u00e4 prosesseissa.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"icon\">\ud83d\udcf1<\/div>\n <h3>Mobiiliyst\u00e4v\u00e4llinen<\/h3>\n <p>Toimii t\u00e4ydellisesti tietokoneella, tabletilla ja mobiililaitteilla.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"icon\">\ud83d\udd12<\/div>\n <h3>Ei taustapalvelua tarvita<\/h3>\n <p>Pelkk\u00e4 client-side JavaScript \u2013 ei palvelimen asetuksia tarvita.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"icon\">\ud83c\udf19<\/div>\n <h3>Tumman tilan tuki<\/h3>\n <p>Sis\u00e4\u00e4nrakennettu tumma teema moderneihin k\u00e4ytt\u00f6kokemuksiin.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"section\">\n <h2>\ud83c\udfaf Pika-aloitus<\/h2>\n <p>Aloita 3 yksinkertaisella vaiheella:<\/p>\n \n <h3 style=\"margin-top: 32px; margin-bottom: 16px; color: #2d3748;\">Vaihe 1: Sis\u00e4llyt\u00e4 tiedostot<\/h3>\n <div class=\"code-block\">\n <code><link rel=\"stylesheet\" href=\"chatflow.css\">\n<script src=\"chatflow.js\"><\/script><\/code>\n <\/div>\n\n <h3 style=\"margin-top: 32px; margin-bottom: 16px; color: #2d3748;\">Vaihe 2: Lis\u00e4\u00e4 konttari<\/h3>\n <div class=\"code-block\">\n <code><div id=\"chatflow-container\"><\/div><\/code>\n <\/div>\n\n <h3 style=\"margin-top: 32px; margin-bottom: 16px; color: #2d3748;\">Vaihe 3: Alusta chatbot<\/h3>\n <div class=\"code-block\">\n <code>const chatflow = new Chatflow({\n containerId: 'chatflow-container',\n botName: 'Avustaja',\n welcomeMessage: 'Hei! Miten voin auttaa?'\n});<\/code>\n <\/div>\n <\/div>\n\n <div class=\"section\">\n <h2>\ud83d\udd04 Ty\u00f6nkulun automatisointi<\/h2>\n <p>\n A4A Chatflow\u2019n todellinen voima tulee ty\u00f6nkulun automatisoinnista. M\u00e4\u00e4rit\u00e4 monivaiheisia keskusteluja,\n jotka opastavat k\u00e4ytt\u00e4ji\u00e4 prosesseissa kuten ajanvarauksissa, palautteen ker\u00e4\u00e4misess\u00e4 tai UKK-vastauksissa.\n <\/p>\n\n <div class=\"workflow-example\">\n <h4>Esimerkki: Tukipyynt\u00f6-ty\u00f6nkulku<\/h4>\n <p>Kokeile sanoa ”tarvitsen apua” chatissa t\u00e4m\u00e4n ty\u00f6nkulun k\u00e4ynnist\u00e4miseksi:<\/p>\n <ul>\n <li>Botti kysyy nime\u00e4si<\/li>\n <li>Botti pyyt\u00e4\u00e4 kuvaamaan ongelman<\/li>\n <li>Botti kysyy prioriteettitasoa<\/li>\n <li>Botti vahvistaa lipun luomisen kaikilla tiedoilla<\/li>\n <\/ul>\n <\/div>\n\n <h3 style=\"margin-top: 32px; margin-bottom: 16px; color: #2d3748;\">Ty\u00f6nkulun asetukset (esimerkki)<\/h3>\n <div class=\"code-block\">\n <code>const chatflow = new Chatflow({\n workflows: [{\n name: 'support-ticket',\n triggers: ['apu', 'tuki', 'ongelma'],\n steps: [ ... ],\n completion: 'Kiitos {name}! ...'\n }]\n});<\/code>\n <\/div>\n <\/div>\n\n <div class=\"section\">\n <h2>\u2699\ufe0f Asetusvaihtoehdot<\/h2>\n <p>Muokkaa jokaista chatbotin osa-aluetta:<\/p>\n <div class=\"code-block\">\n <code>{\n containerId: 'chatflow-container',\n position: 'bottom-right',\n theme: 'light',\n botName: 'A4A Avustaja',\n welcomeMessage: 'Hei!',\n placeholder: 'Kirjoita viestisi...',\n workflows: [],\n onWorkflowComplete: (name, data) => {}\n}<\/code>\n <\/div>\n <\/div>\n\n <div class=\"section\">\n <h2>\ud83c\udfae Kokeile nyt!<\/h2>\n <p>\n Chat-widget on jo aktiivinen t\u00e4ll\u00e4 sivulla. Klikkaa chat-ikonia oikeassa alakulmassa \n ja kokeile n\u00e4it\u00e4 komentoja:\n <\/p>\n <div class=\"button-group\">\n <button class=\"button button-primary\" onclick=\"triggerHelp()\">Kysy apua<\/button>\n <button class=\"button button-secondary\" onclick=\"triggerDemo()\">N\u00e4yt\u00e4 demo<\/button>\n <button class=\"button button-secondary\" onclick=\"clearChat()\">Tyhjenn\u00e4 chat<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <script>\n \/**\n * A4A Chatflow Automation Library (suomennettu versio)\n * @version 1.0.0-fi\n *\/\n (function(window) {\n 'use strict';\n\n class Chatflow {\n constructor(config = {}) {\n this.config = {\n containerId: config.containerId || 'a4a-chatflow',\n position: config.position || 'bottom-right',\n theme: config.theme || 'light',\n botName: config.botName || 'Avustaja',\n botAvatar: config.botAvatar || '\ud83e\udd16',\n userAvatar: config.userAvatar || '\ud83d\udc64',\n welcomeMessage: config.welcomeMessage || 'Hei! Miten voin auttaa sinua t\u00e4n\u00e4\u00e4n?',\n placeholder: config.placeholder || 'Kirjoita viestisi...',\n workflows: config.workflows || [],\n autoOpen: config.autoOpen || false,\n showTimestamp: config.showTimestamp || true,\n enableTypingIndicator: config.enableTypingIndicator || true,\n typingDelay: config.typingDelay || 1000,\n onMessageSent: config.onMessageSent || null,\n onWorkflowComplete: config.onWorkflowComplete || null\n };\n\n this.isOpen = false;\n this.messages = [];\n this.currentWorkflow = null;\n this.workflowStep = 0;\n this.workflowData = {};\n\n this.init();\n }\n\n init() {\n this.createWidget();\n this.attachEventListeners();\n if (this.config.autoOpen) this.open();\n this.addMessage(this.config.welcomeMessage, 'bot');\n }\n\n createWidget() {\n const container = document.getElementById(this.config.containerId) || document.body;\n const widget = document.createElement('div');\n widget.className = `a4a-chatflow a4a-chatflow-${this.config.position} a4a-chatflow-${this.config.theme}`;\n widget.innerHTML = `\n <div class=\"a4a-chatflow-toggle\">\n <span class=\"a4a-chatflow-toggle-icon\">\ud83d\udcac<\/span>\n <\/div>\n <div class=\"a4a-chatflow-window\">\n <div class=\"a4a-chatflow-header\">\n <div class=\"a4a-chatflow-header-info\">\n <span class=\"a4a-chatflow-bot-avatar\">${this.config.botAvatar}<\/span>\n <span class=\"a4a-chatflow-bot-name\">${this.config.botName}<\/span>\n <\/div>\n <button class=\"a4a-chatflow-close\">\u2715<\/button>\n <\/div>\n <div class=\"a4a-chatflow-messages\"><\/div>\n <div class=\"a4a-chatflow-typing\" style=\"display: none;\">\n <span class=\"a4a-chatflow-typing-dot\"><\/span>\n <span class=\"a4a-chatflow-typing-dot\"><\/span>\n <span class=\"a4a-chatflow-typing-dot\"><\/span>\n <\/div>\n <div class=\"a4a-chatflow-input-area\">\n <input type=\"text\" class=\"a4a-chatflow-input\" placeholder=\"${this.config.placeholder}\">\n <button class=\"a4a-chatflow-send\">\u25b6<\/button>\n <\/div>\n <\/div>\n `;\n\n container.appendChild(widget);\n this.widget = widget;\n this.messagesContainer = widget.querySelector('.a4a-chatflow-messages');\n this.inputField = widget.querySelector('.a4a-chatflow-input');\n this.typingIndicator = widget.querySelector('.a4a-chatflow-typing');\n }\n\n attachEventListeners() {\n const toggle = this.widget.querySelector('.a4a-chatflow-toggle');\n const close = this.widget.querySelector('.a4a-chatflow-close');\n const send = this.widget.querySelector('.a4a-chatflow-send');\n \n toggle.addEventListener('click', () => this.toggle());\n close.addEventListener('click', () => this.close());\n send.addEventListener('click', () => this.sendMessage());\n \n this.inputField.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') this.sendMessage();\n });\n }\n\n toggle() { this.isOpen ? this.close() : this.open(); }\n open() { this.widget.classList.add('a4a-chatflow-open'); this.isOpen = true; this.inputField.focus(); }\n close() { this.widget.classList.remove('a4a-chatflow-open'); this.isOpen = false; }\n\n sendMessage() {\n const message = this.inputField.value.trim();\n if (!message) return;\n\n this.addMessage(message, 'user');\n this.inputField.value = '';\n\n if (this.config.onMessageSent) this.config.onMessageSent(message);\n this.processWorkflows(message);\n }\n\n addMessage(text, sender = 'bot', options = {}) {\n const message = { text, sender, timestamp: new Date(), options };\n this.messages.push(message);\n this.renderMessage(message);\n }\n\n renderMessage(message) {\n const messageEl = document.createElement('div');\n messageEl.className = `a4a-chatflow-message a4a-chatflow-message-${message.sender}`;\n \n const avatar = message.sender === 'bot' ? this.config.botAvatar : this.config.userAvatar;\n const timeStr = this.config.showTimestamp ? \n `<span class=\"a4a-chatflow-timestamp\">${this.formatTime(message.timestamp)}<\/span>` : '';\n\n messageEl.innerHTML = `\n <div class=\"a4a-chatflow-message-avatar\">${avatar}<\/div>\n <div class=\"a4a-chatflow-message-content\">\n <div class=\"a4a-chatflow-message-text\">${this.escapeHtml(message.text)}<\/div>\n ${timeStr}\n <\/div>\n `;\n\n this.messagesContainer.appendChild(messageEl);\n this.scrollToBottom();\n }\n\n showTyping() {\n if (this.config.enableTypingIndicator) {\n this.typingIndicator.style.display = 'flex';\n this.scrollToBottom();\n }\n }\n\n hideTyping() { this.typingIndicator.style.display = 'none'; }\n\n processWorkflows(message) {\n if (!this.currentWorkflow) {\n const workflow = this.findMatchingWorkflow(message);\n if (workflow) {\n this.startWorkflow(workflow);\n } else {\n this.respondWithDelay('Ymm\u00e4rr\u00e4n. Miten muuten voin auttaa sinua?');\n }\n } else {\n this.continueWorkflow(message);\n }\n }\n\n findMatchingWorkflow(message) {\n const lowerMessage = message.toLowerCase();\n return this.config.workflows.find(workflow => {\n if (workflow.triggers) {\n return workflow.triggers.some(trigger => \n lowerMessage.includes(trigger.toLowerCase())\n );\n }\n return false;\n });\n }\n\n startWorkflow(workflow) {\n this.currentWorkflow = workflow;\n this.workflowStep = 0;\n this.workflowData = {};\n this.executeWorkflowStep();\n }\n\n continueWorkflow(userInput) {\n const step = this.currentWorkflow.steps[this.workflowStep];\n if (step.variable) this.workflowData[step.variable] = userInput;\n this.workflowStep++;\n if (this.workflowStep < this.currentWorkflow.steps.length) {\n this.executeWorkflowStep();\n } else {\n this.completeWorkflow();\n }\n }\n\n executeWorkflowStep() {\n const step = this.currentWorkflow.steps[this.workflowStep];\n if (step.message) {\n let message = step.message;\n Object.keys(this.workflowData).forEach(key => {\n message = message.replace(`{${key}}`, this.workflowData[key]);\n });\n this.respondWithDelay(message);\n }\n }\n\n completeWorkflow() {\n if (this.config.onWorkflowComplete) {\n this.config.onWorkflowComplete(this.currentWorkflow.name, this.workflowData);\n }\n if (this.currentWorkflow.completion) {\n let message = this.currentWorkflow.completion;\n Object.keys(this.workflowData).forEach(key => {\n message = message.replace(`{${key}}`, this.workflowData[key]);\n });\n this.respondWithDelay(message);\n }\n this.currentWorkflow = null;\n this.workflowStep = 0;\n this.workflowData = {};\n }\n\n respondWithDelay(message, delay) {\n delay = delay || this.config.typingDelay;\n this.showTyping();\n setTimeout(() => {\n this.hideTyping();\n this.addMessage(message, 'bot');\n }, delay);\n }\n\n scrollToBottom() {\n this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;\n }\n\n formatTime(date) {\n const hours = date.getHours().toString().padStart(2, '0');\n const minutes = date.getMinutes().toString().padStart(2, '0');\n return `${hours}:${minutes}`;\n }\n\n escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n addWorkflow(workflow) { this.config.workflows.push(workflow); }\n clearMessages() {\n this.messages = [];\n this.messagesContainer.innerHTML = '';\n }\n destroy() {\n if (this.widget && this.widget.parentNode) this.widget.parentNode.removeChild(this.widget);\n }\n }\n\n window.Chatflow = Chatflow;\n })(window);\n <\/script>\n\n <script>\n \/\/ Alustus \u2013 suomenkieliset ty\u00f6nkulut\n const chatflow = new Chatflow({\n containerId: 'chatflow-container',\n botName: 'A4A Avustaja',\n botAvatar: '\ud83e\udd16',\n welcomeMessage: 'Tervetuloa A4A Chatflow\u2019hin! Kokeile sanoa \"apu\" tai \"demo\" n\u00e4hd\u00e4ksesi ty\u00f6nkulut toiminnassa.',\n workflows: [\n {\n name: 'support-ticket',\n triggers: ['apu', 'tuki', 'ongelma', 'tarvitsen apua'],\n steps: [\n { message: 'Olisin iloinen voidessani auttaa! Mik\u00e4 on nimesi?', variable: 'name' },\n { message: 'Kiitos, {name}! Kuvaa ongelmasi.', variable: 'issue' },\n { message: 'Mik\u00e4 on prioriteettitaso? (matala\/keskitaso\/korkea)', variable: 'priority' }\n ],\n completion: 'T\u00e4ydellist\u00e4! Olen luonut {priority} prioriteetin tukipyynn\u00f6n nimelle {name}. Ongelma: \"{issue}\". Tiimimme ottaa sinuun yhteytt\u00e4 pian!'\n },\n {\n name: 'demo-workflow',\n triggers: ['demo', 'esittely', 'n\u00e4yt\u00e4 minulle', 'esimerkki'],\n steps: [\n { message: 'Mahtavaa! N\u00e4yt\u00e4n, miten ty\u00f6nkulut toimivat. Mik\u00e4 on lempiv\u00e4risi?', variable: 'color' },\n { message: 'Hieno valinta! {color} on kaunis v\u00e4ri. Mik\u00e4 on lempiel\u00e4imesi?', variable: 'animal' },\n { message: 'Mielenkiintoista! Ja lopuksi, mik\u00e4 on lempiruokasi?', variable: 'food' }\n ],\n completion: 'Loistavaa! Lempiv\u00e4risi on {color}, lempiel\u00e4imesi on {animal} ja rakastat {food}. N\u00e4in monivaiheiset ty\u00f6nkulut ker\u00e4\u00e4v\u00e4t tietoja!'\n },\n {\n name: 'appointment',\n triggers: ['ajanvaraus', 'varaa', 'aikataulu', 'tapaaminen'],\n steps: [\n { message: 'Voin auttaa sinua varaamaan ajanvarauksen. Mik\u00e4 on nimesi?', variable: 'name' },\n { message: 'Kiitos, {name}! Mink\u00e4 p\u00e4iv\u00e4n haluaisit? (esim. 31.10.)', variable: 'date' },\n { message: 'Ja mik\u00e4 kellonaika sopii parhaiten? (esim. 14:00)', variable: 'time' }\n ],\n completion: 'T\u00e4ydellist\u00e4! Olen varannut ajanvarauksen {name} nimelle p\u00e4iv\u00e4lle {date} klo {time}. Saat vahvistuss\u00e4hk\u00f6postin pian!'\n }\n ],\n onMessageSent: (message) => { console.log('K\u00e4ytt\u00e4j\u00e4 l\u00e4hetti:', message); },\n onWorkflowComplete: (name, data) => { console.log('Ty\u00f6nkulku valmis:', name, data); }\n });\n\n \/\/ Demo-painikkeet (suomennetut komennot)\n function triggerHelp() {\n chatflow.open();\n setTimeout(() => {\n chatflow.inputField.value = 'tarvitsen apua';\n chatflow.sendMessage();\n }, 500);\n }\n\n function triggerDemo() {\n chatflow.open();\n setTimeout(() => {\n chatflow.inputField.value = 'n\u00e4yt\u00e4 demo';\n chatflow.sendMessage();\n }, 500);\n }\n\n function clearChat() {\n chatflow.clearMessages();\n chatflow.addMessage(chatflow.config.welcomeMessage, 'bot');\n chatflow.open();\n }\n\n \/\/ Luo konttari, jos sit\u00e4 ei ole\n if (!document.getElementById('chatflow-container')) {\n const container = document.createElement('div');\n container.id = 'chatflow-container';\n document.body.appendChild(container);\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p>This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like pi\u00f1a coladas. (And gettin’ caught in the rain.)<\/p>\n<\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.<\/p>\n<\/blockquote>\n\n\n\n<p>As a new WordPress user, you should go to <a href=\"http:\/\/www.auto-suomi.fi\/wp-admin\/\">your dashboard<\/a> to delete this page and create new pages for your content. Have fun!<\/p>\n\n\n\n<p>…or something like this:<\/p>\n\n\n\n<p><\/p>\n\n\n<nav class=\"is-responsive wp-block-navigation is-layout-flex wp-block-navigation-is-layout-flex\" aria-label=\"Navigaatio\" \n\t\t data-wp-interactive=\"core\/navigation\" data-wp-context='{\"overlayOpenedBy\":{\"click\":false,\"hover\":false,\"focus\":false},\"type\":\"overlay\",\"roleAttribute\":\"\",\"ariaLabel\":\"Valikko\"}'><button aria-haspopup=\"dialog\" aria-label=\"Avaa valikko\" class=\"wp-block-navigation__responsive-container-open\" \n\t\t\t\tdata-wp-on--click=\"actions.openMenuOnClick\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t><svg width=\"24\" height=\"24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M4 7.5h16v1.5H4z\"><\/path><path d=\"M4 15h16v1.5H4z\"><\/path><\/svg><\/button>\n\t\t\t\t<div class=\"wp-block-navigation__responsive-container\" id=\"modal-1\" \n\t\t\t\tdata-wp-class--has-modal-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-class--is-menu-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-watch=\"callbacks.initMenu\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t\tdata-wp-on--focusout=\"actions.handleMenuFocusout\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t>\n\t\t\t\t\t<div class=\"wp-block-navigation__responsive-close\" tabindex=\"-1\">\n\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-dialog\" \n\t\t\t\tdata-wp-bind--aria-modal=\"state.ariaModal\"\n\t\t\t\tdata-wp-bind--aria-label=\"state.ariaLabel\"\n\t\t\t\tdata-wp-bind--role=\"state.roleAttribute\"\n\t\t\t>\n\t\t\t\t\t\t\t<button aria-label=\"Sulje valikko\" class=\"wp-block-navigation__responsive-container-close\" \n\t\t\t\tdata-wp-on--click=\"actions.closeMenuOnClick\"\n\t\t\t><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z\"><\/path><\/svg><\/button>\n\t\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-container-content\" \n\t\t\t\tdata-wp-watch=\"callbacks.focusFirstElement\"\n\t\t\t id=\"modal-1-content\">\n\t\t\t\t\t\t\t\t<ul class=\"wp-block-navigation__container is-responsive wp-block-navigation\"><ul class=\"wp-block-page-list\"><li class=\"wp-block-pages-list__item wp-block-navigation-item open-on-hover-click\"><a class=\"wp-block-pages-list__item__link wp-block-navigation-item__content\" href=\"https:\/\/auto-suomi.fi\/?page_id=17\">Chatflow<\/a><\/li><li class=\"wp-block-pages-list__item wp-block-navigation-item open-on-hover-click\"><a class=\"wp-block-pages-list__item__link wp-block-navigation-item__content\" href=\"https:\/\/auto-suomi.fi\/?page_id=23\">Demo<\/a><\/li><li class=\"wp-block-pages-list__item wp-block-navigation-item open-on-hover-click\"><a class=\"wp-block-pages-list__item__link wp-block-navigation-item__content\" href=\"https:\/\/auto-suomi.fi\/?page_id=2\">Sample Page<\/a><\/li><li class=\"wp-block-pages-list__item wp-block-navigation-item open-on-hover-click\"><a class=\"wp-block-pages-list__item__link wp-block-navigation-item__content\" href=\"https:\/\/auto-suomi.fi\/?page_id=8\">Testi<\/a><\/li><\/ul><\/ul>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div><\/nav>","protected":false},"excerpt":{"rendered":"<p>A4A Chatflow Automatisointi – Demo \ud83e\udd16 A4A Chatflow Automatisointi Aloittelijayst\u00e4v\u00e4llinen ty\u00f6nkulun automatisointi upotettuna verkkosivustoosi Tervetuloa A4A Chatflow\u2019hin A4A Chatflow on kevyt ja helppo integroida chatbot-kirjasto, joka tuo ty\u00f6nkulun automatisoinnin mihin tahansa HTML5-verkkosivustoon. T\u00e4ydellinen aloittelijoille, jotka haluavat lis\u00e4t\u00e4 interaktiivisia chat-kokemuksia ilman monimutkaisia taustaj\u00e4rjestelmi\u00e4. Katso sivun oikeasta alakulmasta \u2013 chat-widget on jo aktiivinen! Klikkaa sit\u00e4 aloittaaksesi keskustelun […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/auto-suomi.fi\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/auto-suomi.fi\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/auto-suomi.fi\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/auto-suomi.fi\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/auto-suomi.fi\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":9,"href":"https:\/\/auto-suomi.fi\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":43,"href":"https:\/\/auto-suomi.fi\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/43"}],"wp:attachment":[{"href":"https:\/\/auto-suomi.fi\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2,"date":"2026-03-21T18:39:04","date_gmt":"2026-03-21T18:39:04","guid":{"rendered":"http:\/\/www.auto-suomi.fi\/?page_id=2"},"modified":"2026-04-15T09:44:53","modified_gmt":"2026-04-15T09:44:53","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/auto-suomi.fi\/?page_id=2","title":{"rendered":"Sample Page"},"content":{"rendered":"\n\n\n\n \n \n A4A Chatflow Automatisointi – Demo<\/title>\n <style>\n \/* Alkuper\u00e4inen sivun tyyli *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n min-height: 100vh;\n padding: 40px 20px;\n }\n\n .container {\n max-width: 1200px;\n margin: 0 auto;\n background: white;\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n overflow: hidden;\n }\n\n .header {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 60px 40px;\n text-align: center;\n }\n\n .header h1 {\n font-size: 48px;\n margin-bottom: 16px;\n font-weight: 700;\n }\n\n .header p {\n font-size: 20px;\n opacity: 0.95;\n }\n\n .content {\n padding: 60px 40px;\n }\n\n .section {\n margin-bottom: 60px;\n }\n\n .section h2 {\n font-size: 32px;\n margin-bottom: 24px;\n color: #2d3748;\n }\n\n .section p {\n font-size: 18px;\n line-height: 1.8;\n color: #4a5568;\n margin-bottom: 16px;\n }\n\n .feature-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 24px;\n margin-top: 32px;\n }\n\n .feature-card {\n background: #f7f9fc;\n padding: 32px;\n border-radius: 12px;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n }\n\n .feature-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n }\n\n .feature-card h3 {\n font-size: 20px;\n margin-bottom: 12px;\n color: #2d3748;\n }\n\n .feature-card p {\n font-size: 16px;\n color: #718096;\n margin-bottom: 0;\n }\n\n .icon {\n font-size: 48px;\n margin-bottom: 16px;\n }\n\n .code-block {\n background: #2d3748;\n color: #e2e8f0;\n padding: 24px;\n border-radius: 8px;\n overflow-x: auto;\n margin-top: 16px;\n }\n\n .code-block code {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 14px;\n line-height: 1.6;\n }\n\n .button-group {\n display: flex;\n gap: 16px;\n margin-top: 24px;\n flex-wrap: wrap;\n }\n\n .button {\n padding: 14px 32px;\n border-radius: 8px;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n border: none;\n text-decoration: none;\n display: inline-block;\n }\n\n .button-primary {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n }\n\n .button-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);\n }\n\n .button-secondary {\n background: white;\n color: #667eea;\n border: 2px solid #667eea;\n }\n\n .button-secondary:hover {\n background: #f7f9fc;\n }\n\n .workflow-example {\n background: #f7f9fc;\n padding: 24px;\n border-radius: 8px;\n margin-top: 16px;\n border-left: 4px solid #667eea;\n }\n\n .workflow-example h4 {\n margin-bottom: 12px;\n color: #2d3748;\n }\n\n .workflow-example ul {\n margin-left: 24px;\n color: #4a5568;\n }\n\n .workflow-example li {\n margin-bottom: 8px;\n }\n\n @media (max-width: 768px) {\n .header { padding: 40px 24px; }\n .header h1 { font-size: 36px; }\n .header p { font-size: 18px; }\n .content { padding: 40px 24px; }\n .section h2 { font-size: 28px; }\n }\n\n \/* === A4A CHATFLOW CSS (upotettu) === *\/\n .a4a-chatflow {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n position: fixed;\n z-index: 9999;\n }\n .a4a-chatflow-bottom-right { bottom: 20px; right: 20px; }\n .a4a-chatflow-bottom-left { bottom: 20px; left: 20px; }\n .a4a-chatflow-top-right { top: 20px; right: 20px; }\n .a4a-chatflow-top-left { top: 20px; left: 20px; }\n\n .a4a-chatflow-toggle {\n width: 60px; height: 60px; border-radius: 50%;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n display: flex; align-items: center; justify-content: center;\n cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n transition: all 0.3s ease;\n }\n .a4a-chatflow-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }\n .a4a-chatflow-toggle-icon { font-size: 28px; line-height: 1; }\n\n .a4a-chatflow-window {\n position: absolute; bottom: 80px; right: 0;\n width: 380px; height: 600px;\n background: white; border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0,0,0,0.12);\n display: none; flex-direction: column;\n overflow: hidden; transition: all 0.3s ease;\n }\n .a4a-chatflow-open .a4a-chatflow-window { display: flex; }\n .a4a-chatflow-open .a4a-chatflow-toggle { opacity: 0; pointer-events: none; }\n\n .a4a-chatflow-header {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white; padding: 16px 20px;\n display: flex; justify-content: space-between; align-items: center;\n }\n .a4a-chatflow-header-info { display: flex; align-items: center; gap: 12px; }\n .a4a-chatflow-bot-avatar { font-size: 24px; line-height: 1; }\n .a4a-chatflow-bot-name { font-size: 16px; font-weight: 600; }\n .a4a-chatflow-close {\n background: transparent; border: none; color: white;\n font-size: 24px; cursor: pointer; padding: 0;\n width: 32px; height: 32px; display: flex;\n align-items: center; justify-content: center;\n border-radius: 4px; transition: background 0.2s;\n }\n .a4a-chatflow-close:hover { background: rgba(255,255,255,0.2); }\n\n .a4a-chatflow-messages {\n flex: 1; overflow-y: auto; padding: 20px; background: #f7f9fc;\n }\n .a4a-chatflow-messages::-webkit-scrollbar { width: 6px; }\n .a4a-chatflow-messages::-webkit-scrollbar-track { background: transparent; }\n .a4a-chatflow-messages::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 3px; }\n\n .a4a-chatflow-message {\n display: flex; gap: 12px; margin-bottom: 16px;\n animation: messageSlideIn 0.3s ease;\n }\n @keyframes messageSlideIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .a4a-chatflow-message-avatar {\n font-size: 20px; width: 32px; height: 32px;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n }\n .a4a-chatflow-message-content { flex: 1; display: flex; flex-direction: column; gap: 4px; }\n .a4a-chatflow-message-text {\n background: white; padding: 12px 16px; border-radius: 12px;\n box-shadow: 0 1px 2px rgba(0,0,0,0.05); word-wrap: break-word; line-height: 1.5;\n }\n .a4a-chatflow-message-user { flex-direction: row-reverse; }\n .a4a-chatflow-message-user .a4a-chatflow-message-content { align-items: flex-end; }\n .a4a-chatflow-message-user .a4a-chatflow-message-text {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;\n }\n .a4a-chatflow-timestamp { font-size: 11px; color: #718096; padding: 0 4px; }\n\n .a4a-chatflow-typing {\n display: flex; gap: 12px; padding: 0 20px 16px 20px;\n align-items: center; background: #f7f9fc;\n }\n .a4a-chatflow-typing::before { content: '\ud83d\udcac'; font-size: 20px; }\n .a4a-chatflow-typing-dot {\n width: 8px; height: 8px; background: #cbd5e0;\n border-radius: 50%; animation: typingDot 1.4s infinite;\n }\n .a4a-chatflow-typing-dot:nth-child(2) { animation-delay: 0.2s; }\n .a4a-chatflow-typing-dot:nth-child(3) { animation-delay: 0.4s; }\n @keyframes typingDot {\n 0%, 60%, 100% { transform: translateY(0); opacity: 0.7; }\n 30% { transform: translateY(-10px); opacity: 1; }\n }\n\n .a4a-chatflow-input-area {\n display: flex; gap: 8px; padding: 16px 20px;\n background: white; border-top: 1px solid #e2e8f0;\n }\n .a4a-chatflow-input {\n flex: 1; border: 2px solid #e2e8f0; border-radius: 24px;\n padding: 12px 20px; font-size: 14px; outline: none;\n transition: border-color 0.2s;\n }\n .a4a-chatflow-input:focus { border-color: #667eea; }\n\n .a4a-chatflow-send {\n width: 44px; height: 44px; border-radius: 50%;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white; border: none; cursor: pointer;\n font-size: 18px; display: flex; align-items: center;\n justify-content: center; transition: all 0.2s; flex-shrink: 0;\n }\n .a4a-chatflow-send:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(102,126,234,0.4); }\n .a4a-chatflow-send:active { transform: scale(0.95); }\n\n \/* Tumma teema *\/\n .a4a-chatflow-dark .a4a-chatflow-window { background: #1a202c; }\n .a4a-chatflow-dark .a4a-chatflow-messages { background: #2d3748; }\n .a4a-chatflow-dark .a4a-chatflow-message-text { background: #4a5568; color: #e2e8f0; }\n .a4a-chatflow-dark .a4a-chatflow-message-user .a4a-chatflow-message-text {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;\n }\n .a4a-chatflow-dark .a4a-chatflow-input-area { background: #1a202c; border-top-color: #4a5568; }\n .a4a-chatflow-dark .a4a-chatflow-input { background: #2d3748; border-color: #4a5568; color: #e2e8f0; }\n .a4a-chatflow-dark .a4a-chatflow-typing { background: #2d3748; }\n\n \/* Mobiili *\/\n @media (max-width: 480px) {\n .a4a-chatflow-window { width: calc(100vw - 40px); height: calc(100vh - 140px); max-width: 380px; }\n }\n @media (max-width: 380px) {\n .a4a-chatflow-window {\n width: 100vw; height: 100vh; bottom: 0; right: 0;\n border-radius: 0; max-width: none;\n }\n .a4a-chatflow { bottom: 0 !important; right: 0 !important; left: 0 !important; top: 0 !important; }\n .a4a-chatflow-toggle { position: fixed; bottom: 20px; right: 20px; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>\ud83e\udd16 A4A Chatflow Automatisointi<\/h1>\n <p>Aloittelijayst\u00e4v\u00e4llinen ty\u00f6nkulun automatisointi upotettuna verkkosivustoosi<\/p>\n <\/div>\n\n <div class=\"content\">\n <div class=\"section\">\n <h2>Tervetuloa A4A Chatflow\u2019hin<\/h2>\n <p>\n A4A Chatflow on kevyt ja helppo integroida chatbot-kirjasto, joka tuo ty\u00f6nkulun automatisoinnin \n mihin tahansa HTML5-verkkosivustoon. T\u00e4ydellinen aloittelijoille, jotka haluavat lis\u00e4t\u00e4 interaktiivisia \n chat-kokemuksia ilman monimutkaisia taustaj\u00e4rjestelmi\u00e4.\n <\/p>\n <p>\n Katso sivun oikeasta alakulmasta \u2013 chat-widget on jo aktiivinen! Klikkaa sit\u00e4 aloittaaksesi \n keskustelun ja n\u00e4hd\u00e4ksesi ty\u00f6nkulun automatisoinnin toiminnassa.\n <\/p>\n <\/div>\n\n <div class=\"section\">\n <h2>\u2728 T\u00e4rkeimm\u00e4t ominaisuudet<\/h2>\n <div class=\"feature-grid\">\n <div class=\"feature-card\">\n <div class=\"icon\">\ud83d\ude80<\/div>\n <h3>Helppo integrointi<\/h3>\n <p>Lis\u00e4\u00e4 t\u00e4ysin toimiva chatbot verkkosivustoosi vain 3 rivill\u00e4 koodia.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"icon\">\ud83c\udfa8<\/div>\n <h3>Muokattava ulkoasu<\/h3>\n <p>Valitse teemat, sijainnit, v\u00e4rit ja avatarit br\u00e4ndiisi sopiviksi.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"icon\">\u26a1<\/div>\n <h3>Ty\u00f6nkulun automatisointi<\/h3>\n <p>Luo monivaiheisia keskusteluja, jotka opastavat k\u00e4ytt\u00e4ji\u00e4 prosesseissa.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"icon\">\ud83d\udcf1<\/div>\n <h3>Mobiiliyst\u00e4v\u00e4llinen<\/h3>\n <p>Toimii t\u00e4ydellisesti tietokoneella, tabletilla ja mobiililaitteilla.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"icon\">\ud83d\udd12<\/div>\n <h3>Ei taustapalvelua tarvita<\/h3>\n <p>Pelkk\u00e4 client-side JavaScript \u2013 ei palvelimen asetuksia tarvita.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"icon\">\ud83c\udf19<\/div>\n <h3>Tumman tilan tuki<\/h3>\n <p>Sis\u00e4\u00e4nrakennettu tumma teema moderneihin k\u00e4ytt\u00f6kokemuksiin.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"section\">\n <h2>\ud83c\udfaf Pika-aloitus<\/h2>\n <p>Aloita 3 yksinkertaisella vaiheella:<\/p>\n \n <h3 style=\"margin-top: 32px; margin-bottom: 16px; color: #2d3748;\">Vaihe 1: Sis\u00e4llyt\u00e4 tiedostot<\/h3>\n <div class=\"code-block\">\n <code><link rel=\"stylesheet\" href=\"chatflow.css\">\n<script src=\"chatflow.js\"><\/script><\/code>\n <\/div>\n\n <h3 style=\"margin-top: 32px; margin-bottom: 16px; color: #2d3748;\">Vaihe 2: Lis\u00e4\u00e4 konttari<\/h3>\n <div class=\"code-block\">\n <code><div id=\"chatflow-container\"><\/div><\/code>\n <\/div>\n\n <h3 style=\"margin-top: 32px; margin-bottom: 16px; color: #2d3748;\">Vaihe 3: Alusta chatbot<\/h3>\n <div class=\"code-block\">\n <code>const chatflow = new Chatflow({\n containerId: 'chatflow-container',\n botName: 'Avustaja',\n welcomeMessage: 'Hei! Miten voin auttaa?'\n});<\/code>\n <\/div>\n <\/div>\n\n <div class=\"section\">\n <h2>\ud83d\udd04 Ty\u00f6nkulun automatisointi<\/h2>\n <p>\n A4A Chatflow\u2019n todellinen voima tulee ty\u00f6nkulun automatisoinnista. M\u00e4\u00e4rit\u00e4 monivaiheisia keskusteluja,\n jotka opastavat k\u00e4ytt\u00e4ji\u00e4 prosesseissa kuten ajanvarauksissa, palautteen ker\u00e4\u00e4misess\u00e4 tai UKK-vastauksissa.\n <\/p>\n\n <div class=\"workflow-example\">\n <h4>Esimerkki: Tukipyynt\u00f6-ty\u00f6nkulku<\/h4>\n <p>Kokeile sanoa ”tarvitsen apua” chatissa t\u00e4m\u00e4n ty\u00f6nkulun k\u00e4ynnist\u00e4miseksi:<\/p>\n <ul>\n <li>Botti kysyy nime\u00e4si<\/li>\n <li>Botti pyyt\u00e4\u00e4 kuvaamaan ongelman<\/li>\n <li>Botti kysyy prioriteettitasoa<\/li>\n <li>Botti vahvistaa lipun luomisen kaikilla tiedoilla<\/li>\n <\/ul>\n <\/div>\n\n <h3 style=\"margin-top: 32px; margin-bottom: 16px; color: #2d3748;\">Ty\u00f6nkulun asetukset (esimerkki)<\/h3>\n <div class=\"code-block\">\n <code>const chatflow = new Chatflow({\n workflows: [{\n name: 'support-ticket',\n triggers: ['apu', 'tuki', 'ongelma'],\n steps: [ ... ],\n completion: 'Kiitos {name}! ...'\n }]\n});<\/code>\n <\/div>\n <\/div>\n\n <div class=\"section\">\n <h2>\u2699\ufe0f Asetusvaihtoehdot<\/h2>\n <p>Muokkaa jokaista chatbotin osa-aluetta:<\/p>\n <div class=\"code-block\">\n <code>{\n containerId: 'chatflow-container',\n position: 'bottom-right',\n theme: 'light',\n botName: 'A4A Avustaja',\n welcomeMessage: 'Hei!',\n placeholder: 'Kirjoita viestisi...',\n workflows: [],\n onWorkflowComplete: (name, data) => {}\n}<\/code>\n <\/div>\n <\/div>\n\n <div class=\"section\">\n <h2>\ud83c\udfae Kokeile nyt!<\/h2>\n <p>\n Chat-widget on jo aktiivinen t\u00e4ll\u00e4 sivulla. Klikkaa chat-ikonia oikeassa alakulmassa \n ja kokeile n\u00e4it\u00e4 komentoja:\n <\/p>\n <div class=\"button-group\">\n <button class=\"button button-primary\" onclick=\"triggerHelp()\">Kysy apua<\/button>\n <button class=\"button button-secondary\" onclick=\"triggerDemo()\">N\u00e4yt\u00e4 demo<\/button>\n <button class=\"button button-secondary\" onclick=\"clearChat()\">Tyhjenn\u00e4 chat<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <script>\n \/**\n * A4A Chatflow Automation Library (suomennettu versio)\n * @version 1.0.0-fi\n *\/\n (function(window) {\n 'use strict';\n\n class Chatflow {\n constructor(config = {}) {\n this.config = {\n containerId: config.containerId || 'a4a-chatflow',\n position: config.position || 'bottom-right',\n theme: config.theme || 'light',\n botName: config.botName || 'Avustaja',\n botAvatar: config.botAvatar || '\ud83e\udd16',\n userAvatar: config.userAvatar || '\ud83d\udc64',\n welcomeMessage: config.welcomeMessage || 'Hei! Miten voin auttaa sinua t\u00e4n\u00e4\u00e4n?',\n placeholder: config.placeholder || 'Kirjoita viestisi...',\n workflows: config.workflows || [],\n autoOpen: config.autoOpen || false,\n showTimestamp: config.showTimestamp || true,\n enableTypingIndicator: config.enableTypingIndicator || true,\n typingDelay: config.typingDelay || 1000,\n onMessageSent: config.onMessageSent || null,\n onWorkflowComplete: config.onWorkflowComplete || null\n };\n\n this.isOpen = false;\n this.messages = [];\n this.currentWorkflow = null;\n this.workflowStep = 0;\n this.workflowData = {};\n\n this.init();\n }\n\n init() {\n this.createWidget();\n this.attachEventListeners();\n if (this.config.autoOpen) this.open();\n this.addMessage(this.config.welcomeMessage, 'bot');\n }\n\n createWidget() {\n const container = document.getElementById(this.config.containerId) || document.body;\n const widget = document.createElement('div');\n widget.className = `a4a-chatflow a4a-chatflow-${this.config.position} a4a-chatflow-${this.config.theme}`;\n widget.innerHTML = `\n <div class=\"a4a-chatflow-toggle\">\n <span class=\"a4a-chatflow-toggle-icon\">\ud83d\udcac<\/span>\n <\/div>\n <div class=\"a4a-chatflow-window\">\n <div class=\"a4a-chatflow-header\">\n <div class=\"a4a-chatflow-header-info\">\n <span class=\"a4a-chatflow-bot-avatar\">${this.config.botAvatar}<\/span>\n <span class=\"a4a-chatflow-bot-name\">${this.config.botName}<\/span>\n <\/div>\n <button class=\"a4a-chatflow-close\">\u2715<\/button>\n <\/div>\n <div class=\"a4a-chatflow-messages\"><\/div>\n <div class=\"a4a-chatflow-typing\" style=\"display: none;\">\n <span class=\"a4a-chatflow-typing-dot\"><\/span>\n <span class=\"a4a-chatflow-typing-dot\"><\/span>\n <span class=\"a4a-chatflow-typing-dot\"><\/span>\n <\/div>\n <div class=\"a4a-chatflow-input-area\">\n <input type=\"text\" class=\"a4a-chatflow-input\" placeholder=\"${this.config.placeholder}\">\n <button class=\"a4a-chatflow-send\">\u25b6<\/button>\n <\/div>\n <\/div>\n `;\n\n container.appendChild(widget);\n this.widget = widget;\n this.messagesContainer = widget.querySelector('.a4a-chatflow-messages');\n this.inputField = widget.querySelector('.a4a-chatflow-input');\n this.typingIndicator = widget.querySelector('.a4a-chatflow-typing');\n }\n\n attachEventListeners() {\n const toggle = this.widget.querySelector('.a4a-chatflow-toggle');\n const close = this.widget.querySelector('.a4a-chatflow-close');\n const send = this.widget.querySelector('.a4a-chatflow-send');\n \n toggle.addEventListener('click', () => this.toggle());\n close.addEventListener('click', () => this.close());\n send.addEventListener('click', () => this.sendMessage());\n \n this.inputField.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') this.sendMessage();\n });\n }\n\n toggle() { this.isOpen ? this.close() : this.open(); }\n open() { this.widget.classList.add('a4a-chatflow-open'); this.isOpen = true; this.inputField.focus(); }\n close() { this.widget.classList.remove('a4a-chatflow-open'); this.isOpen = false; }\n\n sendMessage() {\n const message = this.inputField.value.trim();\n if (!message) return;\n\n this.addMessage(message, 'user');\n this.inputField.value = '';\n\n if (this.config.onMessageSent) this.config.onMessageSent(message);\n this.processWorkflows(message);\n }\n\n addMessage(text, sender = 'bot', options = {}) {\n const message = { text, sender, timestamp: new Date(), options };\n this.messages.push(message);\n this.renderMessage(message);\n }\n\n renderMessage(message) {\n const messageEl = document.createElement('div');\n messageEl.className = `a4a-chatflow-message a4a-chatflow-message-${message.sender}`;\n \n const avatar = message.sender === 'bot' ? this.config.botAvatar : this.config.userAvatar;\n const timeStr = this.config.showTimestamp ? \n `<span class=\"a4a-chatflow-timestamp\">${this.formatTime(message.timestamp)}<\/span>` : '';\n\n messageEl.innerHTML = `\n <div class=\"a4a-chatflow-message-avatar\">${avatar}<\/div>\n <div class=\"a4a-chatflow-message-content\">\n <div class=\"a4a-chatflow-message-text\">${this.escapeHtml(message.text)}<\/div>\n ${timeStr}\n <\/div>\n `;\n\n this.messagesContainer.appendChild(messageEl);\n this.scrollToBottom();\n }\n\n showTyping() {\n if (this.config.enableTypingIndicator) {\n this.typingIndicator.style.display = 'flex';\n this.scrollToBottom();\n }\n }\n\n hideTyping() { this.typingIndicator.style.display = 'none'; }\n\n processWorkflows(message) {\n if (!this.currentWorkflow) {\n const workflow = this.findMatchingWorkflow(message);\n if (workflow) {\n this.startWorkflow(workflow);\n } else {\n this.respondWithDelay('Ymm\u00e4rr\u00e4n. Miten muuten voin auttaa sinua?');\n }\n } else {\n this.continueWorkflow(message);\n }\n }\n\n findMatchingWorkflow(message) {\n const lowerMessage = message.toLowerCase();\n return this.config.workflows.find(workflow => {\n if (workflow.triggers) {\n return workflow.triggers.some(trigger => \n lowerMessage.includes(trigger.toLowerCase())\n );\n }\n return false;\n });\n }\n\n startWorkflow(workflow) {\n this.currentWorkflow = workflow;\n this.workflowStep = 0;\n this.workflowData = {};\n this.executeWorkflowStep();\n }\n\n continueWorkflow(userInput) {\n const step = this.currentWorkflow.steps[this.workflowStep];\n if (step.variable) this.workflowData[step.variable] = userInput;\n this.workflowStep++;\n if (this.workflowStep < this.currentWorkflow.steps.length) {\n this.executeWorkflowStep();\n } else {\n this.completeWorkflow();\n }\n }\n\n executeWorkflowStep() {\n const step = this.currentWorkflow.steps[this.workflowStep];\n if (step.message) {\n let message = step.message;\n Object.keys(this.workflowData).forEach(key => {\n message = message.replace(`{${key}}`, this.workflowData[key]);\n });\n this.respondWithDelay(message);\n }\n }\n\n completeWorkflow() {\n if (this.config.onWorkflowComplete) {\n this.config.onWorkflowComplete(this.currentWorkflow.name, this.workflowData);\n }\n if (this.currentWorkflow.completion) {\n let message = this.currentWorkflow.completion;\n Object.keys(this.workflowData).forEach(key => {\n message = message.replace(`{${key}}`, this.workflowData[key]);\n });\n this.respondWithDelay(message);\n }\n this.currentWorkflow = null;\n this.workflowStep = 0;\n this.workflowData = {};\n }\n\n respondWithDelay(message, delay) {\n delay = delay || this.config.typingDelay;\n this.showTyping();\n setTimeout(() => {\n this.hideTyping();\n this.addMessage(message, 'bot');\n }, delay);\n }\n\n scrollToBottom() {\n this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;\n }\n\n formatTime(date) {\n const hours = date.getHours().toString().padStart(2, '0');\n const minutes = date.getMinutes().toString().padStart(2, '0');\n return `${hours}:${minutes}`;\n }\n\n escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n addWorkflow(workflow) { this.config.workflows.push(workflow); }\n clearMessages() {\n this.messages = [];\n this.messagesContainer.innerHTML = '';\n }\n destroy() {\n if (this.widget && this.widget.parentNode) this.widget.parentNode.removeChild(this.widget);\n }\n }\n\n window.Chatflow = Chatflow;\n })(window);\n <\/script>\n\n <script>\n \/\/ Alustus \u2013 suomenkieliset ty\u00f6nkulut\n const chatflow = new Chatflow({\n containerId: 'chatflow-container',\n botName: 'A4A Avustaja',\n botAvatar: '\ud83e\udd16',\n welcomeMessage: 'Tervetuloa A4A Chatflow\u2019hin! Kokeile sanoa \"apu\" tai \"demo\" n\u00e4hd\u00e4ksesi ty\u00f6nkulut toiminnassa.',\n workflows: [\n {\n name: 'support-ticket',\n triggers: ['apu', 'tuki', 'ongelma', 'tarvitsen apua'],\n steps: [\n { message: 'Olisin iloinen voidessani auttaa! Mik\u00e4 on nimesi?', variable: 'name' },\n { message: 'Kiitos, {name}! Kuvaa ongelmasi.', variable: 'issue' },\n { message: 'Mik\u00e4 on prioriteettitaso? (matala\/keskitaso\/korkea)', variable: 'priority' }\n ],\n completion: 'T\u00e4ydellist\u00e4! Olen luonut {priority} prioriteetin tukipyynn\u00f6n nimelle {name}. Ongelma: \"{issue}\". Tiimimme ottaa sinuun yhteytt\u00e4 pian!'\n },\n {\n name: 'demo-workflow',\n triggers: ['demo', 'esittely', 'n\u00e4yt\u00e4 minulle', 'esimerkki'],\n steps: [\n { message: 'Mahtavaa! N\u00e4yt\u00e4n, miten ty\u00f6nkulut toimivat. Mik\u00e4 on lempiv\u00e4risi?', variable: 'color' },\n { message: 'Hieno valinta! {color} on kaunis v\u00e4ri. Mik\u00e4 on lempiel\u00e4imesi?', variable: 'animal' },\n { message: 'Mielenkiintoista! Ja lopuksi, mik\u00e4 on lempiruokasi?', variable: 'food' }\n ],\n completion: 'Loistavaa! Lempiv\u00e4risi on {color}, lempiel\u00e4imesi on {animal} ja rakastat {food}. N\u00e4in monivaiheiset ty\u00f6nkulut ker\u00e4\u00e4v\u00e4t tietoja!'\n },\n {\n name: 'appointment',\n triggers: ['ajanvaraus', 'varaa', 'aikataulu', 'tapaaminen'],\n steps: [\n { message: 'Voin auttaa sinua varaamaan ajanvarauksen. Mik\u00e4 on nimesi?', variable: 'name' },\n { message: 'Kiitos, {name}! Mink\u00e4 p\u00e4iv\u00e4n haluaisit? (esim. 31.10.)', variable: 'date' },\n { message: 'Ja mik\u00e4 kellonaika sopii parhaiten? (esim. 14:00)', variable: 'time' }\n ],\n completion: 'T\u00e4ydellist\u00e4! Olen varannut ajanvarauksen {name} nimelle p\u00e4iv\u00e4lle {date} klo {time}. Saat vahvistuss\u00e4hk\u00f6postin pian!'\n }\n ],\n onMessageSent: (message) => { console.log('K\u00e4ytt\u00e4j\u00e4 l\u00e4hetti:', message); },\n onWorkflowComplete: (name, data) => { console.log('Ty\u00f6nkulku valmis:', name, data); }\n });\n\n \/\/ Demo-painikkeet (suomennetut komennot)\n function triggerHelp() {\n chatflow.open();\n setTimeout(() => {\n chatflow.inputField.value = 'tarvitsen apua';\n chatflow.sendMessage();\n }, 500);\n }\n\n function triggerDemo() {\n chatflow.open();\n setTimeout(() => {\n chatflow.inputField.value = 'n\u00e4yt\u00e4 demo';\n chatflow.sendMessage();\n }, 500);\n }\n\n function clearChat() {\n chatflow.clearMessages();\n chatflow.addMessage(chatflow.config.welcomeMessage, 'bot');\n chatflow.open();\n }\n\n \/\/ Luo konttari, jos sit\u00e4 ei ole\n if (!document.getElementById('chatflow-container')) {\n const container = document.createElement('div');\n container.id = 'chatflow-container';\n document.body.appendChild(container);\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p>This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like pi\u00f1a coladas. (And gettin’ caught in the rain.)<\/p>\n<\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.<\/p>\n<\/blockquote>\n\n\n\n<p>As a new WordPress user, you should go to <a href=\"http:\/\/www.auto-suomi.fi\/wp-admin\/\">your dashboard<\/a> to delete this page and create new pages for your content. Have fun!<\/p>\n\n\n\n<p>…or something like this:<\/p>\n\n\n\n<p><\/p>\n\n\n<nav class=\"is-responsive wp-block-navigation is-layout-flex wp-block-navigation-is-layout-flex\" aria-label=\"Navigaatio\" \n\t\t data-wp-interactive=\"core\/navigation\" data-wp-context='{\"overlayOpenedBy\":{\"click\":false,\"hover\":false,\"focus\":false},\"type\":\"overlay\",\"roleAttribute\":\"\",\"ariaLabel\":\"Valikko\"}'><button aria-haspopup=\"dialog\" aria-label=\"Avaa valikko\" class=\"wp-block-navigation__responsive-container-open\" \n\t\t\t\tdata-wp-on--click=\"actions.openMenuOnClick\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t><svg width=\"24\" height=\"24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M4 7.5h16v1.5H4z\"><\/path><path d=\"M4 15h16v1.5H4z\"><\/path><\/svg><\/button>\n\t\t\t\t<div class=\"wp-block-navigation__responsive-container\" id=\"modal-1\" \n\t\t\t\tdata-wp-class--has-modal-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-class--is-menu-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-watch=\"callbacks.initMenu\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t\tdata-wp-on--focusout=\"actions.handleMenuFocusout\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t>\n\t\t\t\t\t<div class=\"wp-block-navigation__responsive-close\" tabindex=\"-1\">\n\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-dialog\" \n\t\t\t\tdata-wp-bind--aria-modal=\"state.ariaModal\"\n\t\t\t\tdata-wp-bind--aria-label=\"state.ariaLabel\"\n\t\t\t\tdata-wp-bind--role=\"state.roleAttribute\"\n\t\t\t>\n\t\t\t\t\t\t\t<button aria-label=\"Sulje valikko\" class=\"wp-block-navigation__responsive-container-close\" \n\t\t\t\tdata-wp-on--click=\"actions.closeMenuOnClick\"\n\t\t\t><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z\"><\/path><\/svg><\/button>\n\t\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-container-content\" \n\t\t\t\tdata-wp-watch=\"callbacks.focusFirstElement\"\n\t\t\t id=\"modal-1-content\">\n\t\t\t\t\t\t\t\t<ul class=\"wp-block-navigation__container is-responsive wp-block-navigation\"><ul class=\"wp-block-page-list\"><li class=\"wp-block-pages-list__item wp-block-navigation-item open-on-hover-click\"><a class=\"wp-block-pages-list__item__link wp-block-navigation-item__content\" href=\"https:\/\/auto-suomi.fi\/?page_id=17\">Chatflow<\/a><\/li><li class=\"wp-block-pages-list__item wp-block-navigation-item open-on-hover-click\"><a class=\"wp-block-pages-list__item__link wp-block-navigation-item__content\" href=\"https:\/\/auto-suomi.fi\/?page_id=23\">Demo<\/a><\/li><li class=\"wp-block-pages-list__item wp-block-navigation-item open-on-hover-click\"><a class=\"wp-block-pages-list__item__link wp-block-navigation-item__content\" href=\"https:\/\/auto-suomi.fi\/?page_id=2\">Sample Page<\/a><\/li><li class=\"wp-block-pages-list__item wp-block-navigation-item open-on-hover-click\"><a class=\"wp-block-pages-list__item__link wp-block-navigation-item__content\" href=\"https:\/\/auto-suomi.fi\/?page_id=8\">Testi<\/a><\/li><\/ul><\/ul>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div><\/nav>","protected":false},"excerpt":{"rendered":"<p>A4A Chatflow Automatisointi – Demo \ud83e\udd16 A4A Chatflow Automatisointi Aloittelijayst\u00e4v\u00e4llinen ty\u00f6nkulun automatisointi upotettuna verkkosivustoosi Tervetuloa A4A Chatflow\u2019hin A4A Chatflow on kevyt ja helppo integroida chatbot-kirjasto, joka tuo ty\u00f6nkulun automatisoinnin mihin tahansa HTML5-verkkosivustoon. T\u00e4ydellinen aloittelijoille, jotka haluavat lis\u00e4t\u00e4 interaktiivisia chat-kokemuksia ilman monimutkaisia taustaj\u00e4rjestelmi\u00e4. Katso sivun oikeasta alakulmasta \u2013 chat-widget on jo aktiivinen! Klikkaa sit\u00e4 aloittaaksesi keskustelun […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/auto-suomi.fi\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/auto-suomi.fi\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/auto-suomi.fi\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/auto-suomi.fi\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/auto-suomi.fi\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":9,"href":"https:\/\/auto-suomi.fi\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":43,"href":"https:\/\/auto-suomi.fi\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/43"}],"wp:attachment":[{"href":"https:\/\/auto-suomi.fi\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}