Skip to main content

​
Overview

Creating a new website requires you to:
  1. Create a new website folder
  2. Add the required images
  3. (Optional) Copy an existing website as a starting template
  4. Connect the website to the hotel screen ui
  5. Changing the website colors

​
Step 1: Create the Website Folder

You need to create a new folder for your website.

​
Folder Location

The folder must be created inside: 
nui/websites/

​
Folder Naming Format

The folder name must follow this format: 
www.<website-name>.com

​
Example

If your hotel is called Opium Nights Hotel, the folder name should be: 
www.opium-nights-hotel.com
So the final path will look like: 
nui/websites/www.opium-nights-hotel.com
Image

​
Step 2: Add Required Images

Inside your new website folder, you must add all required image files. These usually include:
  • Background image
  • Hotel logo
  • Pattern image
  • Room image
Make sure:
  • Image names match what the website expects
  • Images are placed directly inside the website folder
Image

​
Step 3: (Optional) Copy an Existing Website as a Template

To make things easier, you can copy an existing hotel website folder and use it as a starting point.

​
How to do it:

  1. Go to nui/websites/
  2. Copy an existing folder
  3. Rename it to your new website name (example: www.opium-nights-hotel.com)
  4. Replace the images with your own
This method is recommended because:
  • The structure is already correct
  • You only need to change the images

​
Step 4: Connect the Website to the Hotel Screen UI

After creating the website folder, you must configure the hotel screen UI to use it.

​
What to do:

  1. Open the config.lua file
  2. Navigate to the hotel that you want to use the new website
  3. Locate the screens section
  4. Be sure that the action field is set to ui
  5. Inside the ui section, locate the url field and set it to your website folder name
Example: If your folder is: 
www.opium-nights-hotel.com
Set the URL to: 
www.opium-nights-hotel.com
Save the configuration file.
Image Image

​
Step 5: Changing the Website Colors

You can customize the website colors directly from the screen UI configuration. This allows you to adapt the look of the website to match your hotel branding while keeping the original layout and structure.

​
Available Color Settings

Inside the screen UI configuration, you will find these color properties: backgroundColor This controls the main background color of the website. accentColor This is the primary accent color. It is mainly used for:
  • Buttons
  • Highlights
  • Important UI elements
  • Decorative details
accentColor2 This is the secondary accent color. It is used for:
  • Button shadows
  • Depth effects
  • Secondary decorative elements
To keep the GTA-style visual design intact, we strongly recommend setting: 👉 accentColor2 to a darker variant of accentColor This preserves proper contrast and maintains the intended visual depth of the interface.
To speed up the setup process, you can modify colors live at runtime using the FiveM NUI DevTools. This allows you to experiment with different color combinations instantly, without restarting the resource or editing files repeatedly.

​
1. Preparation

To be able to use the FiveM NUI DevTools, the Beta channel must be selected in the FiveM client settings under Game. Image of FiveM client settings

​
2. Open your selected screen UI

Image of selected screen UI

​
3. Open the FiveM Console

Press F8 while in game to open the FiveM console. Open FiveM console

​
4. Enable NUI DevTools

Now navigate to Tools > NUI > Open DevTools in the FiveM console.
This will open the Chromium Developer Tools for the current UI. Open NUI DevTools by clicking Tools > NUI > Open DevTools

​
5. Find the element to change the colors

Inside DevTools:
  1. Open the Elements tab
  2. Scroll down until you find the <iframe> element named utility_hotel
Locate Iframe element named utility_hotel
  1. Now right click on the <iframe> element and select Expand Recursively
Expand UI container div
  1. Scroll down until you find and click the first <div> element inside the <div id="root"> element
Locate UI container div

​
6. Modify the Colors

Once you locate the correct element:
  1. On your right you will find the Styles tab, there you can see the current color values
On the right you will find the Styles tab with the current color values
  1. To change the color values, click on the small rectangle next to the color you want to modify and see the color change in real time
On the right you will find the Styles tab with the current color values

​
7. Apply Final Values to Config

After finding the colors you like:
  1. Copy the final color values
  2. Paste them into your screen UI configuration
  3. Save the config file
On the right you will find the Styles tab with the current color values Your website will now use the selected colors permanently.
Using NUI DevTools lets you:
  • Preview changes instantly
  • Avoid repeated restarts
  • Fine-tune GTA-style color balance
  • Find the perfect accent contrast
This significantly reduces setup time when designing a new hotel website.

​
Final Checklist

Before testing the website, make sure:
  • The folder is inside nui/websites/
  • The folder name follows the format www.<name>.com
  • All required images are added
  • The screen UI configuration URL matches the folder name exactly
If everything is correct, your new hotel website should now be available on the hotel screen.