🖼️LOADING SCREEN V2

Note: This documentation covers all configuration files you have access to. The loading screen automatically detects your framework (ESX, QBCore, QBox) and displays player data during connection.

1) Overview

Risk Loading Screen is a modern, customizable loading screen for FiveM servers featuring:

🎵 Built-in music player with playlist
👥 Team member showcase (via Discord)
🖼️ Photo gallery (from Discord channel)
📊 Live player statistics (name, bank balance, job)
🎨 Fully customizable colors and branding
📜 Built-in rules overlay (F1 key)
⏰ Real-time clock with customizable format
🔗 Social media links
🎬 Transparent mode with video background support
🌐 Multi-language ready

2) File Structure

You have access to these configuration files:

risk-loadscreen/
├── client.lua                    ← Auto-close & showcase command
├── editable/
│   ├── config.js                ← Main configuration (branding, music, links, rules)
│   ├── config.css               ← Color scheme customization
│   └── server.lua               ← Discord bot token, team members, gallery
└── html/
    └── assets/
        ├── music/               ← Add your music files here
        │   ├── song1.mp3
        │   ├── cover1.png
        │   └── ...
        ├── BGBehind.png         ← Background image (transparent mode)
        └── video.mp4            ← Background video (optional)

3) Discord Integration Setup

Step 1: Create Discord Bot

Go to Discord Developer Portal
Click "New Application"
Name your application (e.g., "My Server Bot")
Go to "Bot" tab → Click "Add Bot"
Under "Token" section → Click "Reset Token" → "Copy"
Save this token securely (you'll need it in Step 2)

Step 2: Enable Required Intents

Still in the Bot tab:

Scroll down to "Privileged Gateway Intents"
Enable:
- ✅ Server Members Intent
- ✅ Message Content Intent
Click "Save Changes"

Step 3: Invite Bot to Your Server

Go to "OAuth2" → "URL Generator"
Select scopes:
- ✅ bot
Select bot permissions:
- ✅ Read Messages/View Channels
- ✅ Read Message History
Copy the generated URL
Open URL in browser → Select your Discord server → Authorize

Step 4: Configure in server.lua

Open editable/server.lua:

local DISCORD_TOKEN = 'YOUR_BOT_TOKEN_HERE'

Replace YOUR_BOT_TOKEN_HERE with the token from Step 1.

⚠️ IMPORTANT: Never share your bot token publicly! Keep it secret.

4) Gallery Configuration

The gallery displays the last 8 images posted in a Discord channel.

Setup Instructions:

1. Enable Developer Mode in Discord:

Discord Settings → Advanced → Enable Developer Mode

2. Get Channel ID:

Right-click on the channel → Copy Channel ID

3. Configure in server.lua:

local GALLERY_CHANNEL = '1234567890123456789'

Examples:

Screenshots channel:

local GALLERY_CHANNEL = '1234567890123456789'

Community photos channel:

local GALLERY_CHANNEL = '9876543210987654321'

Disable gallery (leave empty):

local GALLERY_CHANNEL = ''

📌 NOTE: Make sure your bot has access to read the channel! If the gallery shows no images, check bot permissions.

5) Team Members Configuration

Display your staff team with Discord avatars and roles.

Setup Instructions:

1. Get Discord User IDs:

Right-click on user in Discord → Copy User ID

2. Configure in server.lua:

local TEAM_MEMBERS = {
    {userId = '123456789012345678', role = 'OWNER',     color = 1},
    {userId = '234567890123456789', role = 'DEV',       color = 1},
    {userId = '345678901234567890', role = 'ADMIN',     color = 2},
    {userId = '456789012345678901', role = 'MODERATOR', color = 3},
}

Parameters:

userId — Discord User ID (18 digits)
role — Role text shown on card (uppercase recommended)
color — Card color: 1 (green), 2 (blue), or 3 (yellow)

Color Examples:

Color 1 (Green) — Owners/Devs:

{userId = '123456789012345678', role = 'OWNER', color = 1},
{userId = '234567890123456789', role = 'DEV',   color = 1},

Color 2 (Blue) — Admins/Managers:

{userId = '345678901234567890', role = 'ADMIN',   color = 2},
{userId = '456789012345678901', role = 'MANAGER', color = 2},

Color 3 (Yellow) — Support/Moderators:

{userId = '567890123456789012', role = 'SUPPORT',   color = 3},
{userId = '678901234567890123', role = 'MODERATOR', color = 3},

Disable team page:

local TEAM_MEMBERS = {}

