> For the complete documentation index, see [llms.txt](https://guardiandevlabs.gitbook.io/guardiandevlabs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guardiandevlabs.gitbook.io/guardiandevlabs/paid-scripts/guardian-loading-screen/installation.md).

# Installation

## 🚀 Installation Guide

Follow these steps to install and customize the Guardian Labs Loading Screen on your FiveM server.

### 1. File Preparation

1. Download the resource folder.
2. Rename the folder to `GuardianLoading` (or your preferred name).
3. Drag and drop the folder into your server's `resources` directory.

### 2. Configuration

Open the `config.json` file located in the root directory. This is where you will personalize the experience.

#### Basic Settings

* BackgroundMode: Set to `1` for a static image or `2` for a video.
* PrimaryColor: Enter your community's hex code (e.g., `#3b82f6`) to change the loading bar and button accents.
* DiscordID: Enter your Discord Server ID to enable the live member count.

#### Customizing Content

* Staff Team: Add or remove objects in the `Staff` array to update the Star panel.
* Updates: Add new update cards. Make sure to provide a valid image URL for the banner.
* Playlist: Add your `.mp3` to the playlist array.

### 3. Server Activation

Add the resource to your server configuration file so it starts automatically.

1. Open your `server.cfg`.
2. Add the following line:

   Code snippet

   ```
   ensure GuardianLoading
   ```

***

### 🛠 Troubleshooting & FAQ

#### How do I change the video?

Place your video file in the `audio/` folder and name it `loadingscreen.mp4`, or change the path in the `index.html` file on line 302.

#### Where do I find my Discord ID?

1. Open Discord Settings > Advanced.
2. Turn on Developer Mode.
3. Right-click your Server Name on the left sidebar and click Copy Server ID.

***