# Setup

## Config

* Notification Panel Settings\
  \
  \- You can enable/disable the notification panel\
  \- Add a command to open the panel, or you can also open it with a key\
  \- You can customize the design mode \[Customize = Notification customize section | Position =     Notification Position Changer]\
  \
  ![](https://1034396727-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBXIsRWbAXJHBnjtE4Gxk%2Fuploads%2F2KzhGhfmsqAfio4p7Lad%2Fimage.png?alt=media\&token=b696d034-c4a3-4662-80ab-78c0ed34d50e)<br>

* Default Notification Settings\
  \
  \- You can set default notification settings, which will apply when you trigger a notification without specifying a notification type, or if that type of notification doesn't exist in CodeStudio.Type\
  \
  ![](https://1034396727-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBXIsRWbAXJHBnjtE4Gxk%2Fuploads%2FdYiDGy80d6UXxjjgy6gj%2Fimage.png?alt=media\&token=98d4e6a0-92ee-4184-9f48-ba5b3f1b3235)<br>

* Adding Standard Notification Types\
  \
  \- You can add unlimited notification types\
  \- Format: &#x20;

  <pre class="language-lua" data-full-width="false"><code class="lang-lua">['type'] = { -- Notification Type
          title = 'Default Title',    -- Add Default Title
          icon = 'icon name',         -- Add Icon Name
          iconColor = '#C53030',      -- Icon Color
  }
  </code></pre>

  \
  \- You can refer to [Fontawesome](https://fontawesome.com/icons) for icons \
  \- If you don't specify an icon or icon color, the system will automatically fetch it from CodeStudio.DefaultNotification<br>

  <figure><img src="https://1034396727-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBXIsRWbAXJHBnjtE4Gxk%2Fuploads%2FHrJNEEYg7GA5PUFJnIsl%2Fimage.png?alt=media&#x26;token=8dfa1243-bc42-402d-bc64-0fc6deeb9789" alt=""><figcaption></figcaption></figure>

* Open Notification Panel<br>

  <pre class="language-lua" data-title="Client Side Event" data-full-width="true"><code class="lang-lua">TriggerEvent('cs:notify:panel')
  </code></pre>

* Standard Notification Event<br>

  <pre class="language-lua" data-title="Export Method"><code class="lang-lua">exports['cs_notification']:Notify({
      type = 'twitter',  
      title = 'Twitter',    --Put false if you dont want title
      description = 'This is Sample Notification',
      duration = 3000
  })
  </code></pre>

  <pre class="language-lua" data-title="Server Event Method" data-full-width="true"><code class="lang-lua">TriggerClientEvent('cs:notify', source, {
      type = 'twitter',  
      title = 'Twitter',    --Put false if you dont want title
      description = 'This is Sample Notification',
      duration = 3000
  })
  </code></pre>

  <pre class="language-lua" data-title="Client Event Method"><code class="lang-lua">TriggerEvent('cs:notify', {
      type = 'twitter',  
      title = 'Twitter',    --Put false if you dont want title
      description = 'This is Sample Notification',
      duration = 3000
  })
  </code></pre>

* Custom Notification Event<br>

  ```lua
  TriggerEvent('cs:notify', {
      type = 'facebook',
      title = 'Facebook',
      description = 'This is Customised Notification',
      duration = 3000,
      style = {
          backColor = '#3a6ecf',
          textColor = "#fff"
      }
  })
  ```

## Setup Guide Example for QBCore and ESX

* For QB: Replace **QBCore.Functions.Notify** with this  :arrow\_down:<br>

  ```lua
  function QBCore.Functions.Notify(text, texttype, length)
      TriggerEvent('cs:notify', {
          type = texttype,
          title = false,
          description = text,
          duration = length
      })
  end
  ```

* For ESX: Replace **ESX.ShowNotification** with this  :arrow\_down:<br>

  ```lua
  function ESX.ShowNotification(message, type, length)
      TriggerEvent('cs:notify', {
          type = type,
          title = false,
          description = message,
          duration = length
      })
  end
  ```


---

# 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://codestudio5m.gitbook.io/codestudio/our-scripts/advanced-notification/setup.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.