> For the complete documentation index, see [llms.txt](https://codestudio5m.gitbook.io/codestudio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codestudio5m.gitbook.io/codestudio/our-scripts/advanced-notification/setup.md).

# Setup

This is a detailed setup guide for Advanced Notification. If you have any questions before making a purchase, you can contact us on Discord

## 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&amp;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
  ```