⚠️ NOTE: If a user's Discord avatar doesn't load, verify:
User ID is correct (18 digits)
Bot token is valid
User hasn't blocked the bot

6) Color Customization — config.css

Open editable/config.css to change the color scheme:

:root {
    --main-color-1: #FDFE02;              /* Primary accent color */
    --main-color-2: #979801;              /* Secondary accent */
    --main-color-3: #555509;              /* Tertiary accent */
    --main-color-glow: rgba(253, 254, 2, 0.49);  /* Glow effects */
    --main-color-soft: rgba(253, 254, 2, 0.26);  /* Soft glow */
    --main-color-border: #FEFF83;         /* Border highlights */
    --main-color-text: #7E7E01;           /* Button text */
    --main-color-hover-bg: #6E6E33;       /* Button hover background */
    --main-color-hover-bg-fade: rgba(46, 46, 29, 0); /* Hover fade */
    
    --card-color-1: #1ffe02;              /* Team card color 1 (green) */
    --card-color-2: #2f20fe;              /* Team card color 2 (blue) */
    --card-color-3: #effe20;              /* Team card color 3 (yellow) */
}

Popular Color Schemes:

Yellow/Gold (Default):

--main-color-1: #FDFE02;
--main-color-2: #979801;
--main-color-3: #555509;

Blue/Cyan:

--main-color-1: #00D4FF;
--main-color-2: #0077AA;
--main-color-3: #003355;

Purple/Pink:

--main-color-1: #FF00FF;
--main-color-2: #AA00AA;
--main-color-3: #550055;

Red/Orange:

--main-color-1: #FF4500;
--main-color-2: #CC3300;
--main-color-3: #661100;

Green/Lime:

--main-color-1: #00FF00;
--main-color-2: #00AA00;
--main-color-3: #005500;

💡 TIP: Use ColorPicker to find hex codes for custom colors.

7) Main Configuration — config.js

Open editable/config.js for all branding and functionality settings.

General Settings

