> For the complete documentation index, see [llms.txt](https://cylexdev.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cylexdev.gitbook.io/docs/cylex-phone/exports-and-events/adding-custom-apps.md).

# Adding Custom Apps

Cylex Phone features a dynamic system that allows you to easily integrate the user interfaces (UI) of other external resources (such as a taxi system or custom minigame) directly into

#### How Does the System Work? <a href="#user-content-how-does-the-system-work" id="user-content-how-does-the-system-work"></a>

1. **Create Your Own Script:** The HTML, CSS, and JS files for your custom application remain entirely within **your own resource's** folder.
2. **Register with the Phone:** From your script, use the `AddCustomApp` export to notify the phone about your application. During this process, you define the app's name, icon, and the path to your HTML file (NUI URL). Once executed, your app will immediately appear on the phone's home screen.
3. **Running Inside the Phone Screen:** When a player clicks on your application from the phone, your designated HTML page opens within a secure frame (such as an iframe), perfectly fitted to the phone's screen size.

#### Communication (Data Exchange) <a href="#user-content-communication-data-exchange" id="user-content-communication-data-exchange"></a>

Communication between your custom UI and your own Client/Server scripts straightforward:

* **From UI (NUI) to your Script:** When an action occurs in your interface (like a button click), you send data directly back to **your own resource** using standard FiveM callback methods (e.g., `fetch` or `$.post`). Cylex Phone does not require any extra steps from you here; your interface can operate normally as if it were a standalone UI.
* **From your Script to the UI (NUI):** When you want to update your interface running inside the phone or send it a message (e.g., "refresh active player list") from your resource, use the `SendCustomNUIMessage` export provided below. The phone intercepts this data and seamlessly routes it only to your specific custom application.

Below you will find the provided exports to perform these actions along with usage examples:

{% content-ref url="/spaces/txqtJ91rcI0EHH3xURdT/pages/gDZhNBnDI6rJAxQsMAfh" %}
[Exports](/docs/cylex-phone/exports-and-events/adding-custom-apps/exports.md)
{% endcontent-ref %}

{% content-ref url="/spaces/txqtJ91rcI0EHH3xURdT/pages/8tCe8zuFXAfaq1U76DMm" %}
[Events](/docs/cylex-phone/exports-and-events/adding-custom-apps/events.md)
{% endcontent-ref %}

{% content-ref url="/spaces/txqtJ91rcI0EHH3xURdT/pages/bT4rQ6WCfQ9bcsbJVfW1" %}
[Javascript](/docs/cylex-phone/exports-and-events/adding-custom-apps/javascript.md)
{% endcontent-ref %}