Version: 4.6.1

Code Editor

The Code Editor provides advanced editing capabilities for users who need complete control over the pre-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-event-time`	Event Time (Color Customization 2nd)	✅ Yes	Text, color, font-size, visibility
`#nf-vwr-metrics-essential`	Metrics container	⚠️ Limited	Layout only (do not modify ID)
`.nf-vwr-metrics-timer-container`	Timer container	✅ Yes	Layout, display, visibility
`#nf-vwr-timer-day-value`	Timer - Day	⚠️ Limited	Color only (value is dynamic)
`#nf-vwr-timer-hour-value`	Timer - Hour	⚠️ Limited	Color only (value is dynamic)
`#nf-vwr-timer-minute-value`	Timer - Minute	⚠️ Limited	Color only (value is dynamic)
`#nf-vwr-timer-second-value`	Timer - Second	⚠️ Limited	Color only (value is dynamic)
`.nf-vwr-timer-unit-wrapper`	Timer wrapper	✅ Yes	Layout, spacing for timer units
`.nf-vwr-timer-unit-dots`	Timer dots separator	✅ Yes	Color, visibility
`:root` CSS variables	All design properties	✅ Yes	Variable values (names should not be changed)
`#nf-vwr-entering-message`	Entering Message	✅ Yes	Text, color, font-size, visibility
`.nf-vwr-description`	Description	✅ Yes	Text, color, font-size, visibility
`#nf-vwr-cancel`	Waiting Room Exit 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:

In Easy Editing, switch from Easy editing to Editor mode
The Code Editor becomes available for code editing
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 code uses CSS custom properties (variables) defined in :root to control various design properties. These variables can be modified to customize the appearance:

Layout variables: --nf-grid-template-areas, --nf-justify-content, --nf-align-items
Typography variables: --nf-title-*, --nf-desc-*, --nf-live-message-*
Color variables: --nf-main-text-color, --nf-main-point-color, --nf-*-color
Image variables: --nf-image1-*, --nf-image2-*, --nf-image3-*, --nf-bg-*
Display variables: --nf-*-display (controls visibility via display property)

Customization: You can modify CSS variable values in the :root selector to change design properties globally.

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

Event Time

<div id="nf-vwr-metrics-essential" class="nf-vwr-metrics-essential">
  <p id="nf-vwr-metrics-event-time" class="nf-vwr-metrics-event-time">2025년 12월 01일</p>
  <div class="nf-vwr-metrics-timer-container">
    <!-- Timer units -->
  </div>
</div>

Easy Editing Setting: Event Time (Color Customization 2nd)
Customizable: Text content, color, font-size, font-weight, visibility
Location: Inside main UI container, within nf-vwr-metrics-essential container
⚠️ Important:
- Do not modify id="nf-vwr-metrics-essential" or id="nf-vwr-metrics-event-time"
- Event time is wrapped in a metrics container with timer

Timer (Day, Hour, Minute, Second)

<div class="nf-vwr-timer-unit-wrapper">
  <div id="nf-vwr-timer-card-day" class="nf-vwr-timer-unit">
    <div id="nf-vwr-timer-day-value" class="nf-vwr-timer-unit-number"></div>
    <div class="nf-vwr-timer-unit-bottom"></div>
  </div>
  <span>일</span>
</div>
<span class="nf-vwr-timer-unit-dots">
  <svg>...</svg>
</span>

