メインコンテンツまでスキップ
バージョン: 4.5.2.5-onprem

Easy Editing

The Easy Editing provides an intuitive interface for modifying block 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)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 CustomizationWarning message, footer textColorWarning message and footer
TitleTitle elementText, font-size, font-color, visibilityEye icon toggle available
DescriptionDescription textText, 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
Close ButtonClose 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 block 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 block room interface.

  • Available Languages: Three languages are supported: Korean, English, and Japanese
  • Fixed Languages: These are fixed, non-editable languages that change the text elements in the block room interface
  • Preview Impact: Language changes affect all text elements in the preview immediately

Theme and Layout​

Theme Selection​

Choose from available block room themes.

  • Available Themes: Various themes are available
  • Preview Impact: Theme selection changes the overall layout and structure visible in the preview
  • 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
  • Preview Impact: Position changes are immediately visible in the preview area

Color Customization​

Modify colors for various block room elements using the color picker.

The color picker affects the following elements:

  • Warning message: "Refreshing the page, going back, or closing the popup and reconnecting may reset your waiting time."

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

  • Preview Impact: Color changes are instantly reflected in the preview

Typography Settings​

Title​

Configure the block room title.

  • Text Input: Enter the title text (e.g., "Please enter the title")
  • 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
  • Preview Impact: Title changes appear immediately in the preview area

Description​

Configure the block room description.

  • Text Input: Enter description text (e.g., "Please enter the content")
  • 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
  • Preview Impact: Description changes appear immediately in the preview

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)
  • Preview Impact: Favicon appears in the browser tab preview

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)
  • Preview Impact: Web page title is reflected in the browser tab preview
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 block 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 block 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
  • Preview Impact: Image changes are immediately visible in the preview area

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 block 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%)
  • Preview Impact: Background changes are instantly reflected in the preview

Functional Options​

Close Button​

Configure the close button styling and behavior.

  • Toggle: Enable/disable close button
  • URL Configuration: Set redirect URL (must start with http:// or https://)
    • When URL is entered: When users click the close button, they will be directed 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%)
  • Preview Impact: Button appears in preview with configured settings, and all styling changes are immediately reflected

Best Practices​

Language Settings​

  • Target Audience Alignment: Select the language that matches your primary user base. If you serve international users, consider creating multiple block 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 block 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.

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
  • The color picker affects warning message and footer text, so ensure these elements remain readable against the background

Brand Consistency:

  • Use your brand's primary colors for the color picker (affects warning message and footer) to maintain brand identity

Visual Hierarchy:

  • Use lighter or less saturated colors for secondary information (warning message, footer text) to maintain visual hierarchy with primary content

Typography Settings​

Title:

Recommended Messages:

  • "Access Denied"
  • "Access Restricted"
  • "This Page Is Not Available"
  • "Access Blocked"
  • "Unauthorized Access"

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
  • Use clear, direct language to communicate the blocking status

Description:

Recommended Messages:

  • "You do not have permission to access this page. Please contact support if you believe this is an error."
  • "Access to this content is restricted. Please check your access permissions."
  • "This page is not available in your region or for your account type."
  • "Access has been blocked. Please contact the administrator for assistance."
  • "You are not authorized to view this content."

Best Practices:

  • Keep descriptions to 1-2 sentences to avoid overwhelming users
  • Use font sizes between 14px-18px for body text readability
  • Provide clear guidance on what users should do next (contact support, check permissions, etc.)
  • Use professional and respectful language even when blocking access

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
  • Appropriate Imagery: Use images that align with the block room's purpose (e.g., warning icons, security-related imagery)

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 block 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​

Close Button:

Button Text Recommendations:

  • "Close"
  • "Go Back"
  • "Return to Home"
  • "Exit"
  • "Contact Support"

Best Practices:

  • URL Configuration: Always provide a meaningful redirect URL (e.g., back to homepage, support page, or login 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
  • User Experience: Provide a clear path for users who may have legitimate access needs (e.g., redirect to support or login page)