### Example: List Selection in Chat

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/prompt.md

This example demonstrates how to present a list of choices to the user, prompting them to select a fruit.

```text
Please choose:
[{list:Select a fruit|Apple:apple|Banana:banana}]
```

--------------------------------

### Example: Email Input in Chat

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/prompt.md

This example shows how to prompt the user for their email address, marking it as a required field.

```text
Enter your email:
[{input|Your email|required|email}]
```

--------------------------------

### Example: Confirmation Buttons in Chat

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/prompt.md

This example shows how to present two buttons for user confirmation, allowing them to choose between 'Yes' and 'No'.

```text
Are you sure?
[{button|Yes|Yes, please!} {button|No|No, thank you!}]
```

--------------------------------

### Example: Phone Number Input in Chat

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/prompt.md

This example demonstrates prompting for a phone number with a custom prefix and marking it as required.

```text
Enter your phone number:
[{input|Your phone number|My number is: required|phone}]
```

--------------------------------

### startNewConversation Webhook

Source: https://context7.com/10k-digital/n8n-advanced-chatclient/llms.txt

This webhook is automatically sent when the user clicks 'Start chat'. It initializes or resumes a session on the n8n side.

```APIDOC
## POST /webhook/abc123/chat

### Description
Initializes or resumes a chat session on the n8n side.

### Method
POST

### Endpoint
/webhook/abc123/chat

### Request Body
- **action** (string) - Required - Must be `loadPreviousSession`.
- **sessionId** (string) - Required - The unique identifier for the chat session.
- **route** (string) - Required - The route for the conversation, e.g., `general`.
- **metadata** (object) - Optional - Contains information about the user and environment.
  - **userId** (string) - Optional - The ID of the user.
  - **userEmail** (string) - Optional - The email of the user.
  - **userLanguage** (string) - Optional - The language of the user, e.g., `en`.
  - **baseUrl** (string) - Optional - The base URL of the site.
  - **detectedLocation** (object) - Optional - Details about the user's detected location.
    - **city** (string) - Optional - The detected city.
    - **country** (string) - Optional - The detected country.
  - **detectedTimeZone** (string) - Optional - The user's detected time zone.
  - **timestamp** (string) - Optional - The timestamp of the event in ISO format.

### Request Example
```json
{
  "action": "loadPreviousSession",
  "sessionId": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "route": "general",
  "metadata": {
    "userId": "",
    "userEmail": "",
    "userLanguage": "en",
    "baseUrl": "https://mysite.com",
    "detectedLocation": { "city": "New York", "country": "US" },
    "detectedTimeZone": "America/New_York",
    "timestamp": "2025-06-01T12:00:00.000Z"
  }
}
```

### Response
#### Success Response
- **output** (string) - The bot's response message.
- **data** (array) - An array containing output objects.
  - **output** (string) - The bot's response message.
- **string** - A plain string response.

### Response Example
```json
{ "output": "Welcome back! How can I help you today?" }
```

```json
{ "data": [{ "output": "Welcome back!" }] }
```

```
Welcome back!
```
```

--------------------------------

### Configure Proactive Prompt Settings

Source: https://context7.com/10k-digital/n8n-advanced-chatclient/llms.txt

Configure a dismissible speech-bubble overlay to invite users to start a conversation after a specified delay. The prompt is hidden when the chat is open and rescheduled when the chat is closed.

```javascript
window.ChatWidgetConfig = {
  proactivePrompt: {
    enabled: true,
    delay: 15000,   // 15 seconds after page load (or after chat is closed)
    message: {
      en: "👋 Need help? Chat with us!",
      pt: "👋 Precisa de ajuda? Fale conosco!",
      es: "👋 ¿Necesitas ayuda? ¡Chatea con nosotros!",
      ar: "👋 هل تحتاج مساعدة؟ تحدث معنا!"
    }
  }
};

// Clicking the bubble opens the chat (calls toggleChat(true)).
// Clicking the × button dismisses it without opening the chat.
// The prompt is hidden automatically whenever the chat is opened.
// A new prompt is rescheduled each time the chat is closed.
```

--------------------------------

### Install N8N Chat Widget via Script Tag

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/README.md

Include this script in your HTML to embed the chat widget. Configure webhook, branding, and style options.

```html
<script>
    window.ChatWidgetConfig = {
        webhook: {
            url: 'YOUR_N8N_WEBHOOK_URL',
            route: 'general'
        },
        branding: {
            logo: 'YOUR_LOGO_URL',
            name: 'YOUR_BRAND_NAME',
            welcomeText: 'Welcome message',
            responseTimeText: 'Response time message',
            poweredBy: {
                text: '',
                link: ''
            }
        },
        style: {
            primaryColor: '#080A56',
            secondaryColor: '#0b0f7b',
            position: 'right',
            backgroundColor: '#ffffff',
            fontColor: '#333333'
        },
        debug: false
    };
</script>
<script src="https://drive.google.com/uc?id=1NtR0Dn8aMBUunifTjaPV6ayn35leK24X&export=download"></script>
```

--------------------------------

### Render Quick Actions in DOM

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/test-objects.html

Renders the parsed quick action elements (buttons, inputs, etc.) into the provided message element in the DOM. Includes basic styling and event handling setup for buttons.

