Things you can do in your page to differentiate from your app

Using a single codebase is a huge value add for most businesses, yet often, its true essence gets lost in translation.

When talking about building apps using a single codebase, It's not merely about maintaining the website as-is and calling it an app; rather, it's a strategic approach that empowers clients to utilize the same resources and development team for both platforms.
‍

✅ one of the strong points in Mobiloud apps is the possibility to have the same codebase for both your app and website.

Defining the Single Codebase Approach

At its core, the single codebase approach signifies the ability to take advantage of development efforts by reusing existing resources for both website and app creation. This sounds like a lot of work beforehand, but when comparing this to what creating a native app from scratch and having to deal with different developer teams/languages, this is a really good option for leveraging your app.

Strategies for differentiation used by our clients

Creating Dedicated App Pages: While it may seem labor-intensive, the process of developing new pages specifically tailored for the app can often be simplified.This can be accomplished creating app-exclusive pages/urls, for example, having: yourwebsite.com , the app page would be yourwebsite.com/app . Some clients opt to have a different subdomain for it like: app.yourwebsite.com.
Dynamic Content Rendering: Leveraging the capabilities of dynamic platforms such as WordPress, Shopify, or JavaScript frameworks, this is a versatile solution for displaying content dynamically based on the platform.An approach some clients use for this is detecting the user’s user-agent/platform (MobiLoud’s platform uses a special user-agent name called ‘’canvas’’), and based on that, rendering different content into the website.
Selective Element Targeting: Assigning unique classes to elements and selectively targeting them within our platform or usign our CSS Injector plugin into inject styles based on certain conditions
Utilizing Style Injectors: We offer two ways to inject styles into your site to modify its appearance within the app.
1. Inserting styles through our Canvas platform → This is a good way to insert styles in a non-invasive way, useful for cases where you dont want to mess with your site code
2. Using our CSS Injector plugin → With this tool you can insert styles into your site based on conditions such as pages where the code should or not be applied (with regex rules) or based on user platform using the methods provided in the library

Hiding/showing sections

To hide specific sections in your site, we inject CSS into the app directly or using our CSS Injector plugin for dynamically doing it client-side.

An easy and fast way to do this, is adding classes to elements in your site and then target them with css, our suggested ClassNames would be:

.ml-app-exclusive → These are elements that should be displayed in the app only

.ml-app-hide → These are elements that should be hidden in the app

❓ The Class Names could be named whatever you want, and then the code should be adapted to those classnames

Here is an example on how to implement this classes using our CSS Injector plugin

‍

<html>
<head></head>
<body>
	<!-- Site content -->
	<div class="ml-app-exclusive">
		THIS IS HIDDEN IN THE BROWSER, BUT VISIBLE IN APP
	</div>
	<div class=".ml-app-hide">
		THIS IS HIDDEN IN THE APP, BUT VISIBLE IN BROWSER
	</div>

	<!-- Site content -->


<script src="https://cdn.jsdelivr.net/npm/@mobiloud/ml-css-injector@latest/dist/ml-css-injector.min.js"></script>
<script>

// deviceData is a dynamic way to check the user's device

    if(!deviceData.isCanvas){
	    // any classes that should apply if it's NOT the app, would be here
	    addStyle({css: `.ml-app-exclusive{display: none !important}`});
    } else{
	    // any classes that should apply to the app, would be here
	    addStyle({css: `.ml-app-exclusive{display: block !important}`});
	    addStyle({css: `.ml-app-hide{display: none !important}`});
	    addStyle({css: `footer{display: none !important}`}); 
    }

  </script>
  </body>
  <html>

‍