⚙️Full Configuration Breakdown

🌍 Server-Side Configuration (config.lua)

Default Key Testing

Config.DefaultKey = 'E' -- Default key to show in notifications if none specified

Test Point

Config.EnableTestPoint = true -- Set to false to disable the test point

Config.TestPoint = {
    coords = vector3(-269.4, -955.3, 30.2), -- Coordinates for the test point
    distance = 3.5, -- Distance threshold for displaying the notification
    helpText = "Press to interact", -- Text displayed in the notification
    marker = {
        type = 1, -- Type of marker (1 = arrow)
        size = vector3(3.0, 3.0, 0.5), -- Size of the marker
        color = {r = 0, g = 255, b = 0, a = 25}, -- Color of the marker (green with transparency)
        bobUpAndDown = false, -- Whether the marker should bob up and down
        faceCamera = false, -- Whether the marker should face the camera
        rotate = false -- Whether the marker should rotate
    }
}

Text Cleaning Function

function CleanText(text, key)
    local cleanedKey = type(key) == "string" and key:gsub("~%l~", "") or Config.DefaultKey
    local cleanedText = "Standard help text"
    
    if type(text) == "string" then
        cleanedText = text
            :gsub("~INPUT_CONTEXT~", "E") -- Replace "~INPUT_CONTEXT~" with "E"
            :gsub("~%l~", "") -- Remove other special characters
    end
    
    return cleanedKey, cleanedText
end

---

🎨 Frontend UI Configuration (html/config.js)

Notification Settings

const Config = {
    // Default position of the notification
    DefaultPosition: 'bottom-middle', // Options: top-left, top-middle, top-right, middle-left, center, middle-right, bottom-left, bottom-middle, bottom-right
    
    // Position percentages for fine-tuning
    PositionPercentages: {
        top: 20, // % from top (when using top positions)
        bottom: 7, // % from bottom (when using bottom positions)
        left: 5, // % from left (when using left positions)
        right: 5, // % from right (when using right positions)
    },
    
    // Scale of the notification
    DefaultScale: 1.0 // 1.0 is default, adjust for larger/smaller notifications
}

Appearance Settings

// Background color with opacity (RGBA format)
BackgroundColor: {r: 0, g: 0, b: 0, a: 0.4},
TextColor: {r: 255, g: 255, b: 255, a: 1.0}, // Text color
ButtonColor: {r: 0, g: 255, b: 0, a: 0.1}, // Button color with transparency
BorderRadius: '8px', // Rounded corners
FontFamily: 'Poppins, sans-serif', // Font family for the UI

Button Size

ButtonSize: {
    width: 50, // Width of the button in pixels
    height: 50, // Height of the button in pixels
    fontSize: 26 // Font size of the button text in pixels
}

Glass Effect

GlassEffect: true, // Enable/disable glass effect
GlassBlur: 4, // Strength of the blur effect in pixels
GlassOpacity: 0.6, // Opacity of the glass effect

Glow Effect

GlowEffect: true, // Enable/disable glow effect
GlowColor: {r: 0, g: 255, b: 0, a: 0.7}, // Color of the glow effect (RGBA format)
GlowSpread: '10px', // Spread of the glow effect

---

🔄 Usage Examples

Basic Usage

-- Show a help notification with a key and text
exports['X_HUD_HelpNotification']:ShowHelpNotification('E', 'Press to interact')

Event Trigger

-- Trigger the notification event with a key and text
TriggerEvent('helpnotify', 'E', 'Press to interact')

Alternative Event

-- Alternative event name
TriggerEvent('X_HUD_HelpNotification:showHelpNotification', 'E', 'Press to interact')