> For the complete documentation index, see [llms.txt](https://dynasty-store.gitbook.io/home/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dynasty-store.gitbook.io/home/products/ui/dynasty-notify/user-guide.md).

# User guide

## 1. Using the notification

You can use the notification as showed in the example bellow:

<pre class="language-lua"><code class="lang-lua"><strong>exports['dynasty_notify']:Notify({
</strong>	icon = "fas fa-check",
	iconColor = "#09E85E",
	title = "SUCCESS",
	message = "Default success message for notification.",
	progressBarColor = "#09E85E",
	sound = "info.mp3",
})
</code></pre>

## 2. Default notifications

In case you use a notification and don't fill any of the parameters, it will be filled with the value stated in the Config.file. For example if the parameter `boxColor` is not used, it will be filled with the value `2B2D42` in this case.

```lua
Config.DefaultNotify = {
    boxColor = "#2B2D42",
    icon = "fas fa-info-circle",
    iconColor = "#2f83ff",
    iconSize = "20px",
    iconShake = false,
    title = "ALERT",
    titleColor = "#F8E5EE",
    titleFontSize = "15px",
    message = "Example notification message",
    messageColor = "#C4C6E7",
    messageFontSize = "13px",
    image = false,
    progressBarColor = "#2f83ff",
    progressBarHeight = "4px",
    sound = "success.mp3",
    soundVolume = 0.4,
    counterColor = "#dc3545",
    counterFontSize = "10px",
    time = 5000
}
```

## 3. Notification configuration

### 3.1 Box color

```lua
boxColor = "#2B2D42"
```

In this case the color of the box is `#2B2D42`

{% embed url="<https://htmlcolorcodes.com/>" %}
Example of where you can get colors
{% endembed %}

### 3.2 Icon

```lua
icon = "fas fa-info-circle"
```

In this case the icon used is `fas fa-info-circle.` You can find more icons in:

{% embed url="<https://fontawesome.com/icons>" %}

### 3.3 Icon color

```lua
iconColor = "#2f83ff"
```

In this case the color of the box is `#2f83ff"`

### 3.4 Icon size

```lua
iconSize = "20px"
```

In this case the size of the icon is `20px`

### 3.5 Icon shake effect

{% hint style="info" %}
Adds a shaking effect to the icon. `True/False` value
{% endhint %}

```lua
iconShake = true
```

In this case the shaking effect is used

### 3.6 Title of the notification

```lua
title = "ALERT"
```

In this case the title of the notification is `ALERT`

### 3.7 Title color

```lua
titleColor = "#F8E5EE"
```

In this case the color of the title is `#F8E5EE`

### 3.8 Title font size

```lua
titleFontSize = "15px"
```

In this case the size of the title is `15px`

### 3.9 Message of the notification

```lua
message = "Example notification message"
```

In this case the message of the notification is `Example notification message`

### 3.10 Color of the message

```lua
 messageColor = "#C4C6E7"
```

In this case the color of the message is `#C4C6E7`

### 3.11 Message font size

```lua
messageFontSize = "13px"
```

In this case the size of the message is `13px`

### 3.12 Image or GIF

{% hint style="info" %}
Link of an image or a GIF that appears in the notification. If you don't want to use this feature use the value `false`.
{% endhint %}

```lua
image = "https://steamuserimages-a.akamaihd.net/ugc/98348089947795110/E8D6A7F620BC59003EAA3178C5B597B64753B40D/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false"
```

In this case the GIF used in the notification is the following:

{% embed url="<https://steamuserimages-a.akamaihd.net/ugc/98348089947795110/E8D6A7F620BC59003EAA3178C5B597B64753B40D/?ima=fit&imcolor=%23000000&imh=5000&impolicy=Letterbox&imw=5000&letterbox=false>" %}

### 3.13 Progress bar color

```lua
progressBarColor = "#2f83ff"
```

In this case the color of the progress bar is `#2f83ff`

### 3.14 Progress bar height

```lua
progressBarHeight = "4px"
```

In this case the height of the progress bar is `4px`

### 3.15 Notification sound

```lua
sound = "success.mp3"
```

In this case the sound used is the file `success.mp3`

### 3.16 Sound volume

{% hint style="info" %}
The volume must be between the values `0.0` and `1.0`.
{% endhint %}

```lua
soundVolume = 0.4
```

In this case the volume of the sound is `0.4`

### 3.17 Counter color

```lua
counterColor = "#dc3545"
```

In this case the color used is `#dc3545`

### 3.18 Counter font size

```lua
counterFontSize = "10px"
```

In this case the font size is `10px`

### 3.19 Time of the notification

{% hint style="info" %}
The time of the notification has to be in ms (miliseconds)
{% endhint %}

```lua
time = 5000
```

In this case the time is `5000`  (5 seconds)

### 3.20 Adding transparency to the notification

```
#2B2D42
```

* `FF` - 0% Transparent
* `CC` - 20% Transparent
* `80` - 50% Transparent
* `33` - 80% Transparent
* `00` - 100% Transparent

Adding those values at the end of the hex color adds different levels of transparency. For example 80% transparency would be `#2B2D4233`

## Example of a notification with those parameters:&#x20;

{% embed url="<https://giphy.com/gifs/1tnFfHFWn6rICO1iUA>" %}

## 4.Send notification server side

To send a notification through server side you have to trigger the client event '`dynasty_notify:Notify'` with its parameters

<pre class="language-lua"><code class="lang-lua">TriggerClientEvent('dynasty_notify:Notify', source, {
    title = "Alert",
    message = "Serverside notification example",
    boxColor = "#000",
    icon = "fa circle-exclamation",
<strong>})
</strong></code></pre>

{% hint style="info" %}
You will need to use source in case you want to send the notification only to the client which sent the event or -1 to trigger the event for all the players.
{% endhint %}

## 5.Replace QBCore notifications for Dynasty Notifications

To replace QBCore notifications you need to go to `qb-core/client/functions.lua` and replace the notify function as the example showed below

```lua
function QBCore.Functions.Notify(text, texttype, length, icon) 
local message = { 
    action = 'notify', 
    type = texttype or 'primary', 
    length = length or 5000, }
if type(text) == 'table' then
    message.text = text.text or 'Placeholder'
    message.caption = text.caption or 'Placeholder'
else
    message.text = text
end
if icon then
    message.icon = icon
end
    SendNUIMessage(message)
end
```

Replace the function for this one:

```lua
function QBCore.Functions.Notify(text, texttype, length, icon)
    if texttype == "success" then
        exports['dynasty_notify']:Notify({
            message = text,
            boxColor = "#49AF72",
            icon = "fa-solid fa-clipboard-check",
            iconSize = "20px",
            iconColor = "#FFFFFF",
            title = "Success",
            titleColor = "#FFFFFF",
            messageColor = "#FFFFFF",
        })
    elseif texttype == "warning" then
-- same here
    end
end
```

{% hint style="info" %}
Here is an example of a success notification, you should do the same for the other types
{% endhint %}

## 6.Replace ESX notifications for Dynasty Notifications

To replace ESX notifications you need to go to `esx_notify/Notify.lua` and replace the notify function as the example showed below

```lua
local function Notify(notificatonType, length, message)

    if Debug then
        print("1 ".. tostring(notificatonType))
        print("2 "..tostring(length))
        print("3 "..message)
    end

    if type(notificatonType) ~= "string" then
        notificatonType = "info"
    end

    if type(length) ~= "number" then
        length = 3000
    end

    if Debug then
        print("4 ".. tostring(notificatonType))
        print("5 "..tostring(length))
        print("6 "..message)
    end

    SendNuiMessage(json.encode({
        type = notificatonType or "info",
        length = length or 3000,
        message = message or "ESX-Notify"
    }))
end
```

Replace the function for this one:

```lua
local function Notify(notificatonType, length, message)
    if texttype == "success" then
        exports['dynasty_notify']:Notify({
            message = text,
            boxColor = "#49AF72",
            icon = "fa-solid fa-clipboard-check",
            iconSize = "20px",
            iconColor = "#FFFFFF",
            title = "Success",
            titleColor = "#FFFFFF",
            messageColor = "#FFFFFF",
        })
    elseif texttype == "warning" then
-- same here
    end
end
```

{% hint style="info" %}
Here is an example of a success notification, you should do the same for the other types
{% endhint %}

## 7.Additional notification examples

```lua
exports['dynasty_notify']:Notify({
    icon = "fas fa-bell",
    iconColor = "#6DAEDB",
    title = "ALERT",
    message = "Default alert message for notification.",
    progressBarColor = "#6DAEDB",
    sound = "info.mp3",
})
exports['dynasty_notify']:Notify({
    icon = "fas fa-triangle-exclamation",
    iconColor = "#F2AF29",
    title = "WARNING",
    message = "Default warning message for notification.",
    progressBarColor = "#F2AF29",
    sound = "warning.mp3",
})
exports['dynasty_notify']:Notify({
    icon = "fas fa-times-circle",
    iconColor = "#dc3545",
    title = "ERROR",
    message = "Default error message for notification.",
    progressBarColor = "#dc3545",
    sound = "error.mp3",
})
exports['dynasty_notify']:Notify({
    icon = "fas fa-info-circle",
    iconColor = "#2f83ff",
    title = "INFO",
    message = "Default info message for notification.",
    progressBarColor = "#2f83ff",
    sound = "info.mp3",
}) 
```