window.RiskConfig = {
    // ─── GENERAL ──────────────────────────────────────────────────────────────
    transparentMode: false,         // true = transparent background, false = default
    transparentOverlay: 0.7,        // Darkness overlay (0.0 = none, 1.0 = full black)
    transparentBgMode: 'image',     // 'image' = BGBehind.png, 'video' = video.mp4
    transparentBgVideo: 'video.mp4',// Video filename in html/assets/ folder

Transparent Mode Examples:

Standard mode (image background):

transparentMode: false

Transparent with dark overlay:

transparentMode: true,
transparentOverlay: 0.7,      // 70% dark
transparentBgMode: 'image'    // Uses BGBehind.png

Transparent with video background:

transparentMode: true,
transparentOverlay: 0.5,
transparentBgMode: 'video',
transparentBgVideo: 'background.mp4'  // Place in html/assets/

Fully transparent (no overlay):

transparentMode: true,
transparentOverlay: 0.0,      // No darkening
transparentBgMode: 'image'

Tab Visibility

tabs: {
    team:    true,   // Show Team tab
    gallery: true    // Show Gallery tab
},

Hide specific tabs:

tabs: {
    team:    false,  // Team tab hidden
    gallery: true    // Gallery tab visible
},

Hide all extra tabs:

tabs: {
    team:    false,
    gallery: false
},

Clock & Date Format

clockFormat: 24,        // 24 = 24h format, 12 = 12h format with AM/PM
dateFormat: 'DMY',      // 'DMY' = 31.12.2025, 'MDY' = 12/31/2025, 'YMD' = 2025.12.31

Examples:

European format:

clockFormat: 24,
dateFormat: 'DMY'
// Result: 31.12.2025 – 14:30:00

American format:

clockFormat: 12,
dateFormat: 'MDY'
// Result: 12/31/2025 – 02:30:00 PM

Asian format:

clockFormat: 24,
dateFormat: 'YMD'
// Result: 2025.12.31 – 14:30:00

First Join Placeholders

firstJoin: {
    money: 0,           // Bank balance shown on first join
    job: 'Unemployed'   // Job shown on first join
},

Change defaults:

firstJoin: {
    money: 5000,        // New players start with $5,000
    job: 'Citizen'      // Shows "Citizen" instead of "Unemployed"
},

Music Player Configuration

randomStart: true,   // true = random song, false = start with first song
volume: 0.2,         // Default volume (0.0 = silent, 1.0 = max)
songs: [
    {
        src: 'assets/music/song1.mp3',       // Audio file path
        title: 'Song Title',                  // Song name
        artist: 'Artist Name',                // Artist name
        cover: 'assets/music/cover1.png'     // Album cover image
    },
    // Add more songs here...
],

How to add music:

1. Prepare files:

Audio: MP3 format recommended
Cover: PNG/JPG, 512x512px recommended

2. Add files to folder:

Place audio in html/assets/music/
Place covers in html/assets/music/

3. Add to config:

songs: [
    {
        src: 'assets/music/chill-vibes.mp3',
        title: 'Chill Vibes',
        artist: 'Artist Name',
        cover: 'assets/music/chill-cover.png'
    },
    {
        src: 'assets/music/trap-beat.mp3',
        title: 'Trap Beat',
        artist: 'Producer Name',
        cover: 'assets/music/trap-cover.png'
    },
],

Music player options:

Start with first song:

randomStart: false

Lower volume:

volume: 0.1  // 10% volume

Higher volume:

volume: 0.5  // 50% volume

links: [
    {icon: 'fa-brands fa-discord',   url: 'https://discord.gg/yourlink'},
    {icon: 'fa-brands fa-tiktok',    url: 'https://www.tiktok.com/'},
    {icon: 'fa-brands fa-youtube',   url: 'https://www.youtube.com/'},
    {icon: 'fa-brands fa-instagram', url: 'https://www.instagram.com/'},
    {icon: 'fa-solid fa-globe',      url: 'https://yourwebsite.com'}
],

Popular icons:

'fa-brands fa-discord'      // Discord
'fa-brands fa-tiktok'       // TikTok
'fa-brands fa-youtube'      // YouTube
'fa-brands fa-instagram'    // Instagram
'fa-brands fa-twitter'      // Twitter / X
'fa-brands fa-twitch'       // Twitch
'fa-brands fa-reddit'       // Reddit
'fa-solid fa-globe'         // Website
'fa-solid fa-store'         // Store/Shop
'fa-solid fa-book'          // Wiki/Docs

Remove unwanted links:

links: [
    {icon: 'fa-brands fa-discord',   url: 'https://discord.gg/yourlink'},
    {icon: 'fa-solid fa-globe',      url: 'https://yourwebsite.com'}
    // Only 2 links
],

Add more links:

links: [
    {icon: 'fa-brands fa-discord',   url: 'https://discord.gg/yourlink'},
    {icon: 'fa-brands fa-tiktok',    url: 'https://www.tiktok.com/'},
    {icon: 'fa-brands fa-youtube',   url: 'https://www.youtube.com/'},
    {icon: 'fa-brands fa-instagram', url: 'https://www.instagram.com/'},
    {icon: 'fa-brands fa-twitter',   url: 'https://twitter.com/'},
    {icon: 'fa-brands fa-twitch',    url: 'https://twitch.tv/'},
    {icon: 'fa-solid fa-globe',      url: 'https://yourwebsite.com'}
    // 7 links total
],

Rules Configuration

rules: {
    key: 'F1',                      // Key to open rules overlay
    title: 'SERVER RULES',          // Rules overlay title
    subtitle: 'Please read all rules carefully before playing.',
    closeLabel: 'CLOSE',            // Close button text
    entries: [
        {
            number: '01',
            title: 'Respectful Conduct',
            text: 'Treat all players with respect. Insults, discrimination and hate speech are strictly forbidden.'
        },
        {
            number: '02',
            title: 'No Cheating',
            text: 'The use of cheats, hacks or exploits will result in an immediate permanent ban.'
        },
        // Add more rules here...
    ]
},

Change hotkey:

key: 'F2',    // Open rules with F2 instead of F1

Customize rules:

entries: [
    {
        number: '01',
        title: 'Be Respectful',
        text: 'No toxic behavior, racism, or hate speech of any kind.'
    },
    {
        number: '02',
        title: 'No Hacking',
        text: 'Cheats, exploits, and mods are strictly prohibited.'
    },
    {
        number: '03',
        title: 'Roleplay Quality',
        text: 'Stay in character. High-quality RP is expected at all times.'
    },
    {
        number: '04',
        title: 'No RDM/VDM',
        text: 'Random killing or vehicle ramming is not allowed.'
    },
],

Translate to another language:

rules: {
    key: 'F1',
    title: 'SERVERREGELN',
    subtitle: 'Bitte lies alle Regeln sorgfältig durch.',
    closeLabel: 'SCHLIESSEN',
    entries: [
        {
            number: '01',
            title: 'Respektvoller Umgang',
            text: 'Behandle alle Spieler mit Respekt. Beleidigungen und Hass sind verboten.'
        },
        // ...
    ]
},

Labels & Branding

serverName: 'SERVER NAME',
roleplayText: 'ROLEPLAY',
serverDescription: 'Welcome to our server! Experience a unique roleplay world...',
timeLabel: 'LOCAL TIME',
balanceTitle: 'BALANCE',
balanceDesc: 'Your current bank balance on the server...',
jobTitle: 'JOB',
jobDesc: 'Your current job on the server...',
loadingTitle: 'LOADING',
loadingDesc: 'Please wait while the server and all resources are being loaded...',

Customize branding:

serverName: 'Los Santos RP',
roleplayText: 'SERIOUS RP',
serverDescription: 'The most realistic roleplay experience in FiveM. Join today!',

Change panel descriptions:

balanceTitle: 'BANK ACCOUNT',
balanceDesc: 'Your savings in Maze Bank.',
jobTitle: 'OCCUPATION',
jobDesc: 'Your current employment status.',

Navigation buttons:

navButtons: {
    main:    'HOME',        // Main page button
    team:    'STAFF',       // Team page button
    gallery: 'PHOTOS'       // Gallery page button
},

Rules hint box:

rulesHint: {
    title: 'SERVER RULES',
    desc:  'Press F1 to read our server rules.'
},

8) Auto-Close & Showcase Command

