Settings Dialog

The Settings Dialog allows visitors to customize page content visibility and tab selections. It adapts to your configuration, showing only relevant sections.

It is disabled by default in case users wish to use CustardUI only for specific features.

The settings panel allows users to:

• Toggle content sections on/off
• Select active tabs in tab groups
• Show/hide navigation headers
• Configure placeholders
• Select and enter share and highlight view
• Reset view to defaults or copy a shareable URL

Settings Icon Trigger

The floating gear icon provides quick access to the settings.

• Draggable: Users can drag the icon vertically to their preferred position.
• Persistent: The icon's position is saved in the browser so it stays where the user left it.
• Adaptive: It stays within the viewport bounds automatically.

It can be disabled as well, and you can opt to trigger the settings dialog via a link or button.

Intro Popup for Icon Trigger

An optional popup can appear on the user's first visit to highlight the settings icon. It includes a customizable message and dismisses permanently after interaction.

Opening via Link

You can trigger the settings dialog via a link or button:

Hash Trigger (Recommended)

Append #cv-open to the URL. Works without reloading the page.

[Open Settings](./#cv-open)

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

Open Settings through hash

Query Parameter

Append ?cv-open=true, or simply ?cv-open to the URL. Works on page load (reloads page) and auto-cleans the URL.

[Open Settings](./settings.html?cv-open)

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

Open Settings through query parameter

Adaptive Display

The settings panel stays clean by only verifying configured elements:

• Toggles/Tabs/Placeholders: Sections appear only if defined in config.
• Order of Sections: The order of Toggles, Tab Groups, and Placeholders in the modal follows their order in your custardui.config.json.
• Description: Appears only if panel.description is set.

Modal Tabs

The settings modal is divided into two main tabs: Customize and Share.

Customize Tab

The Customize tab is the primary interface for users to adjust their view. It contains:

• Toggles: Enable or disable specific content sections.
• Placeholders: Text variables that users can customize (e.g., names, dates, or technical terms).
• Tab Groups: Select which version of a component to display.
• Navigation Headers: A special toggle to show/hide the navigation links for tab groups.

Elements marked as isLocal: true in your configuration will only appear in this tab if they are actually present on the current page. Global elements (where isLocal is false or omitted) are always visible.

Share Tab

The Share tab provides tools for users to capture and distribute their specific configuration.

• Select Elements to Share: Triggers a selection mode where users can click on specific parts of the page to include in their shareable state.
• Copy Shareable URL of Settings: Generates a URL that encodes the user's current settings.

Shareable URL Behavior

When a user clicks "Copy Shareable URL of Settings", CustardUI generates a link that captures:

1. All global configurations (toggles, tab groups, and placeholders not marked as isLocal).
2. All local configurations that are currently present on the page.

This ensures that the recipient sees exactly what the sender intended, while preventing "state pollution" from local elements that don't exist on the current page.

Configuration

Configure the settings in custardui.config.json:

{
  "config": {
    "settings": {
      "enabled": true,
      "panel": {
        "title": "Custom Views Settings Dialog",
        "description": "Toggle different content sections to customize your view.",
        "showTabGroups": true,
        "showReset": true
      },
      "callout": {
        "show": true,
        "message": "Open the CustardUI settings to customize your view.",
        "enablePulse": true,
        "backgroundColor": "#198755",
        "textColor": "#ffffff"
      },
      "icon": {
        "position": "middle-left",
        "color": "#ffffff",
        "backgroundColor": "#198755",
        "opacity": 1.0,
        "scale": 1.1
      }
    }
  }
}

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

Settings Options

Integration

The settings component automatically discovers:

• Toggles from config.toggles
• Tab Groups from config.tabGroups
• Navigation Headers (persisted site-wide)