> For the complete documentation index, see [llms.txt](https://codeforge.gitbook.io/codeforge/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codeforge.gitbook.io/codeforge/sleek-series/sleek-notify.md).

# SLEEK NOTIFY

{% embed url="<https://youtu.be/kp3Ry1EbY00?si=KBUi-POUhypZmVk4>" %}

**INSTALLATION GUIDE**

1. Download from [KEYMASTER ](https://keymaster.fivem.net/login?return_url=/asset-grants)and Unzip the **`forge-notify.pack.zip`** and place this folder in your server's resource folder.
2. Add the resource to your server start config: **`ensure forge-notify`**`,`the name of the folder must not be changed or the resource will not function correctly. It must be started in the first positions
3. Delete or disable other Notify you have, such as QB or ESX.&#x20;
4. You will need to add the export of our notification script in your core or in the script you want to use notifications (If you want to add it in the core, follow the guide below).
5. Reboot the entire server with the forge script well ensured in your server.cfg.

**EXPORT**

The export to display notifications in any script is this:

```lua
exports['forge-notify']:ShowNotification(type, message, length)
```

* **`type:`** The variables for exports, i.e. the types of notifications are:
  * *announcement*
  * *success*
  * *info*
  * *error*
  * *bank*
  * *call*
  * *sms*
* **`message:`** The text to be displayed. It can be of any length you want.
* **`length:`** The time the notifications will be on screen. This is the milliseconds.

**INSTALL IT IN ESX OR QB**

{% tabs %}
{% tab title="ESX" %}
You must go to the following **location** and change the existing code to the new one.

`es_extended` **>** `client` **>** `functions.lua` **>** `ShowNotification`

```lua
function ESX.ShowNotification(message, type, length)
    exports['forge-notify']:ShowNotification(type, message, 5000)
end
```

{% endtab %}

{% tab title="QB Core" %}
You must go to the following **location** and change the existing code to the new one.

`qb-core` > `config`

```lua
QBConfig.Notify.VariantDefinitions = {
    success = {
        classes = 'success',
        icon = 'task_alt'
    },
    primary = {
        classes = 'info',
        icon = 'notifications'
    },
    info = {
        classes = 'info',
        icon = 'notifications'
    },
    error = {
        classes = 'error',
        icon = 'warning'
    },
    announcement = {
        classes = 'announcement',
        icon = 'local_police'
    },
    bank = {
        classes = 'bank',
        icon = 'fas fa-ambulance'
    },
    call = {
        classes = 'call',
        icon = 'fas fa-ambulance'
    },
    sms = {
        classes = 'sms',
        icon = 'fas fa-ambulance'
    }
}
```

You must go to the following **location** and change the existing code to the new one.

`qb-core` > `client` > `functions.lua` > `QBCore.Functions.Notify`

```lua
function QBCore.Functions.Notify(text, texttype, length)
  if texttype == nil then
    exports['forge-notify']:ShowNotification('info', text, 5000)
else
    exports['forge-notify']:ShowNotification(texttype, text, 5000)
   end
end 
```

{% endtab %}
{% endtabs %}

**CONFIG**

The following will explain all the settings, one of the most important things that I recommend you spend a few minutes to understand in order to offer your users the best possible experience.

{% tabs %}
{% tab title="CONFIG" %}
{% code lineNumbers="true" %}

````lua
Config = { }

Config.Command = "notify" -- This is the command that will open the Settings Panel, where the player will choose where the notifications appear

Config.Types = { -- Here you can modify each type of notification, the colours and the icon. You can leave this as it is if you want
    success = { -- This is the type of notification
        highlightColor = "#31d472", -- The colour of the notification. You can choose the one you want here: https://htmlcolorcodes.com/
        size = "medium", -- The size can be medium, small or large. You can make each type of notification a different size
        icon = { -- Here you enter the symbol you want to use. You can choose the one you want here: https://fontawesome.com/v4/icons/
            "fa", 
            "fa-check-circle"
        }
    },
    info = {
        highlightColor = "#ffc700",
        size = "medium",
        icon = {
            "fa",
            "fa-exclamation-circle"
        }
    },
    announcement = {
        highlightColor = "#31afd4",
        size = "medium",
        icon = {
            "fa",
            "fa-bullhorn"
        }
    },
    error = {
        highlightColor = "#ff2e00",
        size = "medium",
        icon = {
            "fa",
            "fa-exclamation-circle"
        }
    },
    bank = {
        highlightColor = "#cd05ff",
        size = "medium",
        icon = {
            "fa",
            "fa-university"
        }
    },
    call = {
        highlightColor = "#ff7d05",
        size = "medium",
        icon = {
            "fa",
            "fa-phone"
        }
    },
    sms = {
        highlightColor = "#ff7d05",
        size = "medium",
        icon = {
            "fa",
            "fa-commenting-o"
        }
    }
}
```
````

{% endcode %}

{% endtab %}
{% endtabs %}

{% hint style="success" %}
**If you want to edit the aesthetics or design. You have the HTML open so you can modify the style and everything as you want.**

The script is **RESPONSIVE** for all resolutions as well.
{% endhint %}