Customize Your App Experience

In this guide, you’ll learn how MobiLoud works, what the user agent is, how the app includes a unique identifier in the user agent, and how you can use this to make app-specific customizations. We’ll also explain why making these adjustments directly on your website is the best approach for optimizing the app experience.

How MobiLoud Works

MobiLoud converts your website into a mobile app by loading your site inside a WebView. This allows your app to function like a native mobile app while still using your existing website content. It’s a fast, efficient way to give your users an app experience without the need to build everything from scratch.

While the website is displayed in the WebView, we can add native mobile features (such as push notifications and the bottom navigation bar) around the WebView to enhance the app experience. However, most changes to the website’s design and functionality should be made on your website itself.

What Is a WebView?

A WebView is a component that allows mobile apps to display web content, similar to how a browser works. In the MobiLoud app, your website is loaded inside a WebView, allowing users to experience it just like they would in a mobile browser. This enables us to wrap native mobile features around your existing site, giving it the feel of an app.

While WebViews offer a lot of flexibility, they do have some limitations compared to a full mobile browser. Some advanced browser features or behaviors may not function exactly the same in a WebView. However, for most websites, the experience remains largely seamless.

What Is a User Agent?

The user agent is a string of text that a browser or app sends to a website server when loading the site. It provides information about the device, browser, and operating system being used. This allows websites to customize the experience based on the type of device or app accessing it.

For example, when someone visits your site from a desktop browser, the user agent might look something like this:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.61 Safari/537.36

On mobile, the user agent string might include references to a specific mobile browser or device type.

How MobiLoud Uses the User Agent

When your website is displayed inside the MobiLoud app, the user agent includes a unique identifier to signal that the app is accessing the website. This identifier is the word "canvas," which you can detect to apply custom styles or scripts specifically for the app.

For instance, when a user opens your site inside the MobiLoud app, the user agent might look like this:‍

Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1 Canvas

The keyword "Canvas" (or similar) is included in the user agent string, which allows you to detect when the site is viewed inside the app. You can then use this information to modify how the website appears or behaves specifically within the app.

Detecting the App and Applying Customizations

Using the unique "canvas" string in the user agent, you can easily create conditional logic to apply custom styles or scripts only when the website is being viewed in the app. This allows you to make specific changes for app users without affecting the experience for desktop or mobile web users.

Here’s how to detect if your website is being accessed in the app and apply customizations:

Javascript Example:`‍`

<script>
if (navigator.userAgent.toLowerCase().includes('canvas')) {    
	// Your app-specific code goes here
    console.log('App detected, applying custom changes');
}
</script>

`‍`PHP Example:

if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'canvas') !== false) {    
	// Your app-specific code goes here   
    echo 'App detected, applying custom changes';
}

You can use these methods to apply styles, hide elements, or modify the behavior of your site when viewed in the app.

Why Customize Directly on Your Website?

While it’s possible to inject code into the app through our platform, making changes directly on your website is always the preferred method. Here’s why:

Greater Control: Adjusting your website directly gives you full control over your code. You can easily make changes or updates without needing to involve us or wait for app store submissions.
Faster Load Times: When you apply customizations directly on your site, the changes load with the page content right away, preventing flickering or delay. If you rely on injected code, changes might appear after the content loads, causing a less smooth experience.
One Central Place for Updates: By managing all changes on your website, you only need to adjust your code in one location. This makes it easier to maintain and update your website, ensuring consistency across platforms.

What’s Next?

Now that you understand how MobiLoud works and how to detect the app using the user agent, you can start applying customizations to tailor the app experience for your users.

For more detailed guidance on customizing your app and optimizing your website’s performance in the app, be sure to check out our other guides:

These resources will help you fine-tune the app experience for your users and make the most of your mobile presence.

‍