# Notifications

[**Download Here**](https://github.com/dsheedes/cd_notifications/releases/tag/v1.0.0)

[**FiveM Forums Post**](https://forum.cfx.re/t/codesign-notifications/5368446)

#### Translate

* [Click here to translate this page.](https://docs-codesign-pro.translate.goog/free-scripts/notification?_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=en-GB&_x_tr_pto=nui)
* [How do I change language?](https://gyazo.com/38606313ac9a7c290dc2c72b6793bde6)

## INSTALLATION GUIDE

### Step 0 - First Steps

{% hint style="warning" %}
**1.** Download your resource from Our Website or GitHub. &#x20;

**2.** Unzip the `cd_notifications.zip` folder and place this folder in your server's resource folder.

**3.** Add the resource to your server start config (server.cfg): `ensure cd_notifications`.
{% endhint %}

### Step 1 - Configure Resource

{% hint style="warning" %}
You **MUST** read all configurable options inside the **`[cd_notifications/configs/config.lua]`** file and configure them to suit your server's needs. Please read the [”commented out help text”](https://i.imgur.com/QCja8UZ.png) at the end of each line so you can understand what each config option does.
{% endhint %}

### Step 2 - Adding Notifications

{% hint style="warning" %}
**Basic Notification**

> **What are basic notifications?**
>
> Basic notifications require only the essential data to be filled in.

{% tabs %}
{% tab title="client-side to client-side" %}
{% code lineNumbers="true" fullWidth="true" %}

```lua
TriggerEvent('cd_notifications:Add', {
    title = 'Title', 
    message = 'Message',
    type = 'success', --'success | warning | error | info | dark'.
    options = {
        duration = 5, --(in seconds) How long should the notification last?
    }
})
```

{% endcode %}
{% endtab %}

{% tab title="server-side to client-side" %}
{% code lineNumbers="true" fullWidth="true" %}

```lua
TriggerClientEvent('cd_notifications:Add', source, {
    title = 'Title', 
    message = 'Message',
    type = 'success', --'success | warning | error | info | dark'.
    options = {
        duration = 5, --(in seconds) How long should the notification last?
    }
})
```

{% endcode %}
{% endtab %}
{% endtabs %}
{% endhint %}

{% hint style="warning" %}
**Intermediate Notification**

> **What are intermediate notifications?**
>
> Intermediate notifications provide more customizability, but for newer developers, they can be confusing.

{% tabs %}
{% tab title="client-side to client-side" %}
{% code lineNumbers="true" fullWidth="true" %}

```lua
TriggerEvent('cd_notifications:Add', {
    title = 'Title', 
    message = 'Message',
    type = 'success', --'success | warning | error | info | dark'.
    options = {
        duration = 5, --(in seconds) How long should the notification last?
        use_progress = true, --Do you want a progress bar on the notification?
        stack = true, --Do you want this notification to stack?
        sound = 'notification.ogg', --Choose a sound file name from the [sound] folder.
        icon = 'fas fa-bell', --The icon displayed on the notification.
        use_html = true, --Do you want to allow the use of HTML in the title and message?
        fields = {
            use_icon = true, --Do you want the icon to be visible on the notification?
            use_title = true, --Do you want the title to be visible on the notification?
            use_message = true, --Do you want the message to be visible on the notification?
        },
    }
})
```

{% endcode %}
{% endtab %}

{% tab title="server-side to client-side" %}
{% code lineNumbers="true" fullWidth="true" %}

```lua
TriggerClientEvent('cd_notifications:Add', source, {
    title = 'Title', 
    message = 'Message',
    type = 'success', --'success | warning | error | info | dark'.
    options = {
        duration = 5, --(in seconds) How long should the notification last?
        use_progress = true, --Do you want a progress bar on the notification?
        stack = true, --Do you want this notification to stack?
        sound = 'notification.ogg', --Choose a sound file name from the [sound] folder.
        icon = 'fas fa-bell', --The icon displayed on the notification.
        use_html = true, --Do you want to allow the use of HTML in the title and message?
        fields = {
            use_icon = true, --Do you want the icon to be visible on the notification?
            use_title = true, --Do you want the title to be visible on the notification?
            use_message = true, --Do you want the message to be visible on the notification?
        },
    }
})
```

{% endcode %}
{% endtab %}
{% endtabs %}
{% endhint %}

{% hint style="warning" %}
**Advanced Notification**

> **What are advanced notifications?**
>
> Advanced notifications provide complete customizability, but only experienced developers should use these.

{% tabs %}
{% tab title="client-side to client-side" %}
{% code lineNumbers="true" fullWidth="true" %}

```lua
TriggerEvent('cd_notifications:Add', {
    title = 'Title', 
    message = 'Message',
    type = 'success', --'success | warning | error | info | dark'.
    options = {
        duration = 5, --(in seconds) How long should the notification last?
        use_progress = true, --Do you want a progress bar on the notification?
        stack = true, --Do you want this notification to stack?
        sound = 'notification.ogg', --Choose a sound file name from the [sound] folder.
        icon = 'fas fa-bell', --The icon displayed on the notification.
        use_html = true, --Do you want to allow the use of HTML in the title and message?
        fields = {
            use_icon = true, --Do you want the icon to be visible on the notification?
            use_title = true, --Do you want the title to be visible on the notification?
            use_message = true, --Do you want the message to be visible on the notification?
        },

        style = { --You can customise the notification style in CSS.
                class = 'string | JSON',
                background = 'rgb(255,0,0)',
        
                title = 'color: #333333; font-size: 18px; font-weight: bold',
        
                message = 'color: white; font-size:16px',
                
                icon = 'font-size:16px',
        }
    }
})
```

{% endcode %}
{% endtab %}

{% tab title="server-side to client-side" %}
{% code lineNumbers="true" fullWidth="true" %}

```lua
TriggerClientEvent('cd_notifications:Add', source, {
    title = 'Title', 
    message = 'Message',
    type = 'success', --'success | warning | error | info | dark'.
    options = {
        duration = 5, --(in seconds) How long should the notification last?
        use_progress = true, --Do you want a progress bar on the notification?
        stack = true, --Do you want this notification to stack?
        sound = 'notification.ogg', --Choose a sound file name from the [sound] folder.
        icon = 'fas fa-bell', --The icon displayed on the notification.
        use_html = true, --Do you want to allow the use of HTML in the title and message?
        fields = {
            use_icon = true, --Do you want the icon to be visible on the notification?
            use_title = true, --Do you want the title to be visible on the notification?
            use_message = true, --Do you want the message to be visible on the notification?
        },

        on_create = { --When a notification is created, you have the ability to send data to a nui callback.
            location = {
                resource = 'cd_garage', --The resource name where the nui callback is located.
                destination = 'notification_created', --The nui callback name.
            },
            data = 'console.log("Notification created.")' --The data that's been sent to the nui callback in any script.
        },

        on_click = { --When a notification is clicked, you have the ability to send data to a nui callback in any script.
            location = {
                resource = 'cd_garage', --The resource name where the nui callback is located.
                destination = 'notification_clicked', --The nui callback name.
            },
            data = 'console.log("Notification clicked.")' --The data thats been sent to the nui callback.
        },

        style = { --You can customise the notification style in CSS.
            notification = {
                class = 'string',
                border = 'string',
                background = 'string',
        
                title = {
                    title_color = 'string',
                    size = 'string'
                },
        
                message = {
                    message_color = 'string',
                    size = string
                },
                
                icon = {
                    fill = 'string',
                    size = 'string',
                },
            },
            stack = {
                primary_color = 'string',
                secondary_color = 'string' 
            }
        }
    }
})
```

{% endcode %}
{% endtab %}
{% endtabs %}
{% endhint %}

## INFORMATION

### Chat Commands

These chat commands can be renamed and/or disabled in the [Keys and Commands](https://i.imgur.com/bTvuXLZ.png) section of the `[configs/config.lua]`.

The exact usage for each command will be displayed in the chat suggestions when using the commands in-game.

| Command              | Description                                                      |
| -------------------- | ---------------------------------------------------------------- |
| **`/notifsettings`** | Open the notification's settings UI.                             |
| **`/notif_test`**    | (Test Command) This is a test command to test the notifications. |

### Events

These events are completely optional; you can use them if needed.

{% tabs %}
{% tab title="client-side to client-side" %}
**Remove a Notification**

{% code title="The 1st argument \[id] is the unique id for that notification." %}

```lua
TriggerEvent('cd_notifications:Remove', id)
```

{% endcode %}

**Show Notifications**

{% code title="Allows notifications to be displayed on your screen. This is to be used after you disable them." %}

```lua
TriggerEvent('cd_notifications:ShowNotifications')
```

{% endcode %}

**Hide Notifications**

{% code title="Disables notifications from being displayed on your screen. This can be useful for cutscenes or minigames." %}

```lua
TriggerEvent('cd_notifications:HideNotifications')
```

{% endcode %}

**Show Settings UI**

{% code title="Opens the notification's settings UI." %}

```lua
TriggerEvent('cd_notifications:ShowSettings')
```

{% endcode %}

**Hide Settings UI**

{% code title="Hides the notification's settings UI." %}

```lua
TriggerEvent('cd_notifications:HideSettings')
```

{% endcode %}
{% endtab %}

{% tab title="server-side to client-side" %}
**Remove a Notification**

{% code title="The 1st argument \[id] is the unique id for that notification." %}

```lua
TriggerClientEvent('cd_notifications:Remove', source, id)
```

{% endcode %}

**Show Notifications**

{% code title="Allows notifications to be displayed on your screen. This is to be used after you disable them." %}

```lua
TriggerClientEvent('cd_notifications:ShowNotifications', source)
```

{% endcode %}

**Hide Notifications**

{% code title="Disables notifications from being displayed on your screen. This can be useful for cutscenes or minigames." %}

```lua
TriggerClientEvent('cd_notifications:HideNotifications', source)
```

{% endcode %}

**Show Settings UI**

{% code title="Opens the notification's settings UI." %}

```lua
TriggerClientEvent('cd_notifications:ShowSettings', source)
```

{% endcode %}

**Hide Settings UI**

{% code title="Hides the notification's settings UI." %}

```lua
TriggerClientEvent('cd_notifications:HideSettings', source)
```

{% endcode %}
{% endtab %}
{% endtabs %}

## COMMON ISSUES

Please check out our [**Troubleshooting Guide**](https://docs.codesign.pro/coding-information/self-debugging#troubleshooting) before contacting our support.

🔔 <mark style="color:red;">**Folder Name**</mark> Make sure the name of the folder is `cd_notifications`.

## ERROR CODES

If you see an error code not listed below, please open a script support ticket in the [Codesign Discord](https://discord.gg/codesign).

{% tabs %}
{% tab title="Server" %}
N/A
{% endtab %}

{% tab title="Client" %}
N/A
{% endtab %}
{% endtabs %}

## CHANGELOG

> **Files Changed**
>
> Not every update requires you to replace the whole folder. We do this because we understand it's a pain to redo the configs for every update.

* **All Files -** This means you should delete your old `cd_notifications` folder, download and add in the latest version, reconfigure the configs folder and restart your server.
* **All Files Except config.lua -** This means you should do all of the above (in the All Files section) but additionally **make a backup of the `config.lua`** file and replace the new config.lua file with the one you made a backup of.
* **Specific Files -** This means you can copy and paste the **SPECIFIC** new files over the old ones and restart the server.

> **Update Type**
>
> On rare occasions, you are forced to update to the latest version. Mostly due to authentication updates where the old versions will no longer work.

* **Mandatory -** This means you MUST update to this new version, or the old versions will no longer work.
* **Optional -** This means it's completely your choice whether you wish to update to the latest version. But we do not offer support for old versions for obvious reasons; they are old.

{% hint style="warning" %}
**Skipping Updates**

If you are attempting to update to the latest version but have skipped previous updates, you should update all files just to be safe. For example., let's say you are currently on v4.0.1, you did not update when v4.0.2 was released, and now v4.0.3 is released, and you want to update; you should always use the “All Files” update method.
{% endhint %}

{% tabs %}
{% tab title="v1.0.0" %}

### 01/06/2023

**Files Changed**:&#x20;

* [x] All Files
* [ ] All Files Except config.lua
* [ ] Specific Files

**Update Type**:

* [x] Mandatory
* [ ] Optional

**Changelog:**

{% hint style="success" %}
&#x20;**STATUS**

* **Development Stage:** COMPLETE
* **Alpha Test Stage:** IN-PROGRESS
* **Beta Test Stage:** NOT STARTED
  {% endhint %}
  {% endtab %}
  {% endtabs %}


---

# 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://docs.codesign.pro/free-scripts/notifications.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.