Easy Editing Setting: Timer Toggle
Customizable:
- Timer unit styling (background, border, colors)
- Value color (#nf-vwr-timer-day-value, #nf-vwr-timer-hour-value, #nf-vwr-timer-minute-value, #nf-vwr-timer-second-value - color only)
- Label text (Day, Hour, Minute, Sec) - text inside <span> within wrapper
- Timer unit dots SVG styling
- Visibility (via display: none on container)
⚠️ Important:
- Do not modify element IDs (id="nf-vwr-timer-*")
- Value text is dynamically updated
- Timer values are calculated and updated automatically
- Timer units are wrapped in nf-vwr-timer-unit-wrapper with label spans
- Dots between timer units use nf-vwr-timer-unit-dots class

Entering Message

<div id="nf-vwr-entering-message" class="nf-vwr-entering-message">You will enter the site shortly.</div>

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

Entering Animation

<div id="nf-vwr-entering" class="nf-vwr-entering">
  <div class="nf-vwr-entering-dot1"></div>
  <div class="nf-vwr-entering-dot2"></div>
  <div class="nf-vwr-entering-dot3"></div>
</div>

Easy Editing Setting: Entering Animation
Customizable:
- Dot colors (background-color)
- Animation timing (via CSS animation property)
- Visibility (via display: none)
⚠️ Important:
- Do not modify element ID (id="nf-vwr-entering")
- Do not modify @keyframes entering animation

Marquee Animation

<div id="nf-vwr-marquee" class="nf-vwr-marquee-background">
  <div class="nf-vwr-marquee-object"></div>
</div>

Easy Editing Setting: Marquee Animation
Customizable:
- Background color
- Object color (background-color)
- Animation timing (via CSS animation property)
- Visibility (via display: none)
⚠️ Important:
- Do not modify element ID (id="nf-vwr-marquee")
- Do not modify @keyframes marquee animation

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

Waiting Room Exit Button

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

Easy Editing Setting: Waiting Room Exit Button
Customizable:
- Button text (inside <span> tag)
- 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)
- Button text is wrapped in a <span> element

<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)
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)
Event time text (#nf-vwr-metrics-event-time)
Label text (e.g., "Day", "Hour", "Minute", "Sec")
Button text (e.g., "Close")
Entering message text (#nf-vwr-entering-message)

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 CSS custom properties in :root (e.g., --nf-title-color, --nf-bg-color)
Variable values can be modified to customize design properties globally

⚠️ 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-timer-day-value (day countdown)
- #nf-vwr-timer-hour-value (hour countdown)
- #nf-vwr-timer-minute-value (minute countdown)
- #nf-vwr-timer-second-value (second countdown)
- #nf-vwr-live-message (live message content)
Rule: Only modify CSS styling (color, font-size, etc.) - do not modify the element structure or ID

Animations:

@keyframes marquee - Marquee animation
@keyframes entering - Entering animation
Rule: Only modify animation timing if needed - do not remove or significantly alter animation structure

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-entering-message"
id="nf-vwr-entering"
id="nf-vwr-marquee"
id="nf-vwr-metrics-essential"
id="nf-vwr-metrics-event-time"
id="nf-vwr-timer-card-day"
id="nf-vwr-timer-card-hour"
id="nf-vwr-timer-card-minute"
id="nf-vwr-timer-card-second"
id="nf-vwr-timer-day-value"
id="nf-vwr-timer-hour-value"
id="nf-vwr-timer-minute-value"
id="nf-vwr-timer-second-value"
id="nf-vwr-cancel"

Critical Attributes:

data-nf-cancel-url attribute name (required for button functionality)
Element structure of timer containers
Element structure of dynamic content containers
Timer calculation logic
CSS variable names in :root (variable values can be modified, but names should not be changed)

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">Event Starting Soon</div>

Customizing Timer Styling

Timer Unit Background:

.nf-vwr-timer-unit {
  background: #1a1a1a;      /* Dark background */
  border: 2px solid #3354ff; /* Blue border */
}

Timer Value Color:

#nf-vwr-timer-day-value,
#nf-vwr-timer-hour-value,
#nf-vwr-timer-minute-value,
#nf-vwr-timer-second-value {
  color: #ff0000;           /* Red timer values */
}

Active Timer Unit:

.unit-active {
  background: #00ff00;      /* Green when active */
  border: 2px solid #00ff00;
}

Timer Unit Wrapper:

.nf-vwr-timer-unit-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

Timer Unit Dots:

.nf-vwr-timer-unit-dots {
  color: #4c4c4c;           /* Customize dot color */
}

Hiding Elements

Method 1: CSS Display

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

#nf-vwr-entering {
  display: none;            /* Hide entering animation */
}

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 */
}

#nf-vwr-metrics-event-time {
  color: #ff6600;            /* Orange event time */
}

Modifying Button

Button Text:

<button id="nf-vwr-cancel" class="nf-vwr-cancel" data-nf-cancel-url="https://example.com">
  <span>Leave</span>
</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">
  <span>Close</span>
</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;
}

Using CSS Variables

Modifying CSS Variable Values:

:root {
  --nf-title-color: #ff0000;        /* Change title color */
  --nf-title-font-size: 28px;        /* Change title font size */
  --nf-bg-color: #1a1a1a;            /* Change background color */
  --nf-main-point-color: #00ff00;    /* Change point color */
}

