Skip to main content
Version: 4.6.1

Easy Editing

The Easy Editing provides an intuitive interface for modifying pre-waiting room design properties without writing code. This document explains how each setting in Easy Editing affects the preview and how changes are reflected in real-time.

Quick Reference​

SettingAffected ElementsCustomizable PropertiesNotes
Language SelectionAll text elementsLanguage (Korean, English, Japanese, Spanish)Fixed languages, affects all UI text
Theme SelectionOverall layoutThemeChanges structure and element placement
Position SettingsMain UI elementGrid position (9-grid layout)Default: Top Center
Color Customization (1st)Footer textColorFooter
Color Customization (2nd)Event TimeColorDate and time display
TitleTitle elementText, font-family, font-size, font-color, visibilityEye icon toggle available
Live Message PreviewLive message displayFont-family, font-size, font-color, visibilityContent configured in segment settings
DescriptionDescription textText, font-family, font-size, font-color, visibilityEye icon toggle available
FaviconBrowser tab iconImage file or URLApplies to URL-Triggered Integration only
Web Page TitleBrowser tab titleTextApplies to URL-Triggered Integration only
Image 1Image 1 areaImage file/URL, color, opacity, visibilityTheme-dependent location
Image 2Image 2 areaImage file/URL, color, opacity, visibilityTheme-dependent location
Image 3Main UI backgroundColor, opacity, visibilityBackground within main UI element
Background ImageScreen backgroundImage file/URL, color, opacityArea outside main UI element
Timer ToggleTimer displayToggle (enable/disable)Shows countdown timer when enabled
Waiting Room Exit ButtonWaiting room exit buttonToggle, URL, text, font-color, font-opacity, bg-color, bg-opacityURL required for redirect functionality

Overview​

Easy Editing allows you to customize various aspects of your pre-waiting room design through simple UI controls. All changes made are immediately reflected in the Preview Area, allowing you to see the results of your modifications in real-time.

Language Settings​

Language Selection​

Configure the language for your pre-waiting room interface.

  • Available Languages: Four languages are supported: Korean, English, Japanese, and Spanish
  • Fixed Languages: These are fixed, non-editable languages that change the text elements in the pre-waiting room interface

Theme and Layout​

Theme Selection​

Choose from available pre-waiting room themes.

  • Available Themes: Various themes are available
  • Theme-specific Features: Each theme has unique characteristics that affect how elements are displayed

Position Settings​

Configure the positioning of the main UI element on the screen.

  • 9-Grid Layout: The screen is divided into a 9-grid layout (3x3)
  • Position Options: Select which grid position to place the main UI element

Color Customization​

Modify colors for various pre-waiting room elements using two color pickers.

First Color Picker​

The first color picker affects the following elements:

  • Footer text: "Powered by NetFUNNEL | © STCLab Inc."

Second Color Picker​

The second color picker affects the following elements:

  • Event Time: The date and time display

Typography Settings​

Title​

Configure the pre-waiting room title.

  • Text Input: Enter the title text (e.g., "Please enter the title")
  • Font Family: Select font family from available options
  • Font Size: Adjust font size in pixels (e.g., 20px)
  • Font Color: Select font color using the color picker
  • Visibility Toggle: Use the eye icon (👁️) button to show/hide the title element in the UI

Live Message Preview​

Configure the live message preview section display settings.

  • Font Family: Select font family from available options
  • Font Size: Adjust font size in pixels (e.g., 14px)
  • Font Color: Select font color for the live message display area
  • Visibility Toggle: Use the eye icon (👁️) button to show/hide the live message preview element in the UI
Live Message Content Configuration

The actual live message content is configured in the segment's Waiting Room Application settings, not in the waiting room design. For Basic Control segments, refer to Waiting Room Application - Basic Control Segment. For Section Control segments, refer to Waiting Room Application - Section Control Segment.

Description​

Configure the pre-waiting room description.

  • Text Input: Enter description text (e.g., "Please enter the content")
  • Font Family: Select font family from available options
  • Font Size: Adjust font size in pixels (e.g., 16px)
  • Font Color: Select font color using the color picker
  • Visibility Toggle: Use the eye icon (👁️) button to show/hide the description element in the UI