```javascript
// --- RENDER QUICK ACTIONS (with Validation Logic) ---
function renderQuickActions(messageElement, quickActions) {
  if (!quickActions || !quickActions.hasQuickActions) return;

  // Handle buttons
  console.log("Rendering quick actions:", quickActions);
  const mainContainer = document.createElement('div');
  mainContainer.style.marginTop = '15px'; // Add space below message text
  let hasRenderedAction = false;

  // Render buttons
  if (quickActions.buttons && quickActions.buttons.length > 0) {
    const buttonContainer = document.createElement('div');
    buttonContainer.className = 'quick-action-container';
    quickActions.buttons.forEach(button => {
      const btn = document.createElement('button');
      btn.className = 'quick-action-button';
      if (button.type === 'external') btn.className += ' external';
      btn.textContent = button.text;
      btn.dataset.action = button.action;
      btn.dataset.type = button.type || 'normal';
      btn.textContent = button.text; // Set text content first
      // Add external link icon if needed
      if (button.type === 'external') {
        // btn.className += ' external'; // Class is already added based on initial check
        // Create SVG icon for external link
        const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        icon.setAttribute('viewBox', '0 0 24 24');
        icon.setAttribute('width', '14'); // Use specific dimensions for the small icon
        icon.setAttribute('height', '14');
        icon.style.marginLeft = '6px'; // Add some space between text and icon
        icon.style.verticalAlign = 'middle'; // Align icon nicely with text
        icon.setAttribute('fill', 'none');
        icon.setAttribute('str
```

--------------------------------

### Quick Action Button Format

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/README.md

Format quick action buttons. The text inside the curly braces is the button label, and the message after the pipe is what gets sent when clicked.

```markdown
[{button:Yes, please|I want to subscribe to the newsletter}]
```

--------------------------------

### Webhook Payload: startNewConversation

Source: https://context7.com/10k-digital/n8n-advanced-chatclient/llms.txt

Sent when a user starts a chat to initialize or resume a session. The response can be a JSON object with 'output', a JSON object with 'data' containing 'output', or a plain string.

```json
// POST https://your-n8n.com/webhook/abc123/chat
// Content-Type: application/json
{
  "action": "loadPreviousSession",
  "sessionId": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "route": "general",
  "metadata": {
    "userId": "",
    "userEmail": "",
    "userLanguage": "en",
    "baseUrl": "https://mysite.com",
    "detectedLocation": { "city": "New York", "country": "US" },
    "detectedTimeZone": "America/New_York",
    "timestamp": "2025-06-01T12:00:00.000Z"
  }
}

// Expected n8n response (any of these formats are accepted):
// 1. { "output": "Welcome back! How can I help you today?" }
// 2. { "data": [{ "output": "Welcome back!" }] }
// 3. "Welcome back!" (plain string)
```

--------------------------------

### Configure Skip Welcome Screen

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/README.md

Set to true to bypass the initial welcome screen and directly open the chat interface.

```javascript
skipWelcomeScreen: false           // Optional, default: false. Set to true to skip the initial screen and go directly to the chat interface.
```

--------------------------------

### Initialize Metadata Fields

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/demo.html

Sets placeholders and pre-fills input fields for metadata overrides, including detected language and base URL. Handles timezone detection.

```javascript
function initializeMetadataFields() {
    // --- Get detected values ---
    const url = window.location.href;
    const langMatch = url.match(/\/(\[a-z\]{2})(?:\|-\_\)(\[a-z\]{2}))?\/?(?:\?|#|$)/i);
    const detectedLang = langMatch ? langMatch\[0\].replace(/\s/g, '').toLowerCase() : (navigator.language || navigator.userLanguage || 'en');
    const baseUrl = window.location.origin;

    // --- Set Placeholders ---
    document.getElementById('metadataUserId').placeholder = `(Default: empty)`;
    document.getElementById('metadataUserEmail').placeholder = `(Default: empty)`;
    document.getElementById('metadataLanguage').placeholder = `(Widget default: en)`;
    document.getElementById('metadataBaseUrl').placeholder = `(Widget default: page URL)`;
    document.getElementById('metadataDetectedLocation').placeholder = `(Default: auto-detected if enabled)`;
    document.getElementById('metadataDetectedTimezone').placeholder = `(Default: auto-detected from browser)`;

    // --- Clear or Prefill Inputs ---
    document.getElementById('metadataUserId').value = '';
    document.getElementById('metadataUserEmail').value = '';
    document.getElementById('metadataLanguage').value = detectedLang; // Prefill detected
    document.getElementById('metadataBaseUrl').value = baseUrl; // Prefill detected
    document.getElementById('metadataDetectedLocation').value = ''; // Clear override field

    // Prefill timezone
    try {
        const detectedTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
        document.getElementById('metadataDetectedTimezone').value = detectedTz;
    } catch (e) {
        console.warn("Could not detect browser timezone.", e);
        document.getElementById('metadataDetectedTimezone').value = ''; // Clear if detection fails
        document.getElementById('metadataDetectedTimezone').placeholder = `(Could not detect)`;
    }
}
```

--------------------------------

### Quick Action: Select Lists

Source: https://context7.com/10k-digital/n8n-advanced-chatclient/llms.txt

Renders a dropdown list for users to select an option. Selecting an option sends the corresponding action as a message, or opens a URL for external options. The select list resets to its title placeholder after selection.

