Code Editor

The Code Editor provides advanced editing capabilities for users who need complete control over the post-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-description	Description	✅ Yes	Text, color, font-size, visibility
#nf-vwr-cancel	Close 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.

CSS Variables System

The new code structure uses CSS custom properties (variables) defined in :root for centralized styling control. All design properties are controlled through these variables, making it easier to customize the appearance consistently.

Key CSS Variables:

• --nf-main-*: Main theme colors and fonts
• --nf-title-*: Title styling options
• --nf-desc-*: Description styling options
• --nf-image1-*, --nf-image2-*, --nf-image3-*: Image display and styling
• --nf-bg-*: Background color and image
• --nf-close-*: Close button styling
• --nf-*-display: Visibility control (block, none, flex, grid, etc.)

Benefits of CSS Variables:

• Centralized control: Change values in :root to update all related elements
• Easy theming: Modify variables to create consistent color schemes
• Dynamic updates: Variables can be changed via JavaScript for runtime customization

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 post-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

Description

<div class="nf-vwr-description nf-vwr-pause-hidden">내용을 입력해주세요.</div>

• Easy Editing Setting: Description
• Customizable: Text content, color, font-size, visibility
• Location: Inside main UI container
• Note: The nf-vwr-pause-hidden class may be used by the system for pause state management

Close Button

<button id="nf-vwr-cancel" class="nf-vwr-cancel" data-nf-cancel-url="">
  <span>닫기</span>
</button>

• Easy Editing Setting: Close Button Behavior
• Customizable:
  • Button text (inside <span> tag)
  • Colors (background-color, color, border-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)
  • Note: Post-waiting room uses data-nf-cancel-url attribute

Footer Information

<div class="nf-vwr-copyright">Powered by <strong>NetFUNNEL</strong> | © STCLab Inc.</div>

• Easy Editing Setting: Footer text (via Color Customization)
• 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)
• Button text (e.g., "Close")
• Footer text

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)

CSS Variables:

• All --nf-* CSS custom properties in :root can be modified
• Variable values control colors, fonts, spacing, and visibility

⚠️ 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

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-cancel"

Critical Attributes:

• data-nf-cancel-url attribute name (required for button functionality)
• Element structure of dynamic content containers
• CSS variable names in :root (changing variable names will break functionality)

Common Customization Examples

Changing Title Text and Style

Method 1: Using CSS Variables (Recommended)

:root {
  --nf-title-color: #ff0000;        /* Change title color */
  --nf-title-font-size: 28px;        /* Increase font size */
}

Method 2: Direct CSS Override

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

<div class="nf-vwr-title">Thank You for Waiting</div>

Hiding Elements

Method 1: Using CSS Variables (Recommended)

:root {
  --nf-desc-display: none;  /* Hide description */
}

Method 2: CSS Display

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

Method 3: HTML Comment

<!-- <div class="nf-vwr-description nf-vwr-pause-hidden">내용을 입력해주세요.</div> -->

Changing Colors

Using CSS Variables (Recommended):

:root {
  /* Background colors */
  --nf-bg-color: #1a1a1a;              /* Dark background */
  --nf-image3-bg-color: #ffffff;       /* White main UI background */
  
  /* Text colors */
  --nf-title-color: #3354ff;           /* Blue title */
  --nf-desc-color: #666666;            /* Gray description */
}

Direct CSS Override:

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

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

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

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

Modifying Button

Button Text:

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

Button Styling (Using CSS Variables):

:root {
  --nf-close-bg-color: #ff0000;       /* Red background */
  --nf-close-text-color: #ffffff;     /* White text */
  --nf-close-border-color: #cc0000;    /* Darker red border */
}

Button Styling (Direct CSS):

.nf-vwr-cancel {
  background-color: #ff0000;  /* Red background */
  color: #ffffff;              /* White text */
  border-color: #cc0000;       /* Darker red border */
  border-radius: 12px;         /* More rounded */
}

Button URL:

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

Adding Background Images

Using CSS Variables (Recommended):

:root {
  --nf-bg-url: url('https://example.com/background.jpg');
  --nf-image1-url: url('https://example.com/image1.png');
  --nf-image2-url: url('https://example.com/image2.png');
  --nf-image3-url: url('https://example.com/image3.png');
}

Direct CSS Override:

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

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

Advanced Programming Cases

Case 1: Dynamic Language Switching

Scenario: Display post-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: 'Thank You for Waiting', description: 'Enjoy the event!' },
  '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 close button click
      console.log('Close 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. Modify CSS variables or add/remove CSS classes
3. CSS variables provide centralized control and better performance

Example - Time-based Styling (Using CSS Variables):

<script>
  const hour = new Date().getHours();
  const root = document.documentElement;
  
  if (hour >= 6 && hour < 18) {
    // Light mode
    root.style.setProperty('--nf-bg-color', '#f0f0f0');
    root.style.setProperty('--nf-image3-bg-color', '#ffffff');
    root.style.setProperty('--nf-title-color', '#2F3033');
  } else {
    // Dark mode
    root.style.setProperty('--nf-bg-color', '#1a1a1a');
    root.style.setProperty('--nf-image3-bg-color', '#2a2a2a');
    root.style.setProperty('--nf-title-color', '#ffffff');
  }
</script>

Example - Direct Style Modification:

<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 variables via JavaScript (recommended)
• ✅ 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) if present
• ⚠️ Test animation performance

Programming Rules Summary

✅ Allowed Operations

1. CSS Modifications: All CSS properties can be modified (colors, fonts, spacing, layout, etc.)
2. CSS Variables: All --nf-* CSS custom properties in :root can be modified for centralized styling
3. HTML Content: Text content in non-ID elements can be modified (including text inside <span> tags)
4. HTML Attributes: Safe attributes can be modified (data-nf-cancel-url, lang, title, href)
5. Adding Resources: Can add <link> tags for fonts, stylesheets, etc.
6. Adding Scripts: Can add custom <script> tags for additional functionality
7. 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. Required Attributes: Do not remove data-nf-cancel-url attribute name
3. CSS Variable Names: Do not modify CSS variable names (e.g., --nf-title-color), only their values
4. Core Animations: Do not modify existing @keyframes (marquee, entering) if present
5. Element Structure: Be cautious when modifying structure of dynamic content containers
6. System Classes: Be cautious with classes like nf-vwr-pause-hidden that may be used by the system

❌ 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.

Post-waiting Room Customization

The post-waiting room is simpler than pre-waiting room and regular waiting room, focusing on thank you messages and event recommendations. You can customize all visual elements while maintaining the core functionality.