Adding custom CSS to Canvas Apps using Javascript

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 “canvas” string is present, if so it will add custom CSS to the HTML head.

<script type="text/javascript">
// 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, sidebar { display:none !important; }</style>';

}
</script>

Related Articles