# Client Exports

### Notification

{% code fullWidth="false" %}

```lua
--- @param data {table}
---  @field title {string?} Title. (Optional)
---  @field description {string?} Description. (Optional)
---  @field time {number?} Display time in milliseconds. (Optional)
---  @field color {string?} Notification color in HEX format, such as "#34ebe8". (Optional)
---  @field icon {string?} An icon class from Font Awesome, such as “fa-solid fa-check”. (Optional)
---  @field image {string?} URL of the image displayed. (Optional)
---  @field progressBar {string?} Progress bar type: "linear", "rounded", "rounded-icon". (Optional)
---  @field preset {string?} Name of the predefined preset from Config.NotificationsPresets. (Optional)
---  @field soundFile {string?} The name of the audio file, such as "notification-1.mp3". (Optional)
---  @field soundVolume {number?} Sound volume (range: 0-100). (Optional)
---  @field soundNative {table?} An array of native sound data that takes priority over soundFile. (Optional)
---  @field customCSS {table?} CSS style board for custom notification design. (Optional)
---    @field customCSS.icon {table} Icon styling, such as color or scaling.
---    @field customCSS.title {table} Title styling, such as font or size.
---    @field customCSS.description {table} Stylization of the description, such as font thickness.
---    @field customCSS.background {table} Background styling, such as color and border.
---    @field customCSS.background_glow {table} Styling the background glow effect.
exports['vms_notifyv2']:Notification(data)
```

{% endcode %}

