Custom CSS

We can add custom CSS to apps by performing a check to the user-agent.

If the "canvas" string is included in the user-agent, it means that the content is being displayed inside the app.

Below you can find a code snippet that will save the user agent and then check if the "MobiLoud" string is present, if so it will add custom CSS to the HTML head.

// Get the current user agent
const isApp = navigator.userAgent.toLowerCase().indexOf('canvas') > -1;

// Check if the user agent contains the canvas string
if (isApp) {

  // Outputs the custom CSS in case canvas is present in the user-agent
  document.head.innerHTML += '<style>footer { display:none !important; }</style>';

}

If you are using PHP you can use the following piece of code:

$u_agent = $_SERVER['HTTP_USER_AGENT'];
if (strlen(strstr($u_agent, "canvas")) > 0) {
  echo "<style>footer { display:none !important; }</style>";
}