```text
// Bot message text sent from n8n:
"Which plan are you interested in? [{list:Choose a plan|Basic:I want the Basic plan for $9/mo|Pro:I want the Pro plan for $29/mo|Enterprise:I need an Enterprise quote}]"

// Also accepts Portuguese alias: [{lista:...}]
// On change, calls sendMessage("I want the Basic plan for $9/mo")
// Select resets to title placeholder after selection.
```

--------------------------------

### Render Quick Action Buttons

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/test-objects.html

Iterates through an array of quick action configurations to create and append button elements to a container. Each button is configured with text, action, and type attributes.

```javascript
quickActions.buttons.forEach(buttonConfig => {
  const btn = document.createElement('button');
  btn.className = 'quick-action-button';
  btn.textContent = buttonConfig.text;
  btn.dataset.action = buttonConfig.action;
  btn.dataset.type = buttonConfig.type || 'normal';
  // Icon rendering logic would be here if applicable
  // btn.appendChild(icon);
  buttonContainer.appendChild(btn);
});
```

--------------------------------

### Quick Action: Select Lists

Source: https://context7.com/10k-digital/n8n-advanced-chatclient/llms.txt

Renders a dropdown select list within a bot message. Selecting an option sends a corresponding action as a message.

```APIDOC
## Quick Action: Select Lists

### Description
Displays a dropdown select list in a bot message. Selecting an option sends the associated action as a message to the bot.

### Usage
Format: `[{list:Dropdown Title|Option 1 Text:Action 1|Option 2 Text:Action 2|...}]`

### Example
```
"Which plan are you interested in? [{list:Choose a plan|Basic:I want the Basic plan for $9/mo|Pro:I want the Pro plan for $29/mo|Enterprise:I need an Enterprise quote}]"
```

### Behavior
- Selecting an option (e.g., "Basic") calls `sendMessage("I want the Basic plan for $9/mo")`.
- The select list resets to the title placeholder after an option is selected.
- The syntax `[{lista:...}]` is an accepted Portuguese alias.
```

--------------------------------

### Quick Action Select List Format

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/README.md

Format quick action select lists. The first part is the list title, followed by options and their corresponding messages, separated by pipes.

```markdown
[{list:Choose a plan|Basic:I want the Basic plan|Pro:I want the Pro plan}]
```

--------------------------------

### Render Links for Quick Actions

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/test-objects.html

Creates and appends anchor (link) elements for quick actions. Each link is configured with text, an href attribute (set to '#'), and a data-action attribute.

```javascript
quickActions.links.forEach(link => {
  const a = document.createElement('a');
  a.className = 'quick-action-link';
  a.textContent = link.text;
  a.href = '#';
  a.dataset.action = link.action;
  a.dataset.type = 'link';
  linksContainer.appendChild(a);
});
```

--------------------------------

### List/Select Syntax for Chat Widget

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/prompt.md

Use this syntax to present a list of options for the user to select. The first argument is the title, followed by option-action pairs.

```text
[{list:Title|Option1:action1|Option2:action2}]
```

--------------------------------

### Quick Action Link Format

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/README.md

Format quick action links using markdown. The text will be displayed, and the action will trigger the specified message.

```markdown
[See pricing](action:Show me your pricing plans)
```

--------------------------------

### Configure N8N Chat Widget

Source: https://context7.com/10k-digital/n8n-advanced-chatclient/llms.txt

Set up the global `window.ChatWidgetConfig` object before loading `chat-widget.js` to customize webhook, branding, styling, proactive prompts, and UI texts. All top-level keys are optional and merge with default settings.

```html
<script>
  window.ChatWidgetConfig = {
    webhook: {
      url: 'https://your-n8n-instance.com/webhook/abc123/chat', // Required
      route: 'general'   // Optional, sent as-is to the workflow
    },
    branding: {
      logo: 'https://example.com/logo.png',
      name: 'Support Bot',
      welcomeText: { en: 'Hi 👋, how can we help?', pt: 'Oi 👋, como podemos ajudar?' },
      responseTimeText: { en: 'We typically respond right away', pt: 'Respondemos imediatamente' },
      poweredBy: { text: 'Powered by Acme', link: 'https://acme.com' }
    },
    style: {
      primaryColor: '#080A56',      // Gradient start color for buttons/header
      secondaryColor: '#0b0f7b',    // Gradient end color
      position: 'right',            // 'right' | 'left'
      backgroundColor: '#ffffff',
      fontColor: '#333333'
    },
    proactivePrompt: {
      enabled: true,
      delay: 10000,                 // ms before balloon appears
      message: {
        en: 'Chat with our AI now!',
        pt: 'Converse com nossa IA agora!',
        es: '¡Chatea con nuestra IA ahora!',
        ar: 'تحدث مع الذكاء الاصطناعي الخاص بنا الآن!'
      }
    },
    skipWelcomeScreen: false,        // true → open directly into chat interface
    greetingMessage: {
      en: 'Hi! How can I help you today?',
      pt: 'Olá! Como posso ajudar você hoje?',
      es: '¡Hola! ¿Cómo puedo ayudarte hoy?',
      ar: 'مرحباً! كيف يمكنني مساعدتك اليوم؟'
    },
    detectLocation: true,            // Fetches city/country via ipinfo.io
    metadata: {                      // Static overrides sent with every message
      userId: 'user_123',
      userEmail: 'user@example.com',
      language: 'en',
      baseUrl: 'https://mysite.com',
      detectedLocation: 'São Paulo, BR',  // Override auto-detection
      detectedTimeZone: 'America/Sao_Paulo'
    },
    languageTexts: {                 // Override any UI string per language
      en: {
        inputPlaceholder: 'Ask me anything…',
        startChat: 'Start chat',
        connecting: 'Connecting you…',
        fallback: 'Hi! How can I help?',
        processing: 'Processing…',
        error: 'Something went wrong.',
        defaultResponseTime: 'We typically respond right away',
        welcomeText: 'Hi 👋, how can we help?'
      }
    },
    debug: false                     // Enables console logs; also via window.enableN8nChatDebug()
  };
</script>
<script src="https://felipematos.github.io/n8n-advanced-chatclient/stable/chat-widget.js" defer></script>
```

