# 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",
}) 
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dynasty-store.gitbook.io/home/products/ui/dynasty-notify/user-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.