Note: CSS variables are defined in :root and can be modified to change design properties globally. Variable names should not be changed, but their values can be customized.

Advanced Programming Cases

Case 1: Custom Timer Styling

Scenario: Apply different styles to timer units based on time remaining.

Implementation:

Use CSS to style timer units
JavaScript can add/remove classes based on timer state
Use .unit-active class for active timer units

Example:

.nf-vwr-timer-unit {
  background: #4c4c4c;
  transition: all 0.3s ease;
}

.unit-active {
  background: #3354ff;
  border: 1px solid #EEE;
  transform: scale(1.05);
}

Rules:

✅ Safe to modify CSS for timer units
✅ Safe to add transitions and effects
❌ Do not modify timer value IDs
⚠️ Test timer functionality after styling changes

Case 2: Custom Animations

Scenario: Add custom animations or modify existing ones.

Implementation:

Define custom @keyframes in CSS
Apply animations to elements
Ensure animations don't interfere with existing animations

Example - Custom Fade In:

@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

Case 3: Dynamic Language Switching

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

Implementation:

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

Example:

// Detect locale and update text
const locale = navigator.language || 'en';
const translations = {
  'en': { title: 'Event Starting Soon', description: 'Please wait' },
  '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

Programming Rules Summary

✅ Allowed Operations

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

⚠️ Restricted Operations

Element IDs: Never modify or remove IDs starting with nf-vwr-*
Timer Values: Do not modify timer value element IDs or structure
Required Attributes: Do not remove data-nf-cancel-url attribute name
Core Animations: Do not modify existing @keyframes (marquee, entering)
Element Structure: Be cautious when modifying structure of timer or dynamic content containers
CSS Variable Names: Do not change CSS variable names in :root (values can be modified)

❌ Prohibited Operations

Removing Required Elements: Do not remove elements with IDs
Breaking Functionality: Do not make changes that break timer or waiting room functionality
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 Timer Functionality: Ensure timer displays and updates correctly
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.

Timer Customization

The timer is a key feature of pre-waiting rooms. You can customize timer styling (colors, borders, backgrounds) but must preserve the timer value element IDs for proper functionality.

Quick Reference​

Overview​

Accessing Code Editor​

Switching to Editor Mode​

Code Structure Overview​

CSS Variables System​

HTML Structure Mapping​

Background Layer​

Main UI Container​

Images​

Title​

Live Message​

Event Time​

Timer (Day, Hour, Minute, Second)​

Entering Message​

Entering Animation​

Marquee Animation​

Description​

Waiting Room Exit Button​

Footer Information​

Safe Customization Areas​

✅ Safe to Modify​

⚠️ Modify with Caution​

❌ Do Not Modify​

Common Customization Examples​

Changing Title Text and Style​

Customizing Timer Styling​

Hiding Elements​

Changing Colors​

Modifying Button​

Adding Background Images​

Using CSS Variables​

Advanced Programming Cases​

Case 1: Custom Timer Styling​

Case 2: Custom Animations​

Case 3: Dynamic Language Switching​

Programming Rules Summary​

✅ Allowed Operations​

⚠️ Restricted Operations​

❌ Prohibited Operations​

Best Practices​

Code Organization​

Preview Monitoring​

Safety Guidelines​

Quick Reference

Overview

Accessing Code Editor

Switching to Editor Mode

Code Structure Overview

CSS Variables System

HTML Structure Mapping

Background Layer

Main UI Container

Images

Title

Live Message

Event Time

Timer (Day, Hour, Minute, Second)

Entering Message

Entering Animation

Marquee Animation

Description

Waiting Room Exit Button

Footer Information

Safe Customization Areas

✅ Safe to Modify

⚠️ Modify with Caution

❌ Do Not Modify

Common Customization Examples

Changing Title Text and Style

Customizing Timer Styling

Hiding Elements

Changing Colors

Modifying Button

Adding Background Images

Using CSS Variables

Advanced Programming Cases

Case 1: Custom Timer Styling

Case 2: Custom Animations

Case 3: Dynamic Language Switching

Programming Rules Summary

✅ Allowed Operations

⚠️ Restricted Operations

❌ Prohibited Operations

Best Practices

Code Organization

Preview Monitoring

Safety Guidelines