BLN Notify

A standalone, flexible, and customizable notification system for RedM servers.

Video Preview

✨ Features

🌐 RTL (Right-to-Left) support for multilingual notifications
📚 Predefined templates for easily reusable notifications
🧭 Support for all directions (9 placement options)
📱 Responsive design for various screen sizes
🎵 Customizable notification sounds
🎛️ Support for both advanced and simple notifications
🌈 Dynamic text coloring with inline color codes
🖼️ Inline images in text using ~img:name~ syntax
⌨️ Interactive key bindings with visual indicators
📊 Progress indicators (bar and circle types)
🎭 Flexible icon support (URL or local img name)
⏱️ Customizable duration for each notification
🔀 Adjustable content alignment (start, center, end)
🎬 Animated entrance and exit effects
🖥️ Both client-side and server-side triggering options
🛠️ Easy to integrate with existing resources
🎮 Designed specifically for RedM servers (Standalone)

Documentation

Client-Side Usage

To send a notification from the client-side:

TriggerEvent("bln_notify:send", options)
-- OR
TriggerEvent("bln_notify:send", options, template)

Basic Example

TriggerEvent("bln_notify:send", {
    title = "~#ffcc00~Hello!~e~",
    description = "This is a ~red~basic~e~ notification with ~img:info~ icon.",
    icon = "generic_list",
    placement = "middle-right"
})

-- With Template
TriggerEvent("bln_notify:send", {
    description = "This is a success template notification.",
    placement = "middle-right"
}, "SUCCESS")

Advanced Example with Progress and Key Actions

TriggerEvent("bln_notify:send", {
    title = "~#ffcc00~Advanced Example~e~",
    description = "Press ~key:E~ to accept or ~key:F6~ to decline",
    icon = "warning",
    placement = "middle-left",
    duration = 10000,
    progress = {
        enabled = true,
        type = 'circle', -- or 'bar'
        color = '#ffcc00'
    },
    keyActions = {
        ['E'] = "accept", -- action name used when listen
        ['F6'] = "decline"
    }
})

Notification Options

Option	Description	Default	Required/Optional
placement	Position of the notification	"top-right"	Optional
title	Title of the notification	"Notification"	Required
description	Description text for the notification	null	Optional
duration	Time in milliseconds before auto-removal	5000	Optional
icon	Icon name or URL	null	Optional
useBackground	Whether to use background image	true	Optional
contentAlignment	Content alignment	"start"	Optional
isRTL	Right-to-left text direction	false	Optional
progress	Progress indicator options	null	Optional
keyActions	Key binding actions	null	Optional
customSound	Custom notification sound	Default sounds	Optional

Key Actions & Event Handling

Key actions allow you to add interactive key bindings to your notifications. When a specified key is pressed, it triggers an event that you can listen to in your scripts.

Basic Usage Example

-- Send notification with key actions
TriggerEvent("bln_notify:send", {
    title = "Interaction Available",
    description = "Press ~key:E~ to interact or ~key:F6~ to cancel",
    duration = 10000,
    keyActions = {
     -- ['key_name'] = 'action_name'
        ['E'] = "accept",      -- 'accept' is the action name that will be triggered
        ['F6'] = "decline"      -- 'decline' is the action name
    }
})

-- Listen for key press events in your script
RegisterNetEvent("bln_notify:keyPressed")
AddEventHandler("bln_notify:keyPressed", function(action)
    if action == "accept" then
        print("accept key was pressed!")
        -- Do your accept logic here
    elseif action == "decline" then
        print("decline key was pressed!")
        -- Do your decline logic here
    end
end)

key_name: The key names are specific to RedM's key mapping system. Make sure to use the correct key names in your keyActions configuration, list of allowed keys can be found at client/keys.lua.
action_name
Key icons: to show key icon in a notification description, use as ~key:name~. The name can be anything like E, ENTER, <- ..etc. Its only a text in view, so it does not affect the key actions above if we put anything.

Progress Options

progress = {
    enabled = true, -- Enable/disable progress indicator
    type = 'bar', -- 'bar' or 'circle with countdown'
    color = '#ffcc00' -- Custom color for progress
}