{% hint style="info" %}
Parameter `soundNative` requires 4 data because it runs on a native FiveM base [`PlaySoundFrontend`](https://docs.fivem.net/natives/?_0x67C540AA08E4A6F5) you can use [**dev\_nativesounds**](https://github.com/PainedPsyche/dev_nativesounds) created by [PainedPsyche](https://github.com/PainedPsyche/dev_nativesounds/commits?author=PainedPsyche) to search for sounds.

Class `customCSS` works on the basis of default data from the CSS language.
{% endhint %}

<details>

<summary>Explanation</summary>

#### The use of parameters

```lua
exports['vms_notifyv2']:Notification({
    title = "example",
    description = "example",
    time = 4000, -- Miliseconds
    color = "#34ebe8", -- Hex color
    icon = "fa-solid fa-check", -- Font Awesome (https://fontawesome.com/search)
    image = "https://i.ibb.co/YdXQKY8/500x500.png",
    progressBar = "linear",
    preset = "ios",
    soundFile = "notification-1.mp3",
    soundVolume = 30,
    soundNative = {-1, 'Checkpoint_Hit', 'GTAO_FM_Events_Soundset', 0}, -- This parameter has priority over soundFile
    customCSS = {
        icon = {
            ['color'] = 'white',
            ['scale'] = '1.15'
        },
        title = {},
        description = {
            ['font-weight'] = '500'
        },
        background = {
            ['background'] = "{CURRENT_COLOR}",
            ['border'] = 'none'
        },
        background_glow = {},
    },
})
```

</details>

<details>

<summary>A simple example of use</summary>

```lua
exports['vms_notifyv2']:Notification({
    title = "SHOP",
    description = "You just bought bread.",
    time = 4000,
    color = "#34ebe8",
    icon = "fa-solid fa-check",
})
```

</details>

***

### TopNotification

{% code fullWidth="false" %}

```lua
--- @param data {table}
---  @field title {string?} Title. (Optional)
---  @field description {string?} Description. (Optional)
---  @field time {number?} Display time in milliseconds. (Optional)
---  @field color {string?} Notification color in HEX format, such as "#34ebe8". (Optional)
---  @field icon {string?} An icon class from Font Awesome, such as “fa-solid fa-check”. (Optional)
---  @field image {string?} URL of the image displayed. (Optional)
---  @field progressBar {string?} Progress bar type: "linear" or nil. (Optional)
---  @field soundFile {string?} The name of the audio file, such as "notification-1.mp3". (Optional)
---  @field soundVolume {number?} Sound volume (range: 0-100). (Optional)
---  @field soundNative {table?} An array of native sound data that takes priority over soundFile. (Optional)
exports['vms_notifyv2']:TopNotification(data)
```

{% endcode %}

<details>

<summary>Explanation</summary>

#### The use of parameters

```lua
exports['vms_notifyv2']:TopNotification({
    title = "example",
    description = "example",
    time = 20000, -- Miliseconds
    color = "#34ebe8", -- Hex color
    icon = "fa-solid fa-check", -- Font Awesome (https://fontawesome.com/search)
    image = "https://i.ibb.co/YdXQKY8/500x500.png",
    progressBar = "linear",
    soundFile = "notification-1.mp3",
    soundVolume = 30,
    soundNative = {-1, 'Checkpoint_Hit', 'GTAO_FM_Events_Soundset', 0}, -- This parameter has priority over soundFile
})
```

</details>

<details>

<summary>A simple example of use</summary>

```lua
exports['vms_notifyv2']:TopNotification({
    title = "ANNOUNCEMENT",
    description = "In ~y~30 minutes~s~ the event race will begin.",
    time = 15000,
    color = "#34ebe8",
    icon = "fa-solid fa-check",
})
```

</details>

***

### Question

```lua
--- @param data {table}
---  @field title {string?} Title. (Optional)
---  @field description {string?} Description. (Optional)
---  @field color {string?} Notification color in HEX format, such as "#34ebe8". (Optional)
---  @field icon {string?} An icon class from Font Awesome, such as “fa-solid fa-check”. (Optional)
---  @field image {string?} URL of the image displayed. (Optional)
---  @field preset {string?} Name of the predefined preset from Config.QuestionsPresets. (Optional)
---  @field soundFile {string?} The name of the audio file, such as "notification-1.mp3". (Optional)
---  @field soundVolume {number?} Sound volume (range: 0-100). (Optional)
---  @field soundNative {table?} An array of native sound data that takes priority over soundFile. (Optional)
---  @field customCSS {table?} CSS style board for custom notification design. (Optional)
---    @field customCSS.icon {table} Icon styling, such as color or scaling.
---    @field customCSS.title {table} Title styling, such as font or size.
---    @field customCSS.description {table} Stylization of the description, such as font thickness.
---    @field customCSS.background {table} Background styling, such as color and border.
---    @field customCSS.background_glow {table} Styling the background glow effect.
--- @param keys {table?}
local question = exports['vms_notifyv2']:Question(data, keys)
```

{% hint style="info" %}
You don't need to enter the `keys` parameter - if it is not available, the default keys from `Config.DefaultQuestionKeys` will be activated, i.e. Y for accept, N for reject.
{% endhint %}

<details>

<summary>Explanation</summary>

#### The use of parameters

```lua
local question = exports['vms_notifyv2']:Question({
    title = "example",
    description = "example",
    color = "#673feb",
    icon = "fa-solid fa-circle-question",
    image = "https://i.ibb.co/YdXQKY8/500x500.png",
    preset = "transparent",
    soundFile = "notification_3.mp3",
    soundVolume = 50,
    soundNative = {-1, 'Checkpoint_Hit', 'GTAO_FM_Events_Soundset', 0},
    customCSS = {
        icon = {
            ['scale'] = "1.08",
        },
        title = {
            ['text-shadow'] = "none",
        },
        description = {
            ['text-shadow'] = "none",
        },
        background = {},
        background_glow = {},
    },
}, {
    {
        displayKey = "Y",
        description = "Accept",
        control = 246
    },
    {
        displayKey = "N",
        description = "Reject",
        control = 306
    },
    {
        displayKey = "X",
        description = "I don't know",
        control = 73
    }
})

Citizen.Await(question) -- IT MUST BE HERE

if question == "246" then -- export returns clicked control as string!
    print('PLAYER ACCEPTED')
elseif question == "73" then
    print('THE PLAYER DOES NOT KNOW.')
else
    print('PLAYER REJECTED')
end
```

</details>

<details>

<summary>A simple example of use</summary>

```lua
local question = exports['vms_notifyv2']:Question({
    title = "Enter to house",
    description = "Do you want to enter the house?",
    color = "#673feb",
    icon = "fa-solid fa-circle-question",
}, {
    {
        displayKey = "Y",
        description = "Accept",
        control = 246
    },
    {
        displayKey = "N",
        description = "Reject",
        control = 306
    },
    {
        displayKey = "X",
        description = "I don't know",
        control = 73
    }
})

Citizen.Await(question) -- IT MUST BE HERE

if question == "246" then -- export returns clicked control as string!
    print('PLAYER ACCEPTED')
elseif question == "73" then
    print('THE PLAYER DOES NOT KNOW.')
else
    print('PLAYER REJECTED')
end
```

</details>

***

### ShowTextUI

{% code fullWidth="false" %}

```lua
--- @param message {string} Message
--- @param data {table?}
---  @field preset {string?} Name of the predefined preset from Config.QuestionsPresets. (Optional)
---  @field soundFile {string?} The name of the audio file, such as "notification-1.mp3". (Optional)
---  @field soundVolume {number?} Sound volume (range: 0-100). (Optional)
---  @field soundNative {table?} An array of native sound data that takes priority over soundFile. (Optional)
---  @field customCSS {table?} CSS style board for custom notification design. (Optional)
---    @field customCSS.key {table} Key styling, such as font or size.
---    @field customCSS.message {table} Stylization of the message, such as font thickness.
---    @field customCSS.background {table} Background styling, such as color and border.
exports['vms_notifyv2']:ShowTextUI(message, data)
```

{% endcode %}

<details>

<summary>Explanation</summary>

#### The use of parameters

```lua
exports['vms_notifyv2']:ShowTextUI("message", {
    soundFile = "notification-5.mp3",
    soundVolume = 30,
    soundNative = {-1, 'Checkpoint_Hit', 'GTAO_FM_Events_Soundset', 0}, -- This parameter has priority over soundFile
    customCSS = {
        key = {
            ['font-weight'] = '500'
        },
        message = {
            ['font-weight'] = '500'
        },
        background = {
            ['background'] = "red",
            ['border'] = 'none'
        }
    },
})
```

</details>

<details>

<summary>Example of use in your scripts</summary>

```lua
Citizen.CreateThread(function()
    local inRange = false
    local shown = false
    local letSleep = true
    while true do
        letSleep = true
        inRange = false
        local myCoords = GetEntityCoords(PlayerPedId())
        local coords = vector3(0.0, 0.0, 0.0)
        local distance = #(myCoords - coords)
        if distance <= 10.0 then
            letSleep = false
            if distance <= 2.5 then
                inRange = "Press ~INPUT_CONTEXT~ to enter"
                if IsControlJustPressed(0, 38) then
                    -- your action
                end
            end
        end
        if inRange and not shown then
            shown = true
            exports['vms_notifyv2']:ShowTextUI(inRange)
        elseif not inRange and shown then
            shown = false
            CL.TextUI.Close()
        end
        Citizen.Wait(letSleep and 1000 or 1)
    end
end)
```

</details>

***

### UpdateTextUI

```lua
--- @param message {string} Message
exports['vms_notifyv2']:UpdateTextUI(message)
```

***

### HideTextUI

```lua
exports['vms_notifyv2']:HideTextUI()
```


---

# 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.vames-store.com/assets/vms_notifyv2/developer-api/client-exports.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.