--------------------------------

### Initialize Default Languages

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/demo.html

Populates multi-language containers with predefined default language fields. Ensures that default languages like 'en' and 'pt' are marked as read-only. Call this function to set up initial language inputs.

```javascript
function initializeDefaultLanguages() {
    multiLangContainers.forEach(containerInfo => {
        const container = document.getElementById(containerInfo.id);
        if(container) container.innerHTML = ''; // Clear previous entries first
        Object.entries(containerInfo.defaults).forEach(([langCode, textValue]) => {
            const isDefaultReadOnly = langCode === 'en' || langCode === 'pt';
            addLanguageInput(containerInfo.id, containerInfo.fieldName, langCode, textValue, isDefaultReadOnly);
        });
    });
}
```

--------------------------------

### Configure Greeting Message

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/README.md

Define the initial message displayed by the bot in multiple languages.

```javascript
greetingMessage: {                 // Optional, the first message shown by the bot.
    en: "Hi! How can I help you today?",
    pt: "Olá! Como posso ajudar você hoje?",
    es: "¡Hola! ¿Cómo puedo ayudarte hoy?",
    ar: "مرحباً! كيف يمكنني مساعدتك اليوم?"
}
```

--------------------------------

### Event Listener and Initial Render

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/test-objects.html

Attaches an input event listener to a textarea for rendering templates and performs an initial render. Includes a delayed render to ensure all components are initialized.

```javascript
templateTextarea.addEventListener('input', renderTemplate); // Initial render if there's a default template if (templateTextarea.value) { renderTemplate(); } // Allow a moment for everything to initialize setTimeout(() => { console.log("Initial render after delay..."); renderTemplate(); },100); // NOTE: Removed duplicate addQuickActionEventListeners function definition, // duplicate event listeners, and duplicate initial render calls that were here. });
```

--------------------------------

### Quick Action: Buttons

Source: https://context7.com/10k-digital/n8n-advanced-chatclient/llms.txt

Renders tappable buttons below a bot message. Clicking a button either sends a predefined message or opens an external URL.

```APIDOC
## Quick Action: Buttons

### Description
Displays one or more buttons below a bot message. Clicking a button can send a message to the bot or open an external URL.

### Usage
Format: `[{button:Button Text|Action or URL}]`

### Examples
**Internal Action:**
```
"How would you like to proceed? [{button:Yes, subscribe me|I want to subscribe to the newsletter}] [{button:No thanks|I do not want to subscribe}]"
```

**External URL:**
```
"Visit our docs: [{button:Open Documentation|https://docs.example.com}]"
```

### Behavior
- Clicking an internal button (e.g., "Yes, subscribe me") calls `sendMessage("I want to subscribe to the newsletter")`.
- Clicking an external button (e.g., "Open Documentation") opens the URL in a new tab: `window.open("https://docs.example.com", "_blank")`.
- Up to 4 buttons are displayed.
- The syntax `[{botao:Text|Action}]` is an accepted Portuguese alias.
```

--------------------------------

### Button Syntax for Chat Widget

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/prompt.md

Use this syntax to create clickable buttons within the chat widget. The second argument is the button text, and the third is the action triggered.

```text
[{button|Button Text|action}]
```

--------------------------------

### Configure Proactive Prompt

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/README.md

Enable and configure proactive prompts to engage users. Set the delay and customize the message for different languages.

```javascript
proactivePrompt: {
    enabled: false,                // Optional, default: false. Set to true to enable.
    delay: 10000,                  // Optional, default: 10000 (10 seconds). Delay in milliseconds before showing the prompt.
    message: {                     // Optional, message to display in the prompt.
        en: "Chat with our AI now!",
        pt: "Converse com nossa IA agora!",
        es: "¡Chatea con nuestra IA ahora!",
        ar: "تحدث مع الذكاء الاصطناعي الخاص بنا الآن!"
    }
}
```

--------------------------------

### Multiple Buttons Syntax for Chat Widget

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/prompt.md

Use this syntax to display multiple buttons side-by-side. Each button is defined with its text and associated action.

```text
[Button1](action:ACTION1) [Button2](action:ACTION2)
```

--------------------------------

### Configure Branding

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/README.md

Customize the widget's branding with a logo, name, welcome text, and response time message. Optionally, configure a 'powered by' link.

```javascript
branding: {
    logo: 'URL_TO_YOUR_LOGO',      // Optional
    name: 'YOUR_BRAND_NAME',       // Optional
    welcomeText: 'Welcome message', // Optional
    responseTimeText: 'Response time message', // Optional
    poweredBy: {                   // Optional
        text: 'Powered by',
        link: 'https://example.com'
    }
}
```

--------------------------------

### Quick Action: Inline Action Links

