🔔Notify

This is the installation and customize guide for Crystal Notify

Step 1: Download and Extract

Download the resource and extract the .zip file into your resources folder.

Ensure the resource by adding it to your server.cfg:

ensure crystal-notify

Alternatively, you can ensure the folder containing this resource if it’s inside a resource container.

Step 2: Configuration

Config File Overview

Below is a detailed explanation of the configuration options for Crystal Notify.

-- Configuration Settings for Crystal Notify

Config = {}

-- [Position]
-- Defines where the notification will appear on the screen. Available options include:
-- Available options are: 'top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left'
-- If no position or an invalid position is set, the default position will be 'top-right'.
Config.Position = 'top-right'

-- [AutoClose]
-- Determines how long the notification will stay on the screen before automatically closing.
-- Value is set in milliseconds (1000 ms = 1 second).
-- The minimum value is 1000 ms. If a value lower than 1000 is set, it will default to 1000 ms.
-- If no value is provided, it defaults to 5000 ms.
Config.AutoClose = 5000

-- [HideProgressBar]
-- Controls whether the progress bar is displayed in the notification.
-- Set to true to hide the progress bar. If set to false, the progress bar will be shown.
Config.HideProgressBar = true

-- IMPORTANT: If HideProgressBar is set to false, you need to customize the `progressStyle` property in the Config.NotificationsData table, because by default, the progress bar's background is set to 'transparent'.

-- [Transition]
-- Defines the animation effect used when the notification appears or disappears.
-- Available options are: 'bounce', 'slide', 'zoom', 'flip'.
-- If no transition or an invalid transition is set, the default transition will be 'slide'.
Config.Transition = 'slide'

-- [Notification Type]
-- The default notification type that will be used if none is specified in the call.
-- You can choose from the predefined types in the Config.Notifications section.
-- Example types: 'general', 'success', 'error', 'info', 'warning'
Config.Type = 'general'

-- [Debug Settings]
-- This section is used for debugging purposes. 
-- The 'command' setting defines the console command you can use to test notifications.
-- You can disable the debug feature by setting it to nil.
-- Example: Config.Debug = nil will disable the debug command.
Config.Debug = {
    command = 'testnotify'
}

-- IMPORTANT: In production, you MUST disable the debug option by setting Config.Debug to nil.

-- [Notifications Settings]
-- This table defines various notification types along with their visual appearance, icons, and progress bar styling.
-- You can customize the appearance of each notification type or add new types as needed.
-- Each notification type has the following customizable properties:

-- 1. title: The default title for the notification type. This title will only be used if no custom title is provided.

-- 2. style: The CSS properties that define the visual style of the notification. It accepts standard CSS styles, but it's recommended to modify only the defined properties (e.g., background, borderColor) for consistency.

-- 3. progressStyle: The CSS properties that define the visual style of the progress bar. You can customize properties like background to adjust the progress bar's appearance.

-- 4. iconUrl: The path to the icon image. You can use images from the local icons directory or external URLs.
Config.NotificationsData = {
    ['general'] = {
        title = 'General',
        style = {
            background = 'linear-gradient(268deg, rgba(164, 164, 164, 0.8) 0%, rgba(101, 101, 101, 0.8) 100%)',
            borderColor = 'rgba(164, 164, 164, 0.8)'
        },
        progressStyle = {
            background = 'transparent'
        },
        iconUrl = 'icons/GeneralIcon.webp'
    },
    ['success'] = {
        title = 'Success',
        style = {
            background = 'linear-gradient(268deg, rgba(146, 224, 84, 0.8) 0%, rgba(88, 164, 109, 0.8) 100%)',
            borderColor = 'rgba(146, 224, 84, 0.8)'
        },
        progressStyle = {
            background = 'transparent'
        },
        iconUrl = 'icons/SuccessIcon.webp'
    },
    ['error'] = {
        title = 'Error',
        style = {
            background = 'linear-gradient(268deg, rgba(255, 58, 65, 0.8) 0%, rgba(190, 78, 77, 0.8) 100%)',
            borderColor = 'rgba(255, 58, 65, 0.8)'
        },
        progressStyle = {
            background = 'transparent'
        },
        iconUrl = 'icons/ErrorIcon.webp'
    },
    ['info'] = {
        title = 'Info',
        style = {
            background = 'linear-gradient(268deg, rgba(58, 160, 255, 0.8) 0%, rgba(62, 58, 255, 0.8) 100%)',
            borderColor = 'rgba(58, 160, 255, 0.8)'
        },
        progressStyle = {
            background = 'transparent'
        },
        iconUrl = 'icons/InfoIcon.webp'
    },
    ['warning'] = {
        title = 'Warning',
        style = {
            background = 'linear-gradient(268deg, rgba(255, 223, 58, 0.8) 0%, rgba(255, 141, 58, 0.8) 100%)',
            borderColor = 'rgba(255, 223, 58, 0.8)'
        },
        progressStyle = {
            background = 'transparent'
        },
        iconUrl = 'icons/WarningIcon.webp'
    }
}

Step 3: Setting Up Exports and Events

The event crystal-notify:onNotification is available on both client and server sides, allowing you to trigger notifications from anywhere in your code. The event requires the following data fields:

• title: The title of the notification.

• content: The main message of the notification.

• type: The type of notification (e.g., success, error, info).

Example Usage (Client and Server Side):

local title = 'Hello World!'
local content = 'Hi, im new here'
local type = 'general'

-- Server Example
TriggerClientEvent('crystal-notify:onNotification', -1, title, content, type)

-- Client Examples
TriggerEvent('crystal-notify:onNotification', title, content, type)

On the client side, you can also use the notify export provided by the crystal-notify resource to trigger notifications directly.

exports['crystal-notify']:notify(title, content, type)

Ensure the resource crystal-notify is properly installed and running for these notifications to function.