USIN | Notify 🔔

A modern, stylish, and highly configurable notification system for FiveM. Built to be a complete replacement for default notifiers, offering granular customization and in-game settings.

✨ Features

• Modern Design: Clean, minimalist aesthetic with optional glassmorphism effects and customizable border radius.
• Highly Configurable: Customize colors, icons, glows, and animations for every notification type.
• In-Game Settings Menu: Players can personalize their experience (position, volume, animations, etc.) via a built-in UI (/usin_notify or F7).
• Interactive Layout Editor: Drag and resize the notification container directly in-game to find the perfect spot.
• Persistent Settings: User preferences are saved locally via KVP and persist across sessions.
• Multiple Animation Styles: Choose between slide, zoom, and fade animations with adjustable speeds.
• Dynamic Positioning: 9 predefined positions plus support for custom coordinate positioning.
• Progress Bar Styles: Multiple styles including basic, centered, and reverse variants.
• Light Animations: Add extra flair withflash, or rgb animations for icons and progress bars.
• Rich API: Full support for titles, descriptions, icons, progress bars, and dynamic data injection.
• Interactive: Support for onClick and onClose callbacks.
• Sound Support: Custom sounds per notification type with volume control.
• Server & Client Support: Trigger notifications easily from both client and server scripts.

📦 Installation

1. Claim usin_notify for FREE from my Tebex.
2. Download the usin_notify resource from the Cfx.re Portal.
3. Drag the usin_notify folder into your server’s resources directory.
4. Add ensure usin_notify to your server.cfg.
5. (Optional) Add your custom .mp3 sound files to html/sounds/.
6. (Optional) Add them as a new option in html/index.html so your players can select them in-game.

⚙️ Configuration

Global Config (config.lua)

The config.lua file handles the default server-wide settings.

• Default Position: Set the starting position for all players.
• Notification Types: Define the default look (colors, icons, glows) for success, warn, error, info, etc.
• Progress Bar Style: Choose from none, basic, centered, basic-reverse, or centered-reverse.
• Command/Keybind: Change the command and key to open the settings menu.

In-Game Settings Menu

Players can open the settings menu using the command or keybind configured in config.lua (Default: /usin_notify or F7). From here, they can:

• Layout Editor: Click “Edit Layout” to drag the notification container anywhere on the screen.
• Presets: Quickly snap to one of the 9 predefined screen positions.
• Visuals: Toggle “Glass Effect”, adjust “Border Radius”, and change “Progress Bar Style”.
• Animations: Select animation types (slide, zoom, fade) and adjust their speed.
• Types: Customize colors, icons, and “Light Animations” (border, flash, rgb) for each notification type.

🚀 Usage

Client-Side Export

exports.usin_notify:notify(data, [dynamicData])

Parameters (data table)

Server-Side Export

exports.usin_notify:notify(source, data, [dynamicData])

• source: The player’s server ID. Use -1 to send to all players.
• data: Same table as client-side.
• dynamicData: (Optional) Table of values to format the description.

Dynamic Data Formatting

You can pass a table of values as a second argument to notify to dynamically format the description string (similar to string.format).

local playerName = "John"
local amount = 500
exports.usin_notify:notify({
    title = "Payment Received",
    description = "You received $%d from %s.",
    type = "success"
}, { amount, playerName }) 
-- Result: "You received $500 from John."

📝 Examples

Basic Notification

exports.usin_notify:notify({
    type = 'success',
    title = 'Job Done',
    description = 'You have successfully delivered the package.'
})

Advanced Notification with Callback

exports.usin_notify:notify({
    id = 'mission_invite',
    title = 'Heist Invite',
    description = 'Lester has a job for you. Click to accept.',
    type = 'info',
    duration = 10000,
    icon = 'fa-solid fa-user-secret',
    onClick = function()
        TriggerServerEvent('heist:acceptInvite')
        print('Invite accepted!')
    end
})

Server-Side Announcement

-- Send to all players
exports.usin_notify:notify(-1, {
    title = 'Server Restart',
    description = 'The server will restart in 5 minutes.',
    type = 'warn',
    duration = 15000,
    sound = 'alarm.mp3'
})

🛠️ Exports & Events

• Client Export: exports.usin_notify:notify(data, [dynamicData])
• Client Export: exports.usin_notify:close(id)
• Server Event: TriggerClientEvent('usin_notify:show', source, data)

🔄 Framework Integration

To replace the default notifications in your framework, locate the notification function and replace it with the code below.

ESX Legacy

File: es_extended/client/functions.lua Find function ESX.ShowNotification and replace it with:

function ESX.ShowNotification(message, type, length)
    exports.usin_notify:notify({
        type = type or 'info',
        description = message,
        duration = length or 5000
    })
end

QBCore

File: qb-core/client/functions.lua Find function QBCore.Functions.Notify and replace it with:

function QBCore.Functions.Notify(text, texttype, length)
    local ttype = texttype or 'info'
    if ttype == 'primary' then ttype = 'info' end
    
    if type(text) == "table" then
        local ttext = text.text or 'Placeholder'
        local caption = text.caption or 'Notification'
        exports.usin_notify:notify({
            type = ttype,
            title = caption,
            description = ttext,
            duration = length or 5000
        })
    else
        exports.usin_notify:notify({
            type = ttype,
            description = text,
            duration = length or 5000
        })
    end
end

ox_lib

File: ox_lib/resource/interface/client/notify.lua (or search for function lib.notify) Replace the entire lib.notify function with:

function lib.notify(data)
    if type(data) == 'string' then
        return exports.usin_notify:notify({
            type = 'inform',
            description = data
        })
    end

    local description = data.description or data.text or data.body or data.content or data.label or data.message
    local title = data.title

    -- Fallback: If no description is provided but a title exists, use the title as the description
    if not description and title then
        description = title
        title = nil
    end

    return exports.usin_notify:notify({
        id = data.id,
        type = data.type or 'inform',
        title = title,
        description = description,
        duration = data.duration or 5000,
        position = data.position,
        icon = data.icon,
        iconColor = data.iconColor,
        style = data.style
    })
end

👀 Preview

Video:

Watch the video

Images:

Created with ❤️ by USIN