Visual Elements​

Favicon​

Upload and configure the favicon (browser tab icon).

  • File Upload Options:
    • Local File Upload: Upload favicon image files directly from your local device
    • URL Input: Enter an image URL (http:// or https://) to load images from the web in real-time
  • When It Applies: The favicon is displayed when the waiting room opens as a separate page in the browser (i.e., when using URL-Triggered Integration)

File Upload Rules​

Local File Upload:

  • Drag and drop images or upload files
  • Maximum upload size: 2MB
  • Uploadable file types: .jpeg, .jpg, .png, .gif, .svg, .ico

URL Input:

  • Enter image URL starting with http:// or https://
  • Click Load to load the image from the URL
  • Supported formats: .jpeg, .jpg, .png, .gif, .svg, .ico
  • Images cannot be loaded unless they are in the supported formats
  • Use Cancel to cancel the URL input
  • Click Confirm to apply the image
URL-Triggered Integration

For information about URL-Triggered Integration, refer to the Integration Methods Overview and URL-Triggered Integration documents.

Web Page Title​

Configure the web page title displayed in the browser tab.

  • Text Input: Enter web page title (e.g., "Waiting Room")
  • Description: Title, displayed on the web browser tab
  • When It Applies: The web page title is displayed when the waiting room opens as a separate page in the browser (i.e., when using URL-Triggered Integration)
URL-Triggered Integration

For information about URL-Triggered Integration, refer to the Integration Methods Overview and URL-Triggered Integration documents.

Images (Image 1, 2, 3)​

Upload and configure images for the pre-waiting room.

  • Image Location: The meaning of Image 1, Image 2, and Image 3 varies depending on the selected theme. Refer to the Preview Area to see where Image 1 and Image 2 are displayed. Image 3 represents the background color within the main UI element of the pre-waiting room.
  • Visibility Toggle: Use the eye icon (👁️) button to show/hide each image element in the UI
  • Color Fallback: All images can have a single color specified using a color picker when no image is uploaded
  • Opacity: All images and colors have an Opacity option to adjust transparency (e.g., 0%, 100%)
  • File Upload Options:
    • Local File Upload: Upload image files directly from your local device
    • URL Input: Enter an image URL (http:// or https://) to load images from the web in real-time

File Upload Rules​

Local File Upload:

  • Drag and drop images or upload files
  • Maximum upload size: 2MB
  • Uploadable file types: .jpeg, .jpg, .png, .gif, .svg, .webp

URL Input:

  • Enter image URL starting with http:// or https://
  • Click Load to load the image from the URL
  • Supported formats: .jpeg, .jpg, .png, .gif, .svg, .webp
  • Images cannot be loaded unless they are in the supported formats
  • Use Cancel to cancel the URL input
  • Click Confirm to apply the image

Background Image​

Configure the pre-waiting room background.

  • Background Area: The background image applies to the area outside the main UI element (the entire screen background)
  • File Upload: Upload background image file
  • Color Fallback: Set background color (e.g., #2f3033) when image is not uploaded
  • Opacity: Adjust opacity percentage (e.g., 60%)

Functional Options​

Timer Toggle​

Configure the timer display.

  • Toggle: Enable/disable timer display
  • Description: Display countdown timer showing days, hours, minutes, and seconds until the event starts

Waiting Room Exit Button​

Configure the waiting room exit button styling and behavior.

  • Toggle: Enable/disable waiting room exit button
  • URL Configuration: Set redirect URL (must start with http:// or https://)
    • When URL is entered: Clicking the waiting room exit button will redirect you to the specified URL
    • When URL is not entered: The button will either not be displayed or will perform a specified action, depending on the agent type
  • Button Text: Enter the button text (e.g., "Close")
  • Font Color: Select font color using the color picker (e.g., #7f8083)
  • Font Opacity: Adjust font opacity percentage (e.g., 100%)
  • Button Background Color: Select button background color using the color picker (e.g., #edeef1)
  • Button Opacity: Adjust button background opacity percentage (e.g., 100%)

Best Practices​

Language Settings​

  • Target Audience Alignment: Select the language that matches your primary user base. If you serve international users, consider creating multiple pre-waiting room designs for different languages.
  • Consistency: Ensure the selected language matches the language used in your main website or application to provide a seamless user experience.
Multi-locale Services

If your service provides multi-locale support and needs to display the pre-waiting room in different languages based on user preferences, note that Easy Editing mode only supports a single language setting. For dynamic language switching based on user locale, you must implement locale change logic programmatically using Code Editor mode. See the Code Editor for implementation details.

Layout​

  • Position Settings: The default position is Top Center. There are no specific best practices for position selection. Simply check the preview to see how the layout appears and adjust the position based on your design preferences.

Color Customization​

Contrast and Readability:

  • Ensure sufficient contrast between text colors and background colors for accessibility (WCAG AA standard: 4.5:1 for normal text, 3:1 for large text)
  • Test color combinations in the preview to ensure all text remains readable in various lighting conditions

Brand Consistency:

  • Use your brand's primary colors for the first color picker (affects footer) to maintain brand identity
  • Use complementary or accent colors for the second color picker (affects event time) to create visual hierarchy

Visual Hierarchy:

  • Use darker or more saturated colors for important information (event time)
  • Use lighter or less saturated colors for secondary information (footer text)

Typography Settings​

Title:

Recommended Messages:

  • "Event Starting Soon"
  • "Please Wait"
  • "Almost There"
  • "Thank You for Waiting"
  • "We're Preparing Your Experience"

Best Practices:

  • Keep titles concise (ideally 5-10 words) to ensure they display well on all screen sizes
  • Use font sizes between 20px-32px for optimal readability (28px+ for emphasis, 20-24px for compact designs)
  • Ensure title color contrasts well with the background image or color

Description:

Recommended Messages:

  • "Please wait while we prepare the event. You will be redirected automatically."
  • "We're experiencing high traffic. Thank you for your patience."
  • "Your place is being secured. Please stay on this page."
  • "We're preparing something special for you. Please wait a moment."
  • "You're almost there! We're setting up your experience."

Best Practices:

  • Keep descriptions to 1-2 sentences to avoid overwhelming users
  • Use font sizes between 14px-18px for body text readability

Live Message Preview:

  • Coordinate font size and color with your segment's live message content to ensure consistency
  • Use colors that stand out but remain readable against the background

Visual Elements​

Images (Image 1, 2, 3):

  • File Size Optimization: Compress images before uploading to reduce load times (aim for under 500KB)
  • Image Dimensions: Use images with appropriate aspect ratios for your selected theme; test in preview to ensure correct display
  • Color Fallback: Always set a color fallback that complements your design (visible during image loading or if image fails to load)
  • Opacity Settings: Use opacity (60-80%) to create subtle overlays that don't overpower text content

Background Image:

  • Choose background images that are subtle and don't compete with the main UI element for attention
  • Use lower opacity (40-60%) for background images to ensure text readability
  • Consider using gradient or pattern backgrounds instead of complex images for better performance
  • Always test background images with your main UI element to ensure sufficient contrast

Favicon and Web Page Title:

  • Use your brand's favicon for instant recognition when the pre-waiting room opens in a new tab
  • Keep web page titles concise (under 60 characters) to avoid truncation in browser tabs
  • Include your brand name in the title for consistency

Functional Options​

Timer Toggle:

  • Enable when you want to show countdown to event start time
  • The timer displays days, hours, minutes, and seconds until the event begins
  • Ensure timer styling is clear and readable against the background

Waiting Room Exit Button:

Button Text Recommendations:

  • "Leave"
  • "Go Back"
  • "Close"
  • "Exit"
  • "Return to Home"

Best Practices:

  • URL Configuration: Always provide a meaningful redirect URL (e.g., back to homepage, alternative page, or support page) to give users an exit option
  • Styling: Ensure the button is easily visible but doesn't dominate the interface; use colors that indicate it's a secondary action (e.g., gray tones)
  • Accessibility: Maintain sufficient contrast between button text and background for readability