Source: https://context7.com/10k-digital/n8n-advanced-chatclient/llms.txt

Allows rendering hyperlink-style text within bot messages. Clicking these links sends a predefined message to the bot.

```APIDOC
## Quick Action: Inline Action Links

### Description
Sends a predefined message to the bot when a user clicks on a specially formatted link within a bot message.

### Usage
Format: `[Link Text](action:Message to send)`

### Example
```
"Need help choosing? [See pricing](action:Show me your pricing plans) or [talk to sales](action:I want to talk to the sales team)."
```

### Behavior
- Clicking "See pricing" will call `sendMessage("Show me your pricing plans")`.
- Clicking "talk to sales" will call `sendMessage("I want to talk to the sales team")`.
```

--------------------------------

### Configure Style

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/README.md

Customize the widget's appearance, including primary and secondary colors, position, background color, and font color.

```javascript
style: {
    primaryColor: '#080A56',       // Optional, default: '#080A56'
    secondaryColor: '#0b0f7b',     // Optional, default: '#0b0f7b'
    position: 'right',             // Optional, 'left' or 'right'
    backgroundColor: '#ffffff',    // Optional, default: '#ffffff'
    fontColor: '#333333'          // Optional, default: '#333333'
}
```

--------------------------------

### Quick Action: Inline Action Links

Source: https://context7.com/10k-digital/n8n-advanced-chatclient/llms.txt

Allows creating clickable links within bot messages that send predefined text as a message to the bot. These are rendered as styled anchor tags.

```text
// Bot message text sent from n8n:
"Need help choosing? [See pricing](action:Show me your pricing plans) or [talk to sales](action:I want to talk to the sales team)."

// Rendered as styled gradient-colored anchor tags.
// Clicking "See pricing" calls sendMessage("Show me your pricing plans")
// Clicking "talk to sales" calls sendMessage("I want to talk to the sales team")
```

--------------------------------

### Update Color Previews

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/demo.html

Listens for input events on color pickers and updates a corresponding color preview element. Includes initial preview update on load.

```javascript
document.querySelectorAll('input[type="color"]').forEach(input => {
    input.addEventListener('input', function() {
        // Ensure the preview element exists next to the input
        const preview = this.nextElementSibling;
        if (preview && preview.classList.contains('color-preview')) {
            preview.style.backgroundColor = this.value;
        } else {
            console.warn("Color preview element not found next to input:", this.id);
        }
    });
    // Initial preview update on load
    input.dispatchEvent(new Event('input', { bubbles: true }));
});
```

--------------------------------

### Render SVG Icon for Quick Actions

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/test-objects.html

Creates and appends an SVG icon with specific paths and attributes to a button element. This is used for visual representation within quick action buttons.

```javascript
const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
icon.setAttribute('viewBox', '0 0 24 24');
icon.setAttribute('width', '20');
icon.setAttribute('height', '20');
icon.setAttribute('stroke', 'currentColor');
icon.setAttribute('fill', 'none');
icon.setAttribute('stroke-width', '2');
icon.setAttribute('stroke-linecap', 'round');
icon.setAttribute('stroke-linejoin', 'round');
const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path1.setAttribute('d', 'M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6');
icon.appendChild(path1);
const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path2.setAttribute('d', 'M15 3h6v6');
icon.appendChild(path2);
const path3 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path3.setAttribute('d', 'M10 14L21 3');
icon.appendChild(path3);
btn.appendChild(icon);
```

--------------------------------

### Quick Action: Buttons

Source: https://context7.com/10k-digital/n8n-advanced-chatclient/llms.txt

Renders tappable buttons below bot messages for user interaction. Up to 4 buttons can be displayed. Internal actions are sent as messages, while external URLs open in a new tab.

```text
// Bot message text sent from n8n (internal action):
"How would you like to proceed? [{button:Yes, subscribe me|I want to subscribe to the newsletter}] [{button:No thanks|I do not want to subscribe}]"

// Bot message text with an external link button:
"Visit our docs: [{button:Open Documentation|https://docs.example.com}]"

// Both syntaxes work: [{button:Text|Action}] and [{botao:Text|Action}] (Portuguese alias)
// Clicking an internal button: calls sendMessage("I want to subscribe to the newsletter")
// Clicking an external button: window.open("https://docs.example.com", "_blank")
```

--------------------------------

### Create Language Select Element

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/demo.html

Dynamically creates a `<select>` element for language selection, populating it with predefined options and a 'Custom...' option. Attaches an event listener for language changes.

```javascript
function createLanguageSelect(selectedLang = '') {
  const select = document.createElement('select');
  select.className = 'language-select';
  languageOptions.forEach(lang => {
    const option = document.createElement('option');
    option.value = lang.code;
    option.textContent = `${lang.code} - ${lang.name}`;
    if (lang.code === selectedLang) {
      option.selected = true;
    }
    select.appendChild(option);
  });
  const customOption = document.createElement('option');
  customOption.value = 'custom';
  customOption.textContent = 'Custom...';
  select.appendChild(customOption);
  select.addEventListener('change', handleLanguageChange);
  return select;
}
```

--------------------------------

### Configure Webhook

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/README.md

Set the n8n webhook URL and an optional route for receiving chat messages.

```javascript
webhook: {
    url: 'YOUR_N8N_WEBHOOK_URL',  // Required
    route: 'general'               // Optional, defaults to 'general'
}
```

