Special Customisations – URL2App Knowledge-base

How to Dynamically Change the Items of Bottom Navigation Bar

Ferdousur Rahman — Fri, 30 May 2025 18:40:06 +0000

In some cases, you might want to change the bottom navigation bar items dynamically depending on the user’s action or state — such as switching between “Login” and “Logout” when a user logs in or out.

URL2App allows you to achieve this from your website code (displayed inside the app) by calling a simple JavaScript function.

Syntax

let titles = "Home<=>Search<=>Profile";
let icons = "e88a<=>e8b6<=>e853"; // Material Icon Unicode
let actions = "https://example.com<=>https://example.com/search<=>https://example.com/profile";

bottomNavUpdateItems(titles, icons, actions);

Parameters

Name	Description
`titles`	The names to show in the bottom navigation. Separate them using `<=>`
`icons`	Unicode of Material Icons (Get from: https://fonts.google.com/icons)
`actions`	URL to load when that nav item is clicked. Separate using `<=>`

Use Case Example

Let’s say:

When a user is logged out, you want the bottom nav item to show Login.
When the user is logged in, it should be replaced by Logout.

You can control that dynamically using JavaScript.

if (userIsLoggedIn) {
    bottomNavUpdateItems(
        "Home<=>Profile<=>Logout",
        "e88a<=>e853<=>e9ba",
        "https://example.com/home<=>https://example.com/profile<=>https://example.com/logout"
    );
} else {
    bottomNavUpdateItems(
        "Home<=>Profile<=>Login",
        "e88a<=>e853<=>e890",
        "https://example.com/home<=>https://example.com/profile<=>https://example.com/login"
    );
}

How to set user information to identify user for sending push notification to specific user

Ferdousur Rahman — Tue, 14 Jan 2025 05:04:31 +0000

URL2App assigns a unique device ID to each device that installs and opens your app. However, URL2App doesn’t automatically know the user of the website associated with that device (e.g., email address of the user). This is why “Unknown User” appears alongside the device ID when targeting specific users for push notifications.

To know who the user is, you need to pass user identity from your website. This allows URL2App to identify user and display the identify while sending push notification to specific user.

Here are three ways to pass user identity information from your website to your app:

1. Using URL Parameters:

Once a user logs in to your website, the page after login (or any desired page) can include a URL parameter like this:

https://yourwebsite.com/dashboard?URL2App_push_notification_user_identity=email@example.com

Replace email@example.com with the user information you want to see (e.g., email address, user ID) in the place of “Unknown User”.

2. Using Script:

Add a script to the page after login (or any desired page) to pass user information:

Replace email@example.com with the user information you want to see (e.g., email address, user ID) in the place of “Unknown User”.

3. Using Cookies:

Set a cookie on the user’s browser named URL2App_push_notification_user_identity with the desired user information as its value (e.g., email address, user ID) once they log in to your website.

How to Force App Users to Update Their App to the Latest Version

Ferdousur Rahman — Tue, 08 Oct 2024 20:26:24 +0000

This article explains how to implement a mechanism that prompts users to update their app if they are using an outdated version. By adding a custom JavaScript code snippet to your website, you can ensure that users accessing your site through the app are notified to update their app to the latest version.

Overview

The provided JavaScript code checks the app version stored in the browser’s (app) localStorage. If the version is below a specified minimum required version, it displays a warning message along with a link to update the app.

Implementation Steps

Access Your Website’s Code: Open the HTML file or the file that loads first in the app and where you want to add the update check.
Insert the JavaScript Code: Copy and paste the following code snippet into your HTML file, preferably within the or just before the closing tag.

By implementing this JavaScript code, you can effectively manage app version updates and encourage users to keep their applications up to date.

Please note that it will only work if your published version of app is built after 05 September 2025.

How to add a custom Back Button to go to the previous page?

Zawad Anjum — Thu, 03 Oct 2024 07:51:08 +0000

You can easily add a custom back button in your bottom navigation or navigation drawer if you’d like more control over your app’s navigation .

To do this, simply go to either the bottom navigation or navigation drawer, and in the navigation items, add the below action URL . This will allow you to have a dedicated back button that fits seamlessly into your app’s design, making navigation smoother .

Action URL: URL2App-navigation://backward

And if you need more action URLs based on your specific requirements, you can find them in the changelogs of Apillix. Just visit the very bottom of the website, and you’ll find all the action URLs you need to customize your app even further

How to show only icons in the Bottom Nav Bar?

Zawad Anjum — Thu, 03 Oct 2024 05:46:59 +0000

Here’s a simple step to clean up your app’s interface: Go to the Bottom Navigation and clear the button titles . This will remove the text beneath each button, leaving just the icons in place .

Don’t worry—this won’t affect the functionality of your app . It’s just a way to reduce visual clutter and make your interface look cleaner and more streamlined . The icons will still be recognizable, so users can navigate easily, but with a sleeker, more minimalistic design . If you’re aiming for an icon-only navigation bar, this is the perfect step to take .

How to display Dropdown Menus in Navigation Drawer

Ferdousur Rahman — Tue, 17 Sep 2024 08:03:10 +0000

When your app has many menu items, it can be challenging for users to find what they need. To make navigation easier, you can group related menu items together.

In URL2App, you can organize your menus into categories, even though there’s no visual setting for this. You can do it with a simple trick: use two caret symbols (^^) before the menu title to make it a sub-menu under the parent menu.

In this setup:

Home, Feature, and Contact Us are top-level menu items.
Sub Menu 1 and Sub Menu 2 are grouped under Home.

Using this method helps users navigate more easily by organizing menu items into clear categories.