Open client.lua:

-- Auto-close loading screen when player spawns
CreateThread(function()
    if GetConvarInt('risk_loadscreen_autoclose', 0) == 1 then
        closeLoad()
    end
end)

To enable auto-close, add to your server.cfg:

set risk_loadscreen_autoclose 1

Showcase command (preview loading screen in-game):

RiskShowcaseConfig = {
    enabled = true,        -- true = command active, false = disabled
    command = 'loadscreen' -- Command name (without /)
}

Usage in-game:

/loadscreen

Disable showcase command:

RiskShowcaseConfig = {
    enabled = false
}

Change command name:

RiskShowcaseConfig = {
    enabled = true,
    command = 'test'  -- Use /test instead
}

9) Complete Configuration Examples

Example 1: Minimal Setup (No Discord)

editable/server.lua:

local DISCORD_TOKEN = ''
local GALLERY_CHANNEL = ''
local TEAM_MEMBERS = {}

editable/config.js:

tabs: {
    team:    false,  // No team page
    gallery: false   // No gallery page
},
songs: [
    {
        src: 'assets/music/song1.mp3',
        title: 'Chill Vibes',
        artist: 'Artist',
        cover: 'assets/music/cover1.png'
    }
],

Example 2: Full Setup with Team & Gallery

editable/server.lua:

local DISCORD_TOKEN = 'YOUR_BOT_TOKEN_HERE'
local GALLERY_CHANNEL = '1234567890123456789'
local TEAM_MEMBERS = {
    {userId = '111111111111111111', role = 'OWNER', color = 1},
    {userId = '222222222222222222', role = 'ADMIN', color = 2},
    {userId = '333333333333333333', role = 'MOD',   color = 3},
}

editable/config.js:

tabs: {
    team:    true,
    gallery: true
},
serverName: 'Los Santos RP',
roleplayText: 'SERIOUS RP',

Example 3: Video Background

editable/config.js:

transparentMode: true,
transparentOverlay: 0.6,
transparentBgMode: 'video',
transparentBgVideo: 'city-timelapse.mp4',

Place city-timelapse.mp4 in html/assets/ folder.

Example 4: Blue Color Scheme

editable/config.css:

:root {
    --main-color-1: #00D4FF;
    --main-color-2: #0077AA;
    --main-color-3: #003355;
    --main-color-glow: rgba(0, 212, 255, 0.49);
    --main-color-soft: rgba(0, 212, 255, 0.26);
    --main-color-border: #83F3FF;
    --main-color-text: #014D77;
    --main-color-hover-bg: #336E8E;
    --main-color-hover-bg-fade: rgba(29, 46, 56, 0);
    
    --card-color-1: #00FF88;
    --card-color-2: #00AAFF;
    --card-color-3: #FFD700;
}

10) Troubleshooting

❌ Gallery shows no images

Possible causes:

Wrong channel ID
Bot doesn't have access to channel
No images posted in channel

Solution:

Verify GALLERY_CHANNEL ID is correct
Check bot can read channel (permissions)
Post images in the channel

❌ Team members show no avatars

Possible causes:

Wrong user IDs
Invalid bot token
User blocked the bot

Solution:

Copy User IDs again (right-click → Copy User ID)
Verify bot token is correct
Check user hasn't blocked bot

❌ Music doesn't play

Possible causes:

Wrong file paths
Files not uploaded
Browser blocking autoplay

Solution:

