Code Editor

The Code Editor provides advanced editing capabilities for users who need complete control over the waiting room design. This document explains how code modifications in the Code Editor affect the preview and how changes are reflected in real-time.

Quick Reference

Code Element	Easy Editing Setting	Customizable	Notes
.nf-vwr-background	Background Image	✅ Yes	Background color/image, padding
.nf-vwr-image3	Image 3 (Main UI background)	✅ Yes	Background color/image, padding, border-radius
.nf-vwr-image1	Image 1	✅ Yes	Background image, size, position
.nf-vwr-image2	Image 2	✅ Yes	Background image, size, position
.nf-vwr-title	Title	✅ Yes	Text, color, font-size, visibility
#nf-vwr-live-message	Live Message Preview	✅ Yes	Font-size, color, visibility
#nf-vwr-metrics-ahead-count-value	My waiting number (value)	⚠️ Limited	Color only (value is dynamic)
.nf-vwr-metrics-progress	Progress bar	⚠️ Limited	Color only (value is dynamic)
#nf-vwr-metrics-wait-time-value	Estimated Wait Time (value)	⚠️ Limited	Color only (value is dynamic)
#nf-vwr-metrics-behind-count-value	Queue behind (value)	⚠️ Limited	Color only (value is dynamic)
.nf-vwr-description	Description	✅ Yes	Text, color, font-size, visibility
#nf-vwr-cancel	Cancel Waiting Button	✅ Yes	Text, colors, opacity, URL attribute
Element IDs (e.g., nf-vwr-*)	-	❌ DO NOT MODIFY	Required for system functionality
Class names (e.g., nf-vwr-*)	-	⚠️ CAUTION	Some classes are used by the system

Overview

The Code Editor allows you to modify design properties directly in code format (HTML/CSS), providing maximum flexibility for customizations. All code changes are immediately reflected in the Preview Area, allowing you to see the results of your modifications in real-time.

Accessing Code Editor

Switching to Editor Mode

To access the Code Editor:

1. In Easy Editing, switch from Easy editing to Editor mode
2. The Code Editor becomes available for code editing
3. The code generated from Easy Editing settings is automatically loaded

Editor Mode Limitation

Once you enter Editor Mode (Code Editor), Easy setup becomes disabled. You can return to Easy Editing mode from Editor mode by confirming the switch, but all custom code entered in Editor mode will be automatically reset and lost when you switch back to Easy Editing mode.

Code Structure Overview

The code editor loads HTML/CSS code that corresponds to the settings configured in Easy Editing. Understanding the code structure helps you make targeted modifications.

HTML Structure Mapping

The HTML structure maps to Easy Editing settings as follows:

Background Layer

<div class="nf-vwr-background">

• Easy Editing Setting: Background Image
• Customizable: Background color (background-color), background image (background-image), padding
• Location: Entire screen background (outside main UI element)

Main UI Container

<div class="nf-vwr-image3">

• Easy Editing Setting: Image 3 (Main UI element background)
• Customizable: Background color/image, padding, border-radius, width, max-width
• Location: Main waiting room UI container

Images

<div class="nf-vwr-image1"></div>
<div class="nf-vwr-image2"></div>

• Easy Editing Setting: Image 1, Image 2
• Customizable: Background image URL, size, position, visibility (via display: none)
• Location: Inside main UI container

Title

<div class="nf-vwr-title">Please enter the title</div>

• Easy Editing Setting: Title
• Customizable: Text content, color, font-size, font-weight, visibility
• Location: Inside main UI container

Live Message

<div id="nf-vwr-live-message" class="nf-vwr-live-message"></div>

• Easy Editing Setting: Live Message Preview
• Customizable: Font-size, color, visibility (via display: none or display: flex)
• ⚠️ Important: Content is dynamically populated - do not modify the ID
• Location: Inside main UI container

Metrics (Waiting Number, Progress Bar)

<div id="nf-vwr-metrics-ahead-count" class="nf-vwr-metrics-ahead-count">
  <p class="nf-vwr-metrics-key">My waiting number</p>
  <p id="nf-vwr-metrics-ahead-count-value" class="nf-vwr-metrics-ahead-count-value">0</p>
</div>
<progress id="nf-vwr-metrics-progress" class="nf-vwr-metrics-progress" max="100" value="0"></progress>