--------------------------------

### DOM Content Loaded Initialization

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/test-objects.html

Initializes the chat client interface when the DOM is fully loaded. Sets up event listeners for template selection and textarea changes.

```javascript
document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM loaded, setting up test page...');
  const templateSelect = document.getElementById('template-select');
  const templateTextarea = document.getElementById('template-textarea');
  const renderedOutput = document.getElementById('rendered-output');
  const actionFeedback = document.getElementById('action-feedback');
  // Define templates
  const templates = {
    button1: 'Here is a button: \[\{button|Click Me|button\_payload}\]',
    input_email_req: 'Enter email: \[\{input|your@email.com|required|email}\]',
    input_email_opt: 'Enter email (optional): \[\{input|your@email.com|email}\]',
    input_phone_req: 'Enter phone: \[\{input|e.g., +1 555 1234|required|phone}\]',
    input_url_opt: 'Enter website (optional): \[\{input|https://example.com|url}\]',
    input_secret_req: 'Enter password: \[\{secret|Password|required}\]',
    list1: 'Please choose: \[\{list|Select a fruit|Apple:apple\_value|Banana:banana\_value|Orange:orange\_value}\]',
    multipleButtons: 'Actions: \[Google\](action:https://google.com) \[\{button|Internal Action|payload\_1}\] \[Another\](action:internal\_action)',
    image: 'Look: https://www.easygifanimator.net/images/samples/video-to-gif-sample.gif',
    markdown: '# Title\n**Bold** *Italic* \[Link\](https://example.com)\n1. One\n2. Two',
    all_actions: 'Text.\nSelect: \[\{list|Options|Opt1:opt1|Opt2:opt2}\]\nClick: \[\{button|Btn1|btn1}\] \[External\](action:https://example.com)\nEnter email: \[\{input|Email|required|email}\]',
    only_input_req: '\[\{input|Required Value|required}\]',
    only_input_opt: '\[\{input|Optional Value}\]'
  };
  // Function to render the template
  function renderTemplate() {
    const messageText = templateTextarea.value;
    renderedOutput.innerHTML = ''; // Clear previous output
    // Create a chat message element
    const chatMessageDiv = document.createElement('div');
    chatMessageDiv.className = 'chat-message';
    // Process the message for quick actions
    const quickActions = processQuickActions(messageText);
    // Set the text content
    const textElement = document.createElement('div');
    textElement.textContent = quickActions.text;
    chatMessageDiv.appendChild(textElement);
    // Store quick action data for validation
    chatMessageDiv.quickActionData = quickActions;
    // Add quick actions if any
    if (quickActions.hasQuickActions) {
      renderQuickActions(chatMessageDiv, quickActions);
    }
    console.log("Processing message:", messageText);
    // Add to the output
    renderedOutput.appendChild(chatMessageDiv);
    // Add event listeners to the rendered elements
    addQuickActionEventListeners(chatMessageDiv);
    console.log("Render complete!");
  }
  // Event listener for template selection
  templateSelect.addEventListener('change', () => {
    const selectedTemplate = templateSelect.value;
    templateTextarea.value = templates[selectedTemplate] || '';
    renderTemplate(); // Render immediately on change
  });
  // Event listener for textarea changes
  te
```

--------------------------------

### Embed Widget via Script Tag

Source: https://context7.com/10k-digital/n8n-advanced-chatclient/llms.txt

Integrate the chat widget by adding configuration and script blocks to your HTML. Ensure the `window.ChatWidgetConfig` is defined before the widget script is loaded.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Page content -->

  <!-- 1. Widget configuration -->
  <script>
    window.ChatWidgetConfig = {
      webhook: {
        url: 'https://n8n.mycompany.com/webhook/f406671e-c954-4691-b39a-66c90aa2f103/chat',
        route: 'support'
      },
      branding: {
        logo: 'https://mycompany.com/favicon.png',
        name: 'Acme Support',
        welcomeText: { en: 'Hi 👋 How can we help?' },
        responseTimeText: { en: 'Usually replies instantly' }
      },
      style: {
        primaryColor: '#1a73e8',
        secondaryColor: '#0d47a1',
        position: 'right',
        backgroundColor: '#ffffff',
        fontColor: '#202124'
      },
      skipWelcomeScreen: false,
      greetingMessage: { en: 'Hello! What can I help you with today?' },
      detectLocation: true,
      debug: false
    };
  </script>

  <!-- 2. Widget script (stable CDN) -->
  <script src="https://felipematos.github.io/n8n-advanced-chatclient/stable/chat-widget.js" defer></script>
</body>
</html>
```

--------------------------------

### Input Field Syntax for Chat Widget

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/prompt.md

Use this syntax to prompt users for input. It supports placeholders, optional prefixes, and validation for email or phone numbers.

```text
[{input|Placeholder|Prefix|required|email/phone}]
```

--------------------------------

### Quick Action: Input / Secret Fields

Source: https://context7.com/10k-digital/n8n-advanced-chatclient/llms.txt

Renders an inline text or password input field within a chat message, supporting validation and masking.

```APIDOC
## Quick Action: Input / Secret Fields

### Description
Allows users to input text or secrets directly within a chat message. Supports validation and masking for sensitive information.

### Usage
Format: `[{input|Placeholder Text|Label Text|required|validationType}]` or `[{secret|Placeholder Text|Label Text|required}]`

### Examples
**Text Input (Email Validation):**
```
"Please provide your email address: [{input|Enter your email|Email: |required|email}]"
```

**Password / Secret Input:**
```
"Enter your access code: [{secret|Access code|Code: |required}]"
```

**Phone Input:**
```
"What's your phone number? [{input|Phone number||required|phone}]"
```

### Parameters
- **Placeholder Text**: Text displayed in the input field before user input.
- **Label Text**: Text displayed before the input field (e.g., "Email: ").
- **required**: (Optional) Marks the field as mandatory.
- **validationType**: (Optional) Specifies validation rules. Supported types: `email`, `url`, `phone`, `none` (default).

### Behavior
- On submit, the `sendMessage` function is called with the input value. For secret fields, a masked version is sent in `maskedMessage`.
- **Email Example:** `sendMessage("Email: alice@example.com", { maskedMessage: "Email: alice@example.com" })`
- **Secret Example:** `sendMessage("Code: abc123", { maskedMessage: "Code: ******" })`
- **Phone Input:** Raw digits are sent, but a formatted number is shown in the chat bubble.
- The main chat input is disabled until the input field is submitted.
- Live validation provides a green checkmark and enables/disables the send button.
```

--------------------------------

### Multi-language Container Configuration

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/demo.html

Configuration for different text elements within the chat widget that support multiple languages. Each entry includes an ID, field name, and default text for supported languages.

```javascript
const multiLangContainers = [
  { id: 'welcomeTextContainer', fieldName: 'welcomeText', defaults: { en: 'Hi 👋, how can we help?', pt: 'Oi 👋, como podemos ajudar?' } },
  { id: 'responseTimeTextContainer', fieldName: 'responseTimeText', defaults: { en: 'We typically respond right away', pt: 'Normalmente respondemos imediatamente' } },
  { id: 'promptMessageContainer', fieldName: 'promptMessage', defaults: { en: 'Chat with our AI now and resolve all your doubts!', pt: 'Converse com nossa IA agora e resolva todas as suas dúvidas!' } },
  { id: 'greetingMessageContainer', fieldName: 'greetingMessage', defaults: { en: 'Hi! How can I help you today?', pt: 'Olá! Como posso ajudar você hoje?' } }
];
```

--------------------------------

### Listen for User Location Detection Event

Source: https://context7.com/10k-digital/n8n-advanced-chatclient/llms.txt

Attach an event listener to `document.body` for the `n8nLocationDetected` event to receive the user's detected location. The event detail will be `null` on failure or when disabled.

```javascript
document.body.addEventListener('n8nLocationDetected', (event) => {
  const location = event.detail;
  // event.detail = { city: "São Paulo", country: "BR" }  on success
  // event.detail = null  on failure or when disabled

  if (location) {
    console.log(`User is in ${location.city}, ${location.country}`);
    // Automatically pre-selects matching country in phone input fields
  }
});

// Disable location detection entirely:
window.ChatWidgetConfig = { detectLocation: false };
```

--------------------------------

### Render Select Options for Quick Actions

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/test-objects.html

Generates and appends select dropdown elements based on provided configuration. It includes a default disabled option and populates the select with user-defined options, each with text, value, and optional type.

```javascript
quickActions.selectOptions.forEach(selectOption => {
  const container = document.createElement('div');
  container.className = 'quick-action-container';
  if (hasRenderedAction) container.style.marginTop = '10px';
  const select = document.createElement('select');
  select.className = 'quick-action-select';
  const defaultOption = document.createElement('option');
  defaultOption.textContent = selectOption.title || 'Select an option';
  defaultOption.value = '';
  defaultOption.disabled = true;
  defaultOption.selected = true;
  select.appendChild(defaultOption);
  selectOption.options.forEach(option => {
    const opt = document.createElement('option');
    opt.textContent = option.text;
    opt.value = option.action;
    opt.dataset.type = option.type || 'normal';
    select.appendChild(opt);
  });
  container.appendChild(select);
  mainContainer.appendChild(container);
  hasRenderedAction = true;
});
```

--------------------------------

### Form Submission Handler with Metadata Overrides

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/demo.html

Prevents the default form submission, logs detailed information, and initiates the chat widget loading process. It collects form data, including detect location settings and various metadata overrides such as user ID, email, language, base URL, and detected location. Use this to customize widget behavior and initial state.

```javascript
document.getElementById('chatConfigForm').addEventListener('submit', function(e) {
    e.preventDefault();
    console.log("Form submission prevented. Starting widget load process...");
    console.log("Attempting to remove existing widget...");
    removeChatWidget(); // Obter valores dos campos padrão e metadados
    const formData = new FormData(this);
    const detectLocation = formData.get('detectLocation') === 'true';
    const metadataOverrides = {};
    const userIdOverride = formData.get('metadataUserId').trim();
    const userEmailOverride = formData.get('metadataUserEmail').trim();
    const languageOverride = formData.get('metadataLanguage').trim();
    const baseUrlOverride = formData.get('metadataBaseUrl').trim();
    const locationOverride = formData.get('metadataDetectedLocation').trim();
    const timezoneOverride = formData.get('metadataDetectedTi
```

--------------------------------

### Generate Chat Widget Configuration

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/demo.html

This JavaScript code constructs the chat widget configuration object from form data, including metadata overrides and styling options. It then appends the chat widget script to the document body.

```javascript
const userIdOverride = document.getElementById('userIdOverride').value.trim();
const userEmailOverride = document.getElementById('userEmailOverride').value.trim();
const languageOverride = document.getElementById('languageOverride').value.trim();
const baseUrlOverride = document.getElementById('baseUrlOverride').value.trim();
const locationOverride = document.getElementById('locationOverride').value.trim();
const timezoneOverride = document.getElementById('timezoneOverride').value.trim();

const metadataOverrides = {};

if (userIdOverride) metadataOverrides.userId = userIdOverride;
if (userEmailOverride) metadataOverrides.userEmail = userEmailOverride;
if (languageOverride) metadataOverrides.language = languageOverride;
if (baseUrlOverride) metadataOverrides.baseUrl = baseUrlOverride;
if (locationOverride) metadataOverrides.detectedLocation = locationOverride;
if (timezoneOverride) metadataOverrides.detectedTimeZone = timezoneOverride;

const config = {
  webhook: {
    url: formData.get('webhookUrl'),
    route: formData.get('webhookRoute')
  },
  branding: {
    logo: formData.get('logoUrl'),
    name: formData.get('brandName'),
    welcomeText: getMultiLanguageData('welcomeTextContainer'),
    responseTimeText: getMultiLanguageData('responseTimeTextContainer')
  },
  style: {
    primaryColor: formData.get('primaryColor'),
    secondaryColor: formData.get('secondaryColor'),
    position: formData.get('position'),
    backgroundColor: formData.get('backgroundColor'),
    fontColor: formData.get('fontColor')
  },
  proactivePrompt: {
    enabled: formData.get('promptEnabled') === 'true',
    delay: parseInt(formData.get('promptDelay'), 10) || 5000,
    message: getMultiLanguageData('promptMessageContainer')
  },
  skipWelcomeScreen: formData.get('skipWelcome') === 'true',
  greetingMessage: getMultiLanguageData('greetingMessageContainer'),
  debug: formData.get('debugMode') === 'true',
  // Add metadata only if overrides exist
  ...(Object.keys(metadataOverrides).length > 0 && { metadata: metadataOverrides }),
  detectLocation: detectLocation
};

console.log("Generated config:", config);

// Definir configuração global
window.ChatWidgetConfig = config;
console.log("window.ChatWidgetConfig set.");

// Carregar o script do widget
const script = document.createElement('script');
script.id = 'n8n-chat-widget-script';
script.src = 'chat-widget.js'; // Change to chat-widget-latest.js in production
script.defer = true; // Adicionado defer
script.onerror = function() { // Adicionado onerror
  console.error('Failed to load '+ script.src +'!');
  alert('Error loading the chat widget script. Check the console and script path.');
};
document.body.appendChild(script);
console.log("Script tag appended to body.");
```

--------------------------------

### Enable n8n Chat Widget Debug Mode

Source: https://context7.com/10k-digital/n8n-advanced-chatclient/llms.txt

Enable verbose console logging for widget internals by calling `window.enableN8nChatDebug()` or setting `debug: true` in `ChatWidgetConfig`. Debug mode provides detailed logs without requiring a page reload.

```javascript
// Enable at runtime from the browser console:
window.enableN8nChatDebug();
// → '[n8n Chat Widget] Debug mode enabled. Refresh the page to see detailed logs.'

// Or set at config time:
window.ChatWidgetConfig = { debug: true };

// Sample debug output (after enabling + refresh):
// [n8n Chat Widget] Configuração mesclada final: { webhook: {…}, style: {…}, … }
// [n8n Chat Widget] Idioma detectado (completo): en, Idioma base: en
// [n8n Chat Widget] Scheduling proactive prompt with delay: 10000ms
// [n8n Chat Widget] Iniciando nova conversa: { action: "loadPreviousSession", … }
// [n8n Chat Widget] Resposta do webhook - Status: 200
```

--------------------------------

### Render Input Field with Send Button

Source: https://github.com/10k-digital/n8n-advanced-chatclient/blob/main/test-objects.html

Renders an input field (text or password) with a placeholder, an optional prefix, a send button, and a validation checkmark. This is used for user input within the chat interface.

```javascript
if (quickActions.input) {
  const inputContainer = document.createElement('div');
  inputContainer.className = 'quick-action-container';
  if (hasRenderedAction) inputContainer.style.marginTop = '10px';
  const input = document.createElement('input');
  input.type = quickActions.input.type === 'secret' ? 'password' : 'text';
  input.className = 'quick-action-input';
  input.placeholder = quickActions.input.placeholder || '';
  if (quickActions.input.prefix) {
    const prefixSpan = document.createElement('span');
    prefixSpan.className = 'input-prefix';
    prefixSpan.textContent = quickActions.input.prefix;
    inputContainer.appendChild(prefixSpan);
  }
  inputContainer.appendChild(input);
  const sendBtn = document.createElement('button');
  sendBtn.className = 'quick-action-input-send';
  sendBtn.innerHTML = '<svg viewBox="0 0 24 24"><polyline points="22 2 11 13"></polyline><polygon points="22 2 15 22 13 20 2 11 22 2"></polygon></svg>';
  inputContainer.appendChild(sendBtn);
  const validCheck = document.createElement('span');
  validCheck.className = 'valid-check';
  validCheck.innerHTML = '✓';
  inputContainer.appendChild(validCheck);
  mainContainer.appendChild(inputContainer);
}
```