Check file paths in songs array
Ensure MP3 files are in html/assets/music/
Click anywhere on screen to allow audio

❌ Loading screen won't close

Possible causes:

Framework not detected
Multicharacter script not triggering events

Solution:

Add to server.cfg: set risk_loadscreen_autoclose 1
Check framework is started before loading screen
Verify multicharacter script compatibility

❌ Discord bot not working

Possible causes:

Invalid token
Bot not invited to server
Missing intents

Solution:

Generate new token in Discord Developer Portal
Re-invite bot with correct permissions
Enable Server Members Intent and Message Content Intent

❌ Rules overlay won't open

Possible causes:

Wrong key configured
Key conflict with other scripts

Solution:

Try different key in rules.key
Test with F2 or F3 instead of F1

11) Best Practices

✅ Always test showcase command — Use /loadscreen to preview changes ✅ Optimize music files — Use compressed MP3 (128-192 kbps) to reduce download time ✅ Use square images for covers — 512x512px recommended ✅ Keep gallery channel active — Post new screenshots regularly ✅ Update team members — Remove staff who left ✅ Use high-quality background video — 1080p 30fps, under 50MB ✅ Test on mobile — Some players connect from phones ✅ Keep rules updated — Review and update rules monthly ✅ Backup config files — Before making major changes ✅ Never share bot token — Keep it private and secure

12) Quick Start Checklist

[ ] Install Discord bot and get token
[ ] Configure DISCORD_TOKEN in editable/server.lua
[ ] Get Discord channel ID for gallery
[ ] Configure GALLERY_CHANNEL in editable/server.lua
[ ] Get Discord User IDs for team members
[ ] Configure TEAM_MEMBERS in editable/server.lua
[ ] Customize serverName and roleplayText in config.js
[ ] Add your music files to html/assets/music/
[ ] Update songs array in config.js
[ ] Configure social links in config.js
[ ] Customize rules entries in config.js
[ ] Change colors in editable/config.css
[ ] Test with /loadscreen command in-game
[ ] Restart server and verify loading screen works

PreviousDiscord Bot Token NextHUD V2

Last updated 18 days ago

hashtag1) Overview

hashtag2) File Structure

hashtag3) Discord Integration Setup

hashtagStep 1: Create Discord Bot

hashtagStep 2: Enable Required Intents

hashtagStep 3: Invite Bot to Your Server

hashtagStep 4: Configure in server.lua

hashtag4) Gallery Configuration

hashtagSetup Instructions:

hashtag5) Team Members Configuration

hashtagSetup Instructions:

hashtag6) Color Customization — config.css

hashtagPopular Color Schemes:

hashtag7) Main Configuration — config.js

hashtagGeneral Settings

hashtagTab Visibility

hashtagClock & Date Format

hashtagFirst Join Placeholders

hashtagMusic Player Configuration

hashtagSocial Links

hashtagRules Configuration

hashtagLabels & Branding

hashtag8) Auto-Close & Showcase Command

hashtag9) Complete Configuration Examples

hashtagExample 1: Minimal Setup (No Discord)

hashtagExample 2: Full Setup with Team & Gallery

hashtagExample 3: Video Background

hashtagExample 4: Blue Color Scheme

hashtag10) Troubleshooting

hashtag❌ Gallery shows no images

hashtag❌ Team members show no avatars

hashtag❌ Music doesn't play

hashtag❌ Loading screen won't close

hashtag❌ Discord bot not working

hashtag❌ Rules overlay won't open

hashtag11) Best Practices

hashtag12) Quick Start Checklist

1) Overview

2) File Structure

3) Discord Integration Setup

Step 1: Create Discord Bot

Step 2: Enable Required Intents

Step 3: Invite Bot to Your Server

Step 4: Configure in server.lua

4) Gallery Configuration

Setup Instructions:

5) Team Members Configuration

Setup Instructions:

6) Color Customization — config.css

Popular Color Schemes:

7) Main Configuration — config.js

General Settings

Tab Visibility

Clock & Date Format

First Join Placeholders

Music Player Configuration

Social Links

Rules Configuration

Labels & Branding

8) Auto-Close & Showcase Command

9) Complete Configuration Examples

Example 1: Minimal Setup (No Discord)

Example 2: Full Setup with Team & Gallery

Example 3: Video Background

Example 4: Blue Color Scheme

10) Troubleshooting

❌ Gallery shows no images

❌ Team members show no avatars

❌ Music doesn't play

❌ Loading screen won't close

❌ Discord bot not working

❌ Rules overlay won't open

11) Best Practices

12) Quick Start Checklist