• Easy Editing Setting: My waiting number, Progress bar
• Customizable:
  • Label text (.nf-vwr-metrics-key)
  • Value color (#nf-vwr-metrics-ahead-count-value - color only)
  • Progress bar color (.nf-vwr-metrics-progress::-webkit-progress-value)
• ⚠️ Important:
  • Do not modify element IDs (id="nf-vwr-metrics-*")
  • Do not modify value attribute on progress bar (dynamically updated)
  • Value text (e.g., "0") is dynamically updated

Estimated Wait Time

<div id="nf-vwr-metrics-wait-time" class="nf-vwr-metrics-wait-time">
  <span class="nf-vwr-metrics-key">Estimated Wait Time</span>
  <span id="nf-vwr-metrics-wait-time-value" class="nf-vwr-metrics-value">00:00:00</span>
</div>

• Easy Editing Setting: Estimated Wait Time
• Customizable:
  • Label text (.nf-vwr-metrics-key)
  • Value color (#nf-vwr-metrics-wait-time-value - color only)
  • Visibility (via display: none on parent)
• ⚠️ Important:
  • Do not modify element ID
  • Value text (e.g., "00:00:00") is dynamically updated

Queue Behind

<div id="nf-vwr-metrics-behind-count" class="nf-vwr-metrics-behind-count">
  <span class="nf-vwr-metrics-key">Queue behind</span>
  <span id="nf-vwr-metrics-behind-count-value" class="nf-vwr-metrics-value">0</span>
</div>

• Easy Editing Setting: Queue Behind
• Customizable:
  • Label text (.nf-vwr-metrics-key)
  • Value color (#nf-vwr-metrics-behind-count-value - color only)
  • Visibility (via display: none on parent)
• ⚠️ Important:
  • Do not modify element ID
  • Value text (e.g., "0") is dynamically updated

Description

<div class="nf-vwr-description">Please enter the content</div>

• Easy Editing Setting: Description
• Customizable: Text content, color, font-size, visibility
• Location: Inside main UI container

Cancel Button

<button id="nf-vwr-cancel" class="nf-vwr-cancel" data-nf-cancel-url="">Close</button>

• Easy Editing Setting: Cancel Waiting Button / Close Button
• Customizable:
  • Button text ("Close")
  • Colors (background-color, color)
  • Opacity
  • URL attribute (data-nf-cancel-url="")
• ⚠️ Important:
  • Do not modify element ID (id="nf-vwr-cancel")
  • Do not remove data-nf-cancel-url attribute (required for redirect functionality)

Footer Information

<div class="nf-vwr-info">Refreshing the page, going back, or closing the popup and reconnecting may reset your waiting time.</div>
<div class="nf-vwr-copyright">Powered by <strong>NetFUNNEL</strong> | © STCLab Inc.</div>

• Easy Editing Setting: Footer text (via Color Customization - First Color Picker)
• Customizable: Text content, color, font-size, visibility
• Location: Inside main UI container

Safe Customization Areas

✅ Safe to Modify

CSS Properties:

• Colors (color, background-color)
• Font properties (font-size, font-weight, font-family)
• Spacing (padding, margin, gap)
• Layout (display, flex-direction, align-items, justify-content)
• Sizing (width, max-width, min-width, height)
• Visual effects (border-radius, opacity, box-shadow)
• Background images (background-image, background-size, background-position)

HTML Content:

• Text content in elements without IDs (e.g., .nf-vwr-title, .nf-vwr-description)
• Label text (e.g., "My waiting number", "Estimated Wait Time")
• Button text (e.g., "Close")

HTML Attributes:

• data-nf-cancel-url attribute value (for redirect URL)
• lang attribute in <html> tag (for language)
• <title> tag content
• <link rel="icon"> href attribute (for favicon)

⚠️ Modify with Caution

Element IDs:

• All elements with id="nf-vwr-*" are used by the system
• Modifying IDs will break functionality
• Rule: Never change or remove element IDs

Dynamic Content:

• Elements with IDs that display dynamic values:
  • #nf-vwr-metrics-ahead-count-value (waiting number)
  • #nf-vwr-metrics-wait-time-value (estimated time)
  • #nf-vwr-metrics-behind-count-value (queue behind)
  • #nf-vwr-live-message (live message content)
• Rule: Only modify CSS styling (color, font-size, etc.) - do not modify the element structure or ID

Progress Bar:

• value and max attributes are dynamically updated
• Rule: Only modify CSS styling - do not modify HTML attributes

Class Names:

• Some classes may be referenced by the system
• Rule: If unsure, test changes in preview before saving

❌ Do Not Modify

Critical Element IDs:

• id="nf-vwr-live-message"
• id="nf-vwr-metrics-ahead-count"
• id="nf-vwr-metrics-ahead-count-value"
• id="nf-vwr-metrics-progress"
• id="nf-vwr-metrics-wait-time"
• id="nf-vwr-metrics-wait-time-value"
• id="nf-vwr-metrics-behind-count"
• id="nf-vwr-metrics-behind-count-value"
• id="nf-vwr-cancel"
• id="nf-vwr-entering"
• id="nf-vwr-entering-message"
• id="nf-vwr-marquee"
• id="nf-vwr-metrics-essential"
• id="nf-vwr-metrics-optional"

Critical Attributes:

• data-nf-cancel-url attribute name (required for button functionality)
• max and value attributes on <progress> element
• Element structure of dynamic content containers

Common Customization Examples

Changing Title Text and Style

.nf-vwr-title {
  color: #ff0000;           /* Change title color */
  font-size: 28px;          /* Increase font size */
  font-weight: 700;         /* Make bolder */
}

<div class="nf-vwr-title">Welcome to Our Service</div>

Hiding Elements

Method 1: CSS Display

.nf-vwr-description {
  display: none;            /* Hide description */
}

Method 2: HTML Comment

<!-- <div class="nf-vwr-description">Please enter the content</div> -->

Changing Colors

Background Color:

.nf-vwr-background {
  background-color: #1a1a1a;  /* Dark background */
}

Main UI Background:

.nf-vwr-image3 {
  background-color: #ffffff;  /* White background */
}

Text Colors:

.nf-vwr-title {
  color: #3354ff;            /* Blue title */
}

.nf-vwr-description {
  color: #666666;            /* Gray description */
}

Dynamic Value Colors:

#nf-vwr-metrics-ahead-count-value {
  color: #ff0000;            /* Red waiting number */
}

#nf-vwr-metrics-wait-time-value {
  color: #00ff00;            /* Green estimated time */
}

Modifying Button

Button Text:

<button id="nf-vwr-cancel" class="nf-vwr-cancel" data-nf-cancel-url="https://example.com">Leave Queue</button>

Button Styling:

.nf-vwr-cancel {
  background-color: #ff0000;  /* Red background */
  color: #ffffff;              /* White text */
  opacity: 0.9;                /* Slightly transparent */
  border-radius: 12px;         /* More rounded */
}

Button URL:

<button id="nf-vwr-cancel" class="nf-vwr-cancel" data-nf-cancel-url="https://yoursite.com/home">Close</button>

Adding Background Images

Background Image:

.nf-vwr-background {
  background-image: url('https://example.com/background.jpg');
  background-size: cover;
  background-position: center;
}

Image 1:

.nf-vwr-image1 {
  background-image: url('https://example.com/image1.png');
  background-size: contain;
}

Advanced Programming Cases

Case 1: Dynamic Language Switching

Scenario: Display waiting room in different languages based on user locale.

Implementation:

1. Detect user locale (browser language, URL parameter, etc.)
2. Modify text content dynamically using JavaScript
3. Update CSS for language-specific fonts if needed

Example:

// Detect locale and update text
const locale = navigator.language || 'en';
const translations = {
  'en': { title: 'Please Wait', description: 'You are in queue' },
  'ko': { title: '대기 중', description: '대기열에 있습니다' },
  'ja': { title: 'お待ちください', description: 'キューに入っています' }
};

const title = document.querySelector('.nf-vwr-title');
const description = document.querySelector('.nf-vwr-description');
title.textContent = translations[locale]?.title || translations['en'].title;
description.textContent = translations[locale]?.description || translations['en'].description;

Rules:

• ✅ Safe to modify text content of elements without IDs
• ✅ Safe to add JavaScript for dynamic content
• ❌ Do not modify element IDs
• ⚠️ Test thoroughly across different locales

Case 2: Adding Custom Assets

Scenario: Load custom fonts, images, or other assets.

Implementation:

1. Add <link> tags in <head> for external resources
2. Use url() in CSS for images
3. Ensure assets are accessible (CORS, HTTPS)

Example - Custom Font:

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>

.nf-vwr-title {
  font-family: 'Roboto', sans-serif;
}

Example - Custom Image:

.nf-vwr-image1 {
  background-image: url('https://cdn.example.com/custom-image.png');
}

Rules:

• ✅ Safe to add <link> tags in <head>
• ✅ Safe to use external URLs in CSS url()
• ⚠️ Ensure assets are accessible (CORS enabled, HTTPS)
• ⚠️ Consider loading performance

Case 3: Adding Custom Logic

Scenario: Add custom JavaScript for enhanced functionality.

Implementation:

1. Add <script> tag before closing </body> tag
2. Use existing element IDs to interact with waiting room elements
3. Do not override NetFUNNEL's core functionality

Example - Custom Analytics:

<body>
  <!-- ... existing code ... -->
  
  <script>
    // Custom analytics tracking
    document.getElementById('nf-vwr-cancel').addEventListener('click', function() {
      // Track cancel button click
      console.log('Cancel button clicked');
      // Send to analytics service
    });
  </script>
</body>

Rules:

• ✅ Safe to add custom <script> tags
• ✅ Safe to add event listeners to existing elements
• ❌ Do not remove or modify required element IDs
• ⚠️ Test thoroughly to ensure compatibility

Case 4: Conditional Styling

Scenario: Apply different styles based on conditions (time of day, user type, etc.).

Implementation:

1. Use JavaScript to detect conditions
2. Add/remove CSS classes or modify inline styles
3. Use CSS classes for styling, not direct style modifications

Example - Time-based Styling:

<script>
  const hour = new Date().getHours();
  const background = document.querySelector('.nf-vwr-background');
  
  if (hour >= 6 && hour < 18) {
    background.style.backgroundColor = '#f0f0f0'; // Light mode
  } else {
    background.style.backgroundColor = '#1a1a1a'; // Dark mode
  }
</script>

Rules:

• ✅ Safe to modify CSS classes and inline styles via JavaScript
• ✅ Safe to add conditional logic
• ⚠️ Ensure changes don't break core functionality
• ⚠️ Test across different conditions

Case 5: Custom Animations

Scenario: Add custom animations or transitions.

Implementation:

1. Define @keyframes in CSS
2. Apply animations to elements
3. Ensure animations don't interfere with existing animations

Example:

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.nf-vwr-title {
  animation: fadeIn 1s ease-in;
}

Rules:

• ✅ Safe to add custom @keyframes
• ✅ Safe to add CSS animations
• ⚠️ Do not modify existing @keyframes (marquee, entering)
• ⚠️ Test animation performance

Programming Rules Summary

✅ Allowed Operations

1. CSS Modifications: All CSS properties can be modified (colors, fonts, spacing, layout, etc.)
2. HTML Content: Text content in non-ID elements can be modified
3. HTML Attributes: Safe attributes can be modified (data-nf-cancel-url, lang, title, href)
4. Adding Resources: Can add <link> tags for fonts, stylesheets, etc.
5. Adding Scripts: Can add custom <script> tags for additional functionality
6. Adding Elements: Can add new HTML elements (with caution - may affect layout)

⚠️ Restricted Operations

1. Element IDs: Never modify or remove IDs starting with nf-vwr-*
2. Dynamic Attributes: Do not modify value or max on <progress> element
3. Required Attributes: Do not remove data-nf-cancel-url attribute name
4. Core Animations: Do not modify existing @keyframes (marquee, entering)
5. Element Structure: Be cautious when modifying structure of dynamic content containers

❌ Prohibited Operations

1. Removing Required Elements: Do not remove elements with IDs
2. Breaking Functionality: Do not make changes that break waiting room functionality
3. Security Risks: Do not add scripts that pose security risks

Best Practices

Code Organization

• Use Comments: Add comments to identify custom sections
• Maintain Structure: Keep code organized and readable
• Test Incrementally: Make small changes and test frequently

Preview Monitoring

• Check After Each Change: Verify changes in preview after each modification
• Test Different Scenarios: Use Preview Controls to test at different resolutions
• Validate Functionality: Ensure all interactive elements work correctly

Safety Guidelines

• Backup Code: Save code backups before major changes
• Test Thoroughly: Test all functionality after modifications
• Document Changes: Keep notes on what was modified and why

---

Important

Always backup your code before making major changes. Code changes cannot be recovered after resetting to Easy Editing mode.

Multi-locale Services

For dynamic language switching based on user locale, implement locale detection and content updates using JavaScript. See the examples in Advanced Programming Cases for implementation details.