> For the complete documentation index, see [llms.txt](https://usin.gitbook.io/usin/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://usin.gitbook.io/usin/free/usin-or-notify.md). # 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 with`flash`, 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](https://usin.tebex.io/category/free). 2. Download the `usin_notify` resource from the [Cfx.re Portal](https://portal.cfx.re/assets/granted-assets). 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 ```lua exports.usin_notify:notify(data, [dynamicData]) ``` **Parameters (`data` table)** | Parameter | Type | Description | | ---------------- | -------- | -------------------------------------------------------------------- | | `type` | string | The notification type (e.g., `'success'`, `'error'`, `'info'`). | | `title` | string | **(Optional)** Bold title text. | | `description` | string | The main message text. Can use placeholders like `%s` or `%d`. | | `duration` | number | Time in milliseconds to show (Default: `5000`). | | `position` | string | Override position for this specific notification. | | `icon` | string | FontAwesome icon class (e.g., `'fa-solid fa-check'`). | | `iconColor` | string | Hex color for the icon. | | `lightAnimation` | string | Override light animation (`'border'`, `'flash'`, `'rgb'`, `'none'`). | | `sound` | string | Custom sound file name (must be in `html/sounds/`). | | `volume` | number | Volume level (0.0 - 1.0). | | `onClick` | function | Callback function when the notification is clicked. | | `onClose` | function | Callback function when the notification closes. | ### Server-Side Export ```lua 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`). ```lua 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 ```lua exports.usin_notify:notify({ type = 'success', title = 'Job Done', description = 'You have successfully delivered the package.' }) ``` ### Advanced Notification with Callback ```lua 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 ```lua -- 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: ```lua 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: ```lua 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: ```lua 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: {% embed url="" fullWidth="false" %} ### Images:
*** *Created